/* MyAnnualCalendar | classic planner (design option A). Brand: navy #13294B ink, Carolina blue #4B9CD3 accent, soft Carolina rail (LQ, 4 Oct 2026). */
:root{
  --ink:#13294B; --ink2:#4A5B7A; --line:#D8DDE6; --line2:#AAB2C0; --line3:#E3E7EE;
  --bg:#FAF7EF; --panel:#FFFFFF; --soft:#EEF0F4; --head:#F7FAFD; --navy:#13294B; --rail:#F0F6FB; --rail-line:#DCE9F3; --dead:#F4F5F7;
  --accent:#4B9CD3; --accent-ink:#1F6FA8; --accent-fill:#2675B0; --today:#FFFBE6; --danger:#B91C1C;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}
button{font:inherit}
h1{font-size:22px;margin:0 0 8px}
h2{font-size:16px;margin:0}
.muted{color:var(--ink2)}
.small{font-size:12px}
.error{color:var(--danger);font-weight:600;margin:10px 0 0}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(20,24,40,.06)}
label{display:block;font-weight:600;font-size:13px;margin:12px 0 0}
label.row{display:flex;align-items:center;gap:8px;font-weight:500}
input[type=text],input[type=email],input[type=date],input[type=time],input[type=number],select,textarea{
  display:block;width:100%;margin-top:4px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
textarea{height:auto;padding:8px 10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button.primary,.btn.primary{background:var(--accent-fill);color:#fff;border:1px solid var(--accent)}
.card button.primary{width:100%;height:44px;border-radius:8px;margin-top:16px;font-weight:600;cursor:pointer}
button.link{background:none;border:0;color:var(--accent-ink);cursor:pointer;padding:8px 0;margin-top:6px;font-weight:600}
button.danger{background:#fff;border:1px solid var(--danger);color:var(--danger)}

/* ---------- shell: rail + main (mockup v5) ---------- */
.shell{display:flex;height:100vh;overflow:hidden}
.rail{width:232px;min-width:232px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh}
.logo{display:flex;align-items:center;gap:10px;padding:16px 16px 10px}
.logo-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#7DBCE6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:0 3px 8px rgba(75,156,211,.28);flex:none}
.logo-name{font-weight:700;font-size:14px;letter-spacing:-.2px}
.logo-name span:first-child{color:var(--accent-ink)}
.logo-sub{font-size:10px;color:#5F6673;margin-top:1px}
.env{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B45309;background:#FEF3C7;padding:1px 5px;border-radius:4px;margin-left:4px;vertical-align:middle}
.acct{margin:0 14px 8px;height:34px;font-size:12.5px;width:calc(100% - 28px)}
.new-event{margin:0 14px 12px;background:var(--accent-fill);color:#fff;border:0;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 3px 10px rgba(75,156,211,.3)}
.new-event:hover{background:#3D8AC0}
.rail-scroll{flex:1;overflow-y:auto;padding-bottom:8px}
.rail-section{padding:2px 8px}
.rail-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5F6673;padding:10px 10px 5px}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--ink2);cursor:pointer;font-weight:500;font-size:13px}
.nav-item:hover{background:#F1F3F7;color:var(--ink)}
.nav-item.active{background:#E8F3FA;color:var(--accent-ink);font-weight:600}
.badge{margin-left:auto;font-size:10px;font-weight:700;border-radius:999px;padding:1px 6px;background:#EEF0F4;color:var(--ink2)}
.member{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;cursor:pointer}
.member:hover{background:#F1F3F7}
.member.off{opacity:.4}
.avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:700;flex:none}
.member-name{font-weight:500;color:var(--ink);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-chip{margin-left:auto;font-size:9px;font-weight:700;color:var(--accent-ink);background:#E8F3FA;border-radius:5px;padding:2px 5px;flex:none}
.cal-row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;cursor:pointer;color:var(--ink2);font-size:12.5px}
.cal-row:hover{background:#F1F3F7}
.checkbox{width:13px;height:13px;border-radius:4px;flex:none;border:1.5px solid #CBD2DE;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800;line-height:1}
.rail-footer{border-top:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:9px}
.profile-photo{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#A78BFA);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 0 0 2px #E8F3FA;flex:none}
.me-name{font-weight:600;font-size:12.5px}
.me-role{font-size:10.5px;color:#5F6673}
.rail-footer .link{margin-left:auto;padding:0;font-size:11px}

.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;gap:12px}
.year-nav{display:flex;align-items:center;gap:5px}
.ib{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;font-size:16px}
.ib:hover{background:#F1F3F7}
.view-title{font-size:17px;font-weight:700;padding:0 6px;white-space:nowrap}
.btn{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:600;font-size:12.5px;color:var(--ink2);cursor:pointer}
.btn:hover{background:#F1F3F7}
.seg{display:flex;background:#EEF0F4;border-radius:9px;padding:3px;margin-left:4px}
.seg button{border:0;background:transparent;padding:5px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,24,40,.12)}
.search{margin-left:auto;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;width:190px;background:var(--bg);color:var(--ink);height:30px}
.search:focus{outline:2px solid #B9D9EE;background:#fff}
.avatar-stack{display:flex}
.avatar-stack .avatar{width:26px;height:26px;border:2px solid #fff;margin-left:-8px}
.avatar-stack .avatar:first-child{margin-left:0}
.subbar{display:flex;align-items:center;padding:10px 18px 0;gap:12px}
.subbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.seg.small button{padding:3px 10px;font-size:11.5px}
.hint-text{font-size:12px;color:#5F6673}
.legend{display:flex;gap:12px;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2);font-weight:500;background:none;border:0;padding:0;cursor:pointer}
.lg.off{opacity:.4}
.dot{width:8px;height:8px;border-radius:3px;flex:none}
.canvas{flex:1;overflow:auto;padding:0 18px 20px}
.canvas>*{margin-top:10px}
.menu-btn{display:none}
.scrim{display:none}

/* ---------- year planner ---------- */
.planner-wrap{min-width:1614px}
.planner{display:grid;grid-template-columns:26px repeat(12,minmax(132px,1fr));background:#fff}
.planner-head{position:sticky;top:0;z-index:8;border:1.5px solid var(--line2);border-bottom:0;border-radius:6px 6px 0 0}
.planner-body{border:1.5px solid var(--line2);border-top:0;border-radius:0 0 6px 6px}
.mh{background:var(--head);border-bottom:1.5px solid var(--line2);border-left:1px solid var(--line2);padding:6px 4px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.mh:hover{background:#E3E7EE;color:var(--accent-ink)}
.mh.corner{border-left:0;cursor:default;position:sticky;left:0;z-index:9;background:var(--head)}
.mh.corner.right{left:auto;right:0}
.num-col{position:sticky;z-index:7;background:var(--head);display:flex;flex-direction:column}
.num-col.left{left:0;border-right:1px solid var(--line2)}
.num-col.right{right:0;border-left:1px solid var(--line2)}
.num{height:32px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line)}
.num.band{background:#FFF7C2}
.col{display:flex;flex-direction:column}
.mcol{border-left:1px solid var(--line2)}
.cell{height:32px;position:relative;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 3px 0 0;cursor:pointer;background:#fff;gap:0;overflow:hidden}
.cell:hover{background:#F0F7FC !important;box-shadow:inset 0 0 0 1px #B9D9EE}
.cell.wk{background:#E9EBEF}
.cell.dead{background:#F1F2F5;cursor:default}
.dead-block{background:#fff;background-image:repeating-linear-gradient(135deg,#D8DDE6 0 1px,transparent 1px 8px);cursor:default;flex:none}
.cell.band{background:#FFF7C2}
.cell.wk.band{background:#F4EBB4}
.cell.today{box-shadow:inset 0 0 0 2px var(--accent);background:#FFFBDF}
@keyframes today-flash{0%,100%{box-shadow:inset 0 0 0 2px var(--accent)}50%{box-shadow:inset 0 0 0 4px var(--accent),0 0 0 6px rgba(75,156,211,.35)}}
.cell.today.flash,.mg-cell.today.flash{animation:today-flash .8s ease-in-out 2;position:relative;z-index:3}
.tg-col.today-col.flash{animation:today-flash .8s ease-in-out 2}
.dn{font-size:8.5px;font-weight:700;color:#5F6673;width:17px;height:100%;flex:none;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line)}
.dw{font-size:8px;font-weight:600;color:#5F6673;width:15px;height:100%;flex:none;display:flex;align-items:center;justify-content:center;text-transform:uppercase;border-right:1px solid var(--line);margin-right:1px}
.cell.wk .dn,.cell.wk .dw{color:#5B6474}
.pill{flex:0 1 auto;max-width:100%;min-width:0;font-size:9.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15px;border-left:3px solid #64748B;border-radius:3px;padding:0 4px;align-self:flex-end;margin-bottom:0}
.cont{width:9px;flex:none}
.pills{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:2px 0 3px 1px}
.pills .pill{align-self:flex-start;max-width:calc(100% - 6px)}
.pills .pill.stacked{line-height:12px;font-size:9px}
.pills .pill.stacked:nth-child(2){max-width:calc(100% - 16px)}
.cell .more{position:absolute;right:3px;top:2px;margin:0}
.mcol{position:relative}
.span-line{position:absolute;width:2px;z-index:1;pointer-events:none}

.more{flex:none;font-size:8px;font-weight:700;color:#5F6673;background:rgba(20,24,40,.07);border-radius:6px;padding:0 4px;margin-left:2px}

/* ---------- month ---------- */
.month-grid{border:1.5px solid var(--line2);border-radius:6px;background:#fff;min-width:900px}
.mg-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--head);border-bottom:1.5px solid var(--line2);position:sticky;top:0;z-index:5}
.mg-dow{border-left:1px solid var(--line);padding:6px;text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.mg-dow:first-child{border-left:0}
.mg-week{display:grid;grid-template-columns:repeat(7,1fr);position:relative;border-top:1px solid var(--line)}
.mg-week:first-of-type{border-top:0}
.mg-cell{min-height:104px;border-left:1px solid var(--line);padding:4px 5px;cursor:pointer;background:#fff;min-width:0}
.mg-cell:first-child{border-left:0}
.mg-cell:hover{background:#F0F7FC;box-shadow:inset 0 0 0 1px #B9D9EE}
.mg-cell.wk{background:#E9EBEF}
.mg-cell.other{background:#F1F2F5}
.mg-cell.other .mg-num{color:#5F6673}
.mg-num{font-size:11.5px;font-weight:700;margin-bottom:2px;display:inline-block;line-height:16px}
.mg-cell.today{box-shadow:inset 0 0 0 2px var(--accent);background:#FFFBEF}
.mg-cell.today .mg-num{background:var(--accent-fill);color:#fff;border-radius:6px;padding:0 6px}
.mg-spacer{width:100%}
.mg-span{position:absolute;height:17px;line-height:17px;font-size:10px;font-weight:600;color:var(--ink);padding:0 6px;border-left:3px solid #64748B;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:2;box-sizing:border-box}
.mg-span:not(.starts){border-left-width:0;border-radius:0 3px 3px 0;margin-left:-4px;padding-left:10px}
.mg-span:not(.ends){border-radius:3px 0 0 3px;margin-right:-4px}
.mg-span:hover{box-shadow:0 2px 8px rgba(20,24,40,.18)}
.chip{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:17px;border-radius:3px;padding:0 4px;margin-bottom:2px}
.chip .t{color:#5F6673;font-weight:600;font-size:9px}
.chip.pillc{font-weight:600;border-left:3px solid #64748B}
.chip-dot{width:5px;height:5px;border-radius:2px;flex:none}
.mg-more{font-size:9.5px;font-weight:700;color:var(--accent-ink);padding-left:4px}

/* ---------- week / day time grid ---------- */
.tg-wrap{border:1.5px solid var(--line2);border-radius:6px;background:#fff;min-width:900px}
.tg-sticky{position:sticky;top:0;z-index:5;background:#fff}
.tg-head{display:grid;background:var(--head);border-bottom:1.5px solid var(--line2)}
.tg-head .hcell{padding:7px 6px;text-align:center;border-left:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.tg-head .hcell b{display:block;font-size:15px;color:var(--ink);letter-spacing:0}
.tg-head .hcell.today-h b{background:var(--accent-fill);color:#fff;border-radius:8px;width:26px;margin:2px auto 0}
.tg-allday{display:grid;border-bottom:1px solid var(--line2);background:#FAFBFC}
.tg-allday .adcell{border-left:1px solid var(--line);padding:3px 4px;min-height:24px;min-width:0}
.tg-allday .adlabel{font-size:9px;font-weight:700;color:#5F6673;text-transform:uppercase;display:flex;align-items:center;justify-content:center;height:100%}
.adpill{display:block;font-size:9.5px;font-weight:600;border-left:3px solid #64748B;border-radius:2px;padding:1px 5px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background:#fff}
.tg-body{display:grid;position:relative}
.gutter{position:relative}
.g-hour{position:absolute;right:6px;font-size:10px;font-weight:700;color:#5F6673;transform:translateY(-50%)}
.g-q{position:absolute;right:6px;font-size:8px;font-weight:600;color:#6B7280;transform:translateY(-50%)}
.tg-col{position:relative;border-left:1px solid var(--line)}
.tg-col.wk{background:#E9EBEF}
.tg-col.today-col{background:#FFFDF2}
.hline{position:absolute;left:0;right:0;height:1px;background:var(--line);pointer-events:none}
.hline.half{background:#EBEEF3}
.hline.quarter{background:#F3F5F8}
.slot{position:absolute;left:0;right:0;cursor:pointer;z-index:1}
.slot:hover{background:rgba(75,156,211,.08);box-shadow:inset 0 0 0 1px rgba(75,156,211,.35)}
.slot:hover::after{content:attr(data-t) ", click to add";position:absolute;left:6px;top:1px;font-size:9px;font-weight:700;color:var(--accent-ink)}
body.no-add .slot{cursor:default}body.no-add .slot:hover{background:none;box-shadow:none}body.no-add .slot:hover::after{content:none}
.evblock{position:absolute;padding:var(--padt,2px) 0 0;font-size:10.5px;font-weight:600;z-index:2;cursor:pointer;background:transparent;border:0}
.evblock .evlabel{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--t);border-left:3px solid var(--c);border-radius:0 4px 0 0;padding:1px 7px 1px 6px;line-height:15px;color:var(--ink);vertical-align:top;box-sizing:border-box}
/* the length line hangs from the bottom of the pill at its right end (placeEventLines sets left and top) (LQ 12 Oct 2026) */
.evblock .evline{position:absolute;top:calc(17px + var(--padt,2px));bottom:0;width:3px;background:var(--c)}
.evblock .evlabel{padding-right:22px;position:relative}
.tick{position:absolute;top:2px;right:4px;z-index:3;width:13px;height:13px;border:1.5px solid var(--ink2);border-radius:3px;background:#fff;font-size:9px;line-height:10px;padding:0;cursor:pointer;color:#fff}
.tick.on{background:#16A34A;border-color:#16A34A}
/* done: clearly lighter (LQ 5 Oct 2026); the green check stays full strength */
.evblock.done .evlabel{text-decoration:line-through;background:color-mix(in srgb,var(--t) 35%,#fff);color:#5F6673;box-shadow:inset 0 0 0 1px rgba(20,24,40,.06)}
.evblock.done .evline{opacity:.25}
.evblock:hover .evlabel{box-shadow:0 2px 8px rgba(20,24,40,.18)}
.now-line{position:absolute;left:0;right:0;height:2px;background:#EF4444;z-index:4;pointer-events:none}
.now-line::before{content:"";position:absolute;left:-1px;top:-3px;width:8px;height:8px;border-radius:50%;background:#EF4444}

/* ---------- popover ---------- */
.popover{position:fixed;z-index:50;width:268px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(20,24,40,.18);padding:12px 14px}
.pop-date{font-size:13px;font-weight:700;margin-bottom:2px}
.pop-sub{font-size:10.5px;color:#5F6673;margin-bottom:9px}
.pop-evt{display:flex;align-items:center;gap:8px;padding:6px 4px;margin:0 -4px;border-top:1px solid #F0F2F6;cursor:pointer;border-radius:6px}
.pop-evt:hover{background:#F0F7FC}
.pop-main{flex:1;min-width:0}
.pop-act{flex:none;font-size:10.5px;font-weight:700;color:var(--accent-ink);background:#E8F3FA;border-radius:5px;padding:2px 7px}
.pop-bar{width:3px;height:26px;border-radius:2px;flex:none;margin-top:1px}
.pop-name{font-size:12px;font-weight:600;color:var(--ink)}
.pop-meta{font-size:10.5px;color:#5F6673}
.pop-open{display:block;text-align:center;margin-top:9px;background:#E8F3FA;color:var(--accent-ink);font-size:11.5px;font-weight:700;border-radius:8px;padding:7px;cursor:pointer;border:0;width:100%}
.pop-add{display:block;text-align:center;margin-top:6px;background:#fff;color:var(--accent-ink);font-size:11.5px;font-weight:700;border-radius:8px;padding:7px;cursor:pointer;border:1px dashed var(--line2);width:100%}

@media (max-width:900px){
  .menu-btn{display:flex}
  .rail{position:fixed;left:0;top:0;bottom:0;z-index:120;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 40px rgba(20,24,40,.25)}
  .shell.nav-open .rail{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(20,24,40,.4);z-index:110;opacity:0;pointer-events:none;transition:opacity .22s}
  .shell.nav-open .scrim{opacity:1;pointer-events:auto}
  .topbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .search,.avatar-stack,.legend{display:none}
  .seg{margin-left:auto}
  .canvas{padding:8px 8px 16px}
  .month-grid,.tg-wrap{min-width:640px}
  .mg-cell{min-height:84px}
}

.panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,100vw);background:#fff;border-left:1px solid var(--line);box-shadow:-4px 0 16px rgba(20,24,40,.08);z-index:10;display:flex;flex-direction:column}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-body{padding:16px;overflow:auto}
.ev{display:flex;gap:10px;padding:10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;cursor:pointer}
.ev:hover{background:#F3F8FC}
.ev .bar{width:4px;border-radius:2px;flex:none}
.ev .t{font-weight:600}
.ev .s{color:var(--ink2);font-size:12px}
.actions{display:flex;gap:8px;margin-top:16px}
.actions button{height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600}
.add-here{width:100%;height:40px;border:1px dashed var(--line2);border-radius:8px;background:#fff;cursor:pointer;font-weight:600;color:var(--accent-ink);margin-top:6px}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:20;margin:0;font-weight:600}
@media (max-width:640px){.top{gap:8px}.me{display:none}}
.actions button.primary{background:var(--accent-fill);color:#fff;border-color:var(--accent)}
.actions button.danger{border-color:var(--danger);color:var(--danger)}

.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.sw.on{box-shadow:0 0 0 2px var(--accent)}
.sw.auto{background:#fff;color:var(--ink2);font-size:9px;font-weight:700;width:auto;padding:0 8px;border-radius:999px}

/* ---------- settings ---------- */
.main.on-profile .topbar .year-nav,.main.on-profile .topbar [data-today],.main.on-profile .topbar [data-views],.main.on-profile .topbar .search,.main.on-profile .topbar .avatar-stack,.main.on-profile .subbar{display:none}
.main.on-profile .topbar{min-height:51px}
.main.on-settings .topbar .year-nav,.main.on-settings .topbar [data-today],.main.on-settings .topbar [data-views],.main.on-settings .topbar .search,.main.on-settings .topbar .avatar-stack,.main.on-settings .subbar{display:none}
.main.on-settings .topbar{min-height:51px}
.settings{max-width:1120px}
.settings h1{font-size:18px;margin:4px 0 2px}
.settings .sub{color:#5F6673;font-size:12px;margin-bottom:16px}
.settings .card{max-width:none;margin-bottom:14px;padding:16px 18px}
.settings h2{font-size:14px;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.settings h2 .badge{margin-left:0}
.settings .two{max-width:720px}
.settings .actions{margin-top:12px}
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:10px}
.pal{border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;background:#fff}
.pal:hover{background:#F3F8FC}
.pal.on{border-color:var(--accent);box-shadow:0 0 0 2px #E8F3FA}
.pal b{display:block;font-size:12px;margin-bottom:6px}
.pal .dots{display:flex;gap:4px;flex-wrap:wrap}.pal .dots i{width:14px;height:14px;border-radius:50%;display:block}
.s-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #F0F2F6;margin-top:12px;flex-wrap:wrap}
.s-transfer{display:flex;gap:8px;align-items:center}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:4px 0 8px}
.plan{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fff;display:flex;flex-direction:column}
.plan.on{border-color:var(--accent);box-shadow:0 0 0 2px #E8F3FA}.plan.far>b,.plan.far .price,.plan.far ul{opacity:.55}.plan .plan-why{font-size:12px;line-height:1.4;color:var(--ink2);margin:0 0 10px}
.plan b{display:block;font-size:13px}.plan .price{font-size:18px;font-weight:700;margin:4px 0}.plan .price small{font-size:11px;font-weight:500;color:var(--muted)}
.plan ul{margin:6px 0 10px;padding-left:20px;color:var(--muted);font-size:12px;flex:1}.plan .tag{font-size:10px;font-weight:700;background:#E8F3FA;color:#1F6FA8;border-radius:999px;padding:2px 7px;margin-left:4px}
.plan .btn{height:28px;line-height:26px;font-size:12px;padding:0 10px;width:auto;margin:0}.plan .btn[disabled]{opacity:.5;cursor:default}.plan .btn.why{color:var(--muted);border-style:dashed}
.plan select{height:28px;font-size:12px;margin:0 0 6px;width:100%}
.owners{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.owner-row{display:flex;align-items:center;gap:8px;font-size:13px}.owner-row .avatar{width:22px;height:22px;font-size:10px}
.owner-row .linkbtn{background:none;border:0;color:var(--danger);font-size:12px;cursor:pointer;padding:0 4px;width:auto;margin:0}
.s-transfer select{margin:0;height:34px;width:auto;min-width:160px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.settings .actions button{width:auto;margin-top:0}

/* ---------- clients ---------- */
.main.on-clients .topbar .year-nav,.main.on-clients .topbar [data-today],.main.on-clients .topbar [data-views],.main.on-clients .topbar .search,.main.on-clients .topbar .avatar-stack,.main.on-clients .subbar{display:none}
.main.on-clients .canvas{padding:0;display:flex}
.main.on-clients .canvas>*{margin-top:0}
.clients{display:flex;flex:1;min-height:0;width:100%}
.c-list{width:320px;min-width:280px;border-right:1px solid var(--line);padding:16px;background:#FCFBF8;display:flex;flex-direction:column;overflow:auto}
.c-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c-hdr h1{font-size:18px;margin:0}
.c-tabs{margin:12px 0}.c-tabs button{flex:1}
.c-search{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;background:#fff;margin-bottom:10px}
.c-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line3);border-radius:9px;background:#fff;margin-bottom:6px;cursor:pointer}
.c-row:hover{background:#F3F8FC}
.c-row.on{border-color:var(--accent);box-shadow:0 0 0 2px #E8F3FA}
.c-row .dot{width:10px;height:10px;border-radius:3px;flex:none}
.c-row b{display:block;font-size:12.5px}.c-row small{color:#5F6673;font-size:11px}
.c-row .r{margin-left:auto;font-size:11px;color:var(--ink2);text-align:right;white-space:nowrap}
.c-detail{flex:1;padding:18px 22px;overflow:auto;min-width:0}
.c-empty{margin-top:40px;text-align:center}
.c-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c-head h2{font-size:18px;margin:0}.c-head .meta{color:var(--ink2);font-size:12px;margin-top:2px}.c-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.c-kv{display:flex;justify-content:space-between;align-items:center;gap:12px}
.c-kv b{font-size:13px}.c-kv .muted{font-size:12px}
.switch{width:38px;height:22px;border-radius:999px;background:#CBD2DE;position:relative;cursor:pointer;flex:none;border:0}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--accent)}.switch.on::after{left:18px}
.switch[disabled]{opacity:.4;cursor:default}
.c-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.c-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;margin-bottom:12px}
.c-card h3{font-size:13px;margin:0 0 8px;display:flex;justify-content:space-between}.c-card h3 span{color:#5F6673;font-weight:600;font-size:11px}
.c-p{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F0F2F6;font-size:12px}
.c-p:first-of-type{border-top:0}
.c-p .av{width:22px;height:22px;border-radius:50%;background:#E8F3FA;color:var(--accent-ink);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.c-p small{color:#5F6673;display:block}
.c-p .main-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.c-p .x{margin-left:auto;background:none;border:0;color:#5F6673;font-size:11px;cursor:pointer;font-weight:600}
.c-p .x:hover{color:var(--danger)}
.c-card h3 .c-tip{margin:0 auto 0 6px;width:15px;height:15px;border-radius:50%;background:#EEF1F5;color:#5F6673;font:700 10px/15px Georgia,serif;font-style:italic;text-align:center;cursor:help;flex:none}
.c-assign{display:flex;align-items:center;gap:6px;margin-top:8px}.c-assign select{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 6px;border:1px solid var(--line,#E2E6EC);border-radius:8px;background:#fff}
.c-yours{max-width:520px}
.btn.sm{height:28px;font-size:11.5px;padding:0 10px;margin-top:8px}
.btn.primary{background:var(--accent-fill);color:#fff;border-color:var(--accent)}
@media (max-width:900px){.clients{flex-direction:column}.c-list{width:100%;border-right:0;border-bottom:1px solid var(--line)}}
/* the pinned column sits flush with the scroll edge; the grid keeps its gutter as margin instead of padding */
.canvas{padding-left:0;padding-right:0}
.canvas>*{margin-left:18px;margin-right:18px}
.main.on-clients .canvas>*{margin-left:0;margin-right:0}


/* ---------- recurrence ---------- */
.recur{border:1px solid var(--line);border-radius:10px;padding:4px 12px 10px;margin-top:8px;background:#FCFBF8}
.row-in{display:flex;align-items:center;gap:8px;margin-top:4px}.row-in input{width:70px;margin:0}.row-in span{font-weight:500;color:var(--ink2)}
.days{display:flex;gap:4px;margin-top:6px}
.days button{width:30px;height:30px;border-radius:6px;border:0;background:#CBD2DE;color:#fff;font-weight:700;cursor:pointer;font-size:12px}
.days button.on{background:#16A34A}
/* both arrows sit together, left of the title, so they never move with the title's length */
.year-nav [data-prev]{order:1}.year-nav [data-next]{order:2}.year-nav .view-title{order:3;min-width:220px}

/* ---------- forms as a centered card ---------- */
.panel-scrim{position:fixed;inset:0;background:rgba(20,24,40,.35);z-index:9}
.panel.modal{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(620px,94vw);height:auto;max-height:92vh;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(20,24,40,.25)}
.panel.modal .panel-body{padding:16px 22px 22px}
.panel.modal .event-form .two{grid-template-columns:1fr 1fr}
@media (max-width:640px){.panel.modal{width:100vw;height:100vh;max-height:100vh;border-radius:0}}
.panel.modal{display:flex;flex-direction:column}
.panel.modal .panel-body{flex:1;min-height:0;overflow:auto}

/* ---------- time picker ---------- */
.timelist{position:fixed;z-index:60;width:150px;max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(20,24,40,.18);padding:4px}
.timelist div{padding:7px 12px;border-radius:6px;font-size:13px;cursor:pointer}
.timelist div:hover{background:#F0F7FC}
.timelist div.on{background:var(--accent-fill);color:#fff;font-weight:600}

/* ---------- categories ---------- */
.cat-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px;max-width:520px}
.cat-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #F0F2F6;cursor:pointer;font-size:13px}
.cat-row:first-child{border-top:0}.cat-row:hover{background:#F3F8FC}
.cat-row .tag{width:14px;height:14px;border-radius:3px 7px 7px 3px;flex:none}
.cat-row .n{flex:1}.cat-row small{color:#5F6673}
.cat-add{margin-top:8px}

/* ---------- dashboard ---------- */
.main.on-dashboard .topbar .year-nav,.main.on-dashboard .topbar [data-today],.main.on-dashboard .topbar [data-views],.main.on-dashboard .topbar .search,.main.on-dashboard .topbar .avatar-stack,.main.on-dashboard .subbar{display:none}
.dash{max-width:1100px}
.main.on-review .topbar .year-nav,.main.on-review .topbar [data-today],.main.on-review .topbar [data-views],.main.on-review .topbar .search,.main.on-review .topbar .avatar-stack,.main.on-review .subbar{display:none}
.main.on-review .topbar{min-height:51px}
.dash h1{font-size:18px;margin:4px 0 2px}
.dash .sub{color:#5F6673;font-size:12px;margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tile .k{font-size:11px;color:var(--ink2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tile .v{font-size:26px;font-weight:700;margin:4px 0 2px;line-height:1.1}.tile .v small{font-size:12px;color:#5F6673;font-weight:600}
.tile .m{font-size:11px;color:#5F6673}.tile .v.bad{color:var(--danger)}
.pbar{height:8px;background:#EEF0F4;border-radius:4px;overflow:hidden;margin:6px 0}.pbar i{display:block;height:100%;background:#16A34A}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.dcard h3{font-size:13px;margin:0 0 10px;display:flex;justify-content:space-between;gap:8px}.dcard h3 span{color:#5F6673;font-weight:600;font-size:11px;text-align:right}
.dcard h3.later{margin-top:14px}
.drow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F0F2F6;font-size:12px}
.drow:first-of-type{border-top:0}.drow b{font-weight:600}.drow small{color:#5F6673;display:block}.drow .r{color:var(--ink2);white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:6px}
.bars i{flex:1;background:#B9D9EE;border-radius:3px 3px 0 0;display:block;min-height:2px}.bars i.hi{background:var(--accent)}
.bars-l{display:flex;gap:4px;font-size:9px;color:#5F6673;margin-top:4px}.bars-l span{flex:1;text-align:center}
.pp{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.pp .av{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700;flex:none}
.pp .nm{width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp .pb{flex:1;height:6px;background:#EEF0F4;border-radius:3px;overflow:hidden}.pp .pb b{display:block;height:100%;background:var(--accent)}
.pp small{width:80px;text-align:right;color:var(--ink2)}
.todo{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F0F2F6;font-size:12px}.todo:first-of-type{border-top:0}
.todo .cb{width:14px;height:14px;border:1.5px solid var(--ink2);border-radius:3px;background:#fff;cursor:pointer;flex:none;padding:0}
.todo .t{flex:1;cursor:pointer}.todo small{color:var(--danger);font-weight:600;white-space:nowrap}
.cat-bar{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.cat-bar .tag{width:12px;height:12px;border-radius:3px 6px 6px 3px;flex:none}
.cat-bar .nm{width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-bar .pb{flex:1;height:6px;background:#EEF0F4;border-radius:3px;overflow:hidden}.cat-bar .pb b{display:block;height:100%}
.cat-bar small{width:110px;text-align:right;color:var(--ink2)}
/* phones: the browser's own toolbars overlap 100vh; dvh follows them */
@supports (height: 100dvh){.shell,.rail,.main,.panel.modal{height:100dvh}.panel.modal{height:auto;max-height:92dvh}}
.canvas{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@media (max-width:640px){.panel.modal{height:100dvh;max-height:100dvh}}

.ctable{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.ctable th{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#5F6673;padding:4px 6px;font-weight:700}
.ctable th:first-child{text-align:left}
.ctable td{padding:6px;border-top:1px solid #F0F2F6;text-align:right;white-space:nowrap}
.ctable td:first-child{text-align:left;white-space:normal}
.ctable td small{color:#5F6673}.ctable td.zero{color:#6B7280}.ctable td.zero b{color:#6B7280;font-weight:500}
.ctable .tag{display:inline-block;width:11px;height:11px;border-radius:3px 6px 6px 3px;margin-right:6px;vertical-align:-1px}

.popover.sheet{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:70dvh;overflow:auto}
/* no band above the pinned headers: spacing lives in the subbar, not inside the scroll area */
.canvas>*{margin-top:0}
.subbar{padding-bottom:10px}
.planner-head,.mg-head,.tg-sticky{background:var(--head)}
.planner-head{box-shadow:0 -1px 0 var(--bg)}
@media (max-width:900px){.canvas{padding-top:0}.subbar{padding-bottom:8px}}
.s-row{align-items:flex-start}
.s-row>div:first-child{flex:1 1 260px;min-width:0}
.s-transfer{flex-wrap:wrap}.s-transfer .btn{white-space:nowrap}
.s-transfer select{min-width:200px;max-width:100%}
.btn{white-space:nowrap}

.me-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px;margin:-4px;border-radius:8px;cursor:pointer;text-align:left;flex:1;min-width:0;width:auto}
.me-btn:hover{background:#F3F8FC}
.acct-list{display:flex;flex-direction:column;gap:6px}
.acct-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.acct-row.on{border-color:var(--accent);background:#F5FAFD}.acct-row .n{flex:1;min-width:0}.acct-row .n small{display:block;color:var(--muted)}
/* billing line and total on Your Accounts (mac_174) */
.acct-bill{display:block;font-size:12.5px;font-weight:600;margin-top:2px}.acct-bill.ok{color:#2E7D4F}.acct-bill.tr{color:#9A6400}.acct-bill.bad{color:#C0392B}.acct-bill.fr{color:#2F6FA5}.acct-bill.gy{color:#7A879C;font-weight:500}
.acct-total{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:700}.acct-total small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.acct-row .btn{height:28px;line-height:26px;font-size:12px;padding:0 10px;width:auto;margin:0}

/* ---------- brand: soft Carolina rail, navy ink (LQ, 4 Oct 2026) ---------- */
.rail{background:var(--rail);border-right:1px solid var(--rail-line)}
.logo-name{color:var(--navy)}.logo-mark{background:var(--navy);color:#fff}.logo-sub{color:#5B7290}
.rail-label{color:var(--navy);font-size:12.5px;font-weight:800;letter-spacing:.06em;padding:14px 10px 6px;margin:0 10px 6px;padding-left:0;padding-right:0;border-bottom:1.5px solid #C9DCEB}
.nav-item{color:var(--navy)}.nav-item:hover{background:rgba(75,156,211,.14)}
.nav-item.active{background:var(--navy);color:#fff;font-weight:600}
.badge{background:#DCE9F3;color:var(--navy)}.nav-item.active .badge{background:rgba(255,255,255,.2);color:#fff}
.member-name,.cal-row{color:var(--navy)}.cal-row:hover,.member:hover{background:rgba(75,156,211,.14)}
.rail select{background:#fff;color:var(--navy);border-color:#B9D6EA}
.new-event{background:var(--navy);border-color:var(--navy);color:#fff}
.rail-footer{border-top:1px solid var(--rail-line)}.me-name{color:var(--navy)}.me-role{color:#5B7290}.rail-footer .link{color:#2F6FA3}
.me-btn:hover{background:rgba(75,156,211,.14)}
.admin-chip{background:var(--navy);color:#fff}
h1,h2,.dtile .big,.dcard h3,.topbar [data-title]{color:var(--navy)}
button.primary,.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.seg button.on{color:var(--navy)}

/* ---------- hover card on events ---------- */
.hovercard{position:fixed;z-index:400;width:260px;max-width:calc(100vw - 16px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(19,41,75,.18);padding:10px 12px;font-size:12.5px;color:var(--ink);pointer-events:none}
.hc-title{font-weight:700;font-size:13.5px;border-left:3px solid #64748B;padding-left:8px;margin-bottom:4px;color:var(--navy)}
.hc-done{font-size:10px;font-weight:700;color:#15803D;background:#DCFCE7;border-radius:999px;padding:1px 6px;margin-left:4px;vertical-align:middle}
.hc-when{color:var(--ink2);margin-bottom:6px}
.hc-row{display:flex;align-items:center;gap:6px;color:var(--ink);margin:2px 0}
.hc-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.hc-notes{margin-top:6px;color:var(--ink2);white-space:pre-wrap}
.hc-hint{margin-top:8px;font-size:11px;color:#8A96AA}
@media (hover:none){.hovercard{display:none}}
.gear{background:none;border:0;padding:6px;border-radius:8px;cursor:pointer;color:#5B7290;display:flex;align-items:center;width:auto;margin:0}
.gear:hover,.gear.active{background:rgba(75,156,211,.14);color:var(--navy)}

/* ---------- progress band (Dashboard option A) ---------- */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.prog .wide{grid-column:1 / -1}
.pr{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.pr .av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;flex:none}
.pr .n{width:84px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pr .pb{flex:1;height:7px;background:#EEF0F4;border-radius:4px;overflow:hidden;min-width:40px}.pr .pb b{display:block;height:100%;background:var(--accent)}
.pr .pct{width:40px;text-align:right;font-weight:700}.pr small{width:120px;color:var(--ink2);text-align:right;font-size:11px}
.pr.house{border-top:1px solid #F0F2F6;margin-top:4px}.pr.house .pb b{background:var(--navy)}
.flame{color:#B45309;font-weight:700}
.goal{padding:7px 0;border-top:1px solid #F0F2F6;font-size:12px}.goal:first-of-type{border-top:0}
.goal .t{display:flex;justify-content:space-between;align-items:center;gap:8px}.goal .t b{display:flex;align-items:center;gap:6px}.goal .t i{width:9px;height:9px;border-radius:50%;display:inline-block}
.goal .gb{height:6px;background:#EEF0F4;border-radius:3px;overflow:hidden;margin-top:4px}.goal .gb b{display:block;height:100%;background:var(--accent)}.goal .gb b.met{background:#16A34A}
.goal small{color:var(--ink2)}.goal .set{background:none;border:0;color:var(--accent-ink);font-weight:600;cursor:pointer;padding:0;width:auto;margin:0;font-size:12px}
.goal input{width:64px;height:26px;margin:0;display:inline-block;padding:0 6px;font-size:12px}.goal .gf{display:inline-flex;gap:6px;align-items:center}.goal .gf .btn{height:26px;line-height:24px;padding:0 8px;font-size:11px;width:auto;margin:0}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.bp{border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}.bp.top{border-color:var(--accent);background:#F5FAFD}
.bp .av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px}
.bp .big{font-size:20px;font-weight:700;margin-top:2px}.bp small{color:var(--ink2);display:block;font-size:11px}
.bp .crown{font-size:9px;font-weight:700;color:#1F6FA8;letter-spacing:.06em;height:12px}
.chore{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid #F0F2F6;font-size:12px}.chore:first-of-type{border-top:0}
.chore .dots{letter-spacing:2px;white-space:nowrap}.chore .dots .y{color:#15803D}.chore .dots .n{color:#D8DDE6}.chore .dots .f{color:#EEF0F4}
.ms{display:flex;gap:10px;flex-wrap:wrap}.m{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;display:flex;gap:8px;align-items:center;background:#F7FAFD}
.m .ic{width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.checks{margin-top:8px;display:flex;flex-direction:column;gap:4px}.checks label.row{margin:0;font-size:13px;font-weight:500}.checks input{width:15px;height:15px;margin:0;accent-color:var(--accent)}

/* ---------- year in review poster ---------- */
.review{padding:18px 22px;max-width:1100px}.review h1{font-size:18px;margin:4px 0 2px}.review .sub{color:var(--ink2);font-size:12px;margin-bottom:12px}
.review .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.review .actions .btn{width:auto;margin:0}
.poster{background:var(--navy);color:#fff;border-radius:16px;padding:28px 32px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.poster .yr{font-size:64px;font-weight:800;letter-spacing:-2px;line-height:1}.poster .who{font-size:16px;color:#8CC7EE;font-weight:600;margin-top:2px}
.poster .lead{font-size:15px;margin:16px 0 18px;line-height:1.5;color:#DCEBF6}.poster .lead b{color:#fff}
.poster .big{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.poster .bn{background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px}.poster .bn .v{font-size:26px;font-weight:800}.poster .bn .k{font-size:11px;color:#B9D6EA;text-transform:uppercase;letter-spacing:.05em}
.poster .kk{font-size:11px;color:#B9D6EA;text-transform:uppercase;letter-spacing:.05em;margin-top:16px}.poster .kk:first-child{margin-top:0}
.poster .month{display:flex;gap:4px;align-items:flex-end;height:80px;margin-top:6px}.poster .month i{flex:1;background:#2F4F80;border-radius:3px 3px 0 0;display:block;min-height:2px}.poster .month i.hi{background:var(--accent)}
.poster .ml{display:flex;gap:4px;font-size:9px;color:#8DA3C4;margin-top:4px}.poster .ml span{flex:1;text-align:center}
.poster .cat{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}.poster .cat i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}.poster .cat .nm{width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster .cat .b{flex:1;height:7px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}.poster .cat .b b{display:block;height:100%}.poster .cat small{width:52px;text-align:right;color:#B9D6EA}
.poster .firsts{margin-top:14px;font-size:12px;line-height:1.7;color:#DCEBF6}.poster .firsts b{color:#fff}
@media (max-width:760px){.poster{grid-template-columns:1fr;padding:20px}.poster .yr{font-size:48px}}

/* ---------- My List (children; simple view) ---------- */
.ml{min-height:100dvh;max-width:560px;margin:0 auto;background:var(--bg);display:flex;flex-direction:column}
.ml-hdr{background:var(--accent-fill);color:#fff;padding:26px 22px 18px;border-radius:0 0 28px 28px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ml-hi{font-size:26px;font-weight:800;line-height:1.1}.ml-sub{opacity:.92;font-size:14px;margin-top:4px}
.ml-ring{width:64px;height:64px;border-radius:50%;background:conic-gradient(#fff 0 var(--p,0%),rgba(255,255,255,.3) var(--p,0%) 100%);display:flex;align-items:center;justify-content:center;flex:none}
.ml-ring b{width:50px;height:50px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.ml-days{display:flex;gap:6px;padding:14px 18px 4px}
.ml-d{flex:1;text-align:center;border-radius:12px;padding:8px 0;background:#fff;border:1px solid #DCE9F3;font-size:11px;color:var(--ink2);cursor:pointer}
.ml-d b{display:block;font-size:15px;color:var(--navy)}.ml-d.on{background:var(--navy);color:#fff;border-color:var(--navy)}.ml-d.on b{color:#fff}
.ml-d i{display:block;width:6px;height:6px;border-radius:50%;margin:4px auto 0;background:transparent}.ml-d i.g{background:#16A34A}.ml-d i.o{background:#F59E0B}.ml-d i.b{background:#CBD2DE}
.ml-sec{padding:14px 20px 0;font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--navy)}
.ml-items{flex:1;padding-bottom:8px}
.ml-it{margin:8px 20px 0;background:#fff;border:1px solid #DCE9F3;border-radius:14px;padding:12px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;cursor:pointer;user-select:none}
.ml-it .cb{width:30px;height:30px;border-radius:9px;border:2.5px solid var(--accent);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:.15s}
.ml-it.done{opacity:.6}.ml-it.done .cb{background:#16A34A;border-color:#16A34A}.ml-it.done .t{text-decoration:line-through}
.ml-it .em{font-size:22px;flex:none}.ml-it .t{flex:1;min-width:0}.ml-it small{display:block;font-size:12px;color:var(--ink2);font-weight:500;text-decoration:none}
.ml-it.ro{cursor:default}.ml-it.ro .cb{border-color:#CBD2DE}
.ml-empty{margin:28px 20px;text-align:center;color:var(--navy)}.ml-empty .big{font-size:56px}.ml-empty b{display:block;font-size:20px;margin-top:6px}.ml-empty small{color:var(--ink2)}
.ml-star{margin:14px 20px;background:#FFF7D6;border:1px solid #F6E3A1;border-radius:14px;padding:12px 14px;font-size:14px;display:flex;gap:10px;align-items:center}
.ml-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 18px;font-size:12px;color:var(--ink2)}.ml-foot .link{padding:0;margin:0;width:auto}
/* add a chore line on the Family board */
.chore-add{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid #F0F2F6}
.chore-add .r1{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}.chore-add .r2{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:end}
.chore-add .r2 input[type=text]{width:100%;min-width:84px}
.chore-add label{font-size:10px;font-weight:600;color:var(--ink2);margin:0 0 3px;display:block}
.chore-add input[type=text],.chore-add select{height:30px;margin:0;font-size:12px;padding:0 8px}
.dow{display:flex;gap:3px}.dow button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:10px;font-weight:700;color:var(--ink2);cursor:pointer;padding:0;margin:0}
.dow button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chore-add .btn{height:30px;line-height:28px;padding:0 10px;font-size:12px;width:auto;margin:0}
.chore .rm{background:none;border:0;color:var(--danger);font-size:11px;cursor:pointer;padding:0 0 0 8px;width:auto;margin:0}


/* ---------- full screen: only the calendar (LQ 4 Oct 2026) ---------- */
.shell.focus .rail,.shell.focus .topbar,.shell.focus .subbar{display:none !important}
.shell.focus .main{height:100dvh}
.shell.focus .canvas{padding:6px}
.focus-exit{position:fixed;right:12px;top:10px;z-index:150;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;opacity:.35;transition:opacity .15s;width:auto;margin:0}
.focus-exit:hover{opacity:1}
[data-focus]{font-size:15px}

/* ---------- act as (staging) ---------- */
.viewas{height:30px;margin:0;width:auto;font-size:12px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--navy)}
.acting-bar{position:fixed;left:0;right:0;top:0;z-index:300;background:#B45309;color:#fff;font-size:12.5px;font-weight:600;padding:6px 14px;display:flex;justify-content:center;align-items:center;gap:12px}
.acting-bar button{background:#fff;color:#B45309;border:0;border-radius:999px;padding:3px 10px;font-weight:700;font-size:12px;cursor:pointer;width:auto;margin:0}
body.acting .shell,body.acting .ml,body.acting .center{padding-top:32px}
body.acting .shell{height:100dvh;box-sizing:border-box}body.acting .rail,body.acting .main{height:calc(100dvh - 32px)}body.acting .ml{min-height:100dvh;box-sizing:border-box}
.ml-add{padding:4px 20px 0}
.ml-add-btn{width:100%;height:46px;border:2px dashed #B9D6EA;border-radius:14px;background:#fff;color:var(--accent-ink);font-weight:700;font-size:15px;cursor:pointer;margin:0}
.ml-add-form{background:#fff;border:1px solid #DCE9F3;border-radius:14px;padding:12px}
.ml-add-form input[type=text]{height:42px;font-size:16px;margin:0}
.ml-add-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:6px;margin-top:8px;align-items:center}
.ml-add-row select,.ml-add-row input[type=text]{height:38px;margin:0;font-size:14px}
.ml-add-row .btn{height:38px;line-height:36px;width:auto;margin:0;padding:0 12px}

/* chores chart (option A, LQ 4 Oct 2026) */
.main.on-chores .topbar .year-nav,.main.on-chores .topbar [data-today],.main.on-chores .topbar [data-views],.main.on-chores .topbar .search,.main.on-chores .topbar .avatar-stack,.main.on-chores .subbar{display:none}
.main.on-chores .canvas{padding:18px 22px;display:block}
.chores{max-width:980px}
.chores h2{font-size:20px;margin:0 0 2px;color:var(--navy)}
.ch-table{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:14px}
.ch-table th{font-size:11px;color:var(--ink2);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--head);vertical-align:bottom}
.ch-table th.c,.ch-table td.c{text-align:center;width:76px}
.ch-table th.c span{display:block;margin-top:3px;font-size:11px;color:var(--navy)}
.ch-table td{padding:9px 10px;border-bottom:1px solid #F0F2F6;vertical-align:middle;font-size:13px}
.ch-table tbody tr:last-child td{border-bottom:0}
.ch-table td.t .em{font-size:16px;margin-right:6px;vertical-align:-2px}
.ch-table td.t b{font-weight:600;color:var(--navy)}
.ch-table td.t small{display:block;color:var(--ink2);font-size:11px;margin-left:26px}
.ch-table td.w,.ch-table th.w{width:92px;color:var(--ink2);font-size:12px}
.ch-table td.x{text-align:right;white-space:nowrap;width:110px}
.ch-table td.x .lnk+.lnk{margin-left:12px}
.ch-table tfoot td{background:var(--head);border-top:1px solid var(--line);font-size:11px;color:var(--ink2);padding:8px 10px}
.ch-table tfoot td.c small{font-size:10.5px}
.ch-table .dots{letter-spacing:2px;white-space:nowrap;font-size:10px}.ch-table .dots .y{color:#15803D}.ch-table .dots .n{color:#F59E0B}.ch-table .dots .f{color:#D8DDE6}
.ch-table .av{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:700;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.cb{width:22px;height:22px;border-radius:6px;border:2px solid #C9D6E4;background:#fff;cursor:pointer;padding:0;margin:0;position:relative;vertical-align:middle}
.cb.on{background:var(--navy);border-color:var(--navy)}
.cb.on:after{content:"\2713";color:#fff;font-size:14px;line-height:1;position:absolute;left:4px;top:2px}
.cb:disabled{cursor:default;opacity:.85}
.lnk{background:none;border:0;color:var(--accent-ink);font-weight:600;font-size:12px;cursor:pointer;padding:0 0 0 10px;width:auto;margin:0}
.lnk.lnk-rm{color:var(--danger);border:0;background:none}
.ch-add{margin-top:12px;border:1px dashed #C9D6E4;border-radius:10px;padding:10px 12px;background:var(--head);display:grid;grid-template-columns:1.6fr .9fr auto auto auto;gap:10px;align-items:end}
.ch-add.inrow{margin:0;border-style:solid;background:#fff}
.ch-add label{font-size:10.5px;font-weight:600;color:var(--ink2);margin:0 0 3px;display:block}
.ch-add input[type=text]{height:32px;margin:0;font-size:13px;padding:0 10px;width:100%}
.ch-add .btn{height:32px;line-height:30px;padding:0 12px;font-size:12px;width:auto;margin:0}
.ch-add .dow button{width:26px;height:26px}
@media (max-width:720px){.ch-add{grid-template-columns:1fr 1fr}.ch-table td.t small{margin-left:0}.ch-table th.c,.ch-table td.c{width:52px}.ch-table td.x{width:auto}}

/* members (LQ 4 Oct 2026) */
.main.on-members .topbar .year-nav,.main.on-members .topbar [data-today],.main.on-members .topbar [data-views],.main.on-members .topbar .search,.main.on-members .topbar .avatar-stack,.main.on-members .subbar{display:none}
.main.on-members .canvas{padding:18px 22px;display:block}
.members{max-width:760px}
.members h2{font-size:20px;margin:0 0 2px;color:var(--navy)}
.m-cards{margin-top:14px}
.m-p{padding:9px 0;font-size:13px}
.m-p .av{width:28px;height:28px;font-size:11px}
.m-p .badge{margin-left:auto}
.m-p .badge+.x,.m-p .x+.x{margin-left:10px}
.m-p .badge.navy{background:var(--navy);color:#fff}
.m-p .badge.amber{background:#FDEFD3;color:#92400E}
.m-cards .btn.sm{margin-top:8px}

/* reminders (LQ 4 Oct 2026) */
.remind{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.remind button{height:26px;padding:0 9px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:600;font-size:11.5px;cursor:pointer}
.remind button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.flabel{display:block;font-weight:600;font-size:13px;margin:12px 0 0}
.flabel small.muted{display:block;font-weight:500;font-size:11px;margin-top:4px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0}
.chk select{height:28px;margin:0;font-size:12px;width:auto}
.ios-note{margin-top:10px;border:1px solid #F6E3A1;background:#FFF7D6;border-radius:8px;padding:8px 10px;font-size:12px}
.rem-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F0F2F6;font-size:12px}
.rem-row:first-of-type{border-top:0}
.rem-row small{display:block;color:#5F6673}
.rem-row .pills-r{display:flex;gap:3px;flex:none}
.rem-row .pills-r span{font-size:10px;font-weight:700;background:#EEF0F4;color:var(--ink2);border-radius:999px;padding:1px 6px}

/* profile photos (LQ 4 Oct 2026) */
img.photo{object-fit:cover;border-radius:50%;background:#E6EBF2}
.profile-photo.has-photo{background-size:cover;background-position:center;color:transparent}
.hc-av{width:16px;height:16px;border-radius:50%;object-fit:cover;vertical-align:-3px;margin-right:5px}
.av-big{width:64px;height:64px;border-radius:50%;object-fit:cover;color:#fff;font-weight:700;font-size:22px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.photo-row .photo-left{display:flex;align-items:center;gap:12px}
.cropper .crop-box{position:relative;width:240px;height:240px;margin:10px auto 0;border-radius:10px;overflow:hidden;touch-action:none;cursor:grab}
.cropper canvas{display:block}
.cropper .crop-ring{position:absolute;inset:0;border-radius:0;pointer-events:none;box-shadow:inset 0 0 0 0 transparent;background:radial-gradient(circle at center, transparent 118px, rgba(0,0,0,.55) 119px)}
.cropper .crop-ring:after{content:"";position:absolute;inset:1px;border-radius:50%;border:2px solid #fff}
.cropper label{display:block;max-width:240px;margin:10px auto 0}
.cropper input[type=range]{width:100%}
.cropper input[type=file]{margin-top:8px;font-size:12px}

/* kid sign-in (BR-330) */
.kid-link{margin-top:14px;text-align:center}
.kid{max-width:400px;margin:0 auto;min-height:100dvh;background:var(--bg)}
.kid-hdr{background:var(--accent-fill);color:#fff;padding:34px 22px 22px;border-radius:0 0 28px 28px;text-align:center}
.kid-hdr b{font-size:24px;display:block;margin-bottom:4px}
.kid-body{padding:20px 22px}
.kid-name{width:100%;height:48px;font-size:18px;text-align:center;border:2px solid #DCE9F3;border-radius:12px;background:#fff;margin:0}
.kid-pin{display:flex;gap:min(10px,2vw);justify-content:center;margin:18px 0}
.kid-code{margin-bottom:10px}.kid-fam{text-align:center;margin:0 0 10px}.kid-fam .link{margin-left:4px}
.kid-pin span{width:min(46px,12vw);height:54px;border:2px solid #DCE9F3;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:var(--navy)}
.kid-pin span.on::after{content:"\25CF"}
.kid-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kid-pad button{height:54px;border-radius:14px;background:#fff;border:1px solid #DCE9F3;font-size:22px;font-weight:600;color:var(--navy);cursor:pointer;margin:0;width:auto}
.kid-pad button:active{background:#E8F3FA}
.kid-pad button:disabled{opacity:.5}
.ok-box{border:1px solid #BFE6CB;background:#EAF7EE;border-radius:8px;padding:8px 10px;margin-top:4px}
.ok-box .chk{margin:0;font-size:12.5px;align-items:flex-start}
.m-p .x.on{color:var(--ink)}

/* holidays layer (T1: italic, dashed outline; BR-331) */
.pills.hol-first{justify-content:flex-start;padding-top:3px}
.pill.holiday{font-style:italic;font-weight:600;color:var(--ink2);background:transparent;border:1px dashed #C9D6E4;border-left:1px dashed #C9D6E4;border-radius:3px;padding:0 5px;line-height:12px}
.pills .pill.holiday.stacked{line-height:11px}
.chip.holiday{font-style:italic;color:var(--ink2);border:1px dashed #C9D6E4;border-radius:4px;padding:0 5px;background:transparent}
.adpill.has-tick{position:relative;padding-right:22px}.adpill.has-tick .tick{top:1px;right:3px}.adpill.done{text-decoration:line-through;color:#5F6673}
.adpill.holiday{font-style:italic;color:var(--ink2);border:1px dashed #C9D6E4;border-left:1px dashed #C9D6E4;background:transparent}
.pop-hol{font-style:italic;color:var(--ink2);font-size:12px;padding:4px 0 4px 2px;border-bottom:1px dashed #E6EBF2;margin-bottom:4px}
.hol-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.hol-group h3{font-size:11px;letter-spacing:.06em;font-weight:800;margin:10px 0 4px;color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.hol-group h3 .lnk{padding:0;font-size:11px}
.chk.hol{margin:2px 0;font-size:12.5px}
.chk.hol small{margin-left:auto;color:#5F6673;font-size:11px;padding-left:8px;white-space:nowrap}
@media (max-width:720px){.hol-cols{grid-template-columns:1fr}}

/* birthdays layer (B2: dotted outline in the person's color, with a cake; BR-332) */
.pill.birthday{font-weight:600;color:var(--ink);background:transparent;border:1px dotted #9AA3B2;border-left:1px dotted #9AA3B2;border-radius:3px;padding:0 5px 0 4px;line-height:12px}
.pills .pill.birthday.stacked{line-height:11px}
.chip.birthday{color:var(--ink);border:1px dotted #9AA3B2;border-radius:4px;padding:0 5px 0 4px;background:transparent}
.adpill.birthday{color:var(--ink);border:1px dotted #9AA3B2;border-left:1px dotted #9AA3B2;background:transparent}
.bd-row .x+.x{margin-left:10px}
.bd-row .av{width:24px;height:24px;border-radius:50%;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.bd-add{display:grid;grid-template-columns:1.1fr 1.3fr .8fr .6fr .8fr .8fr auto;gap:8px;align-items:end;margin-top:10px;border:1px dashed #C9D6E4;border-radius:10px;padding:10px 12px;background:var(--head)}
.bd-add label{font-size:10.5px;font-weight:600;color:var(--ink2);margin:0 0 3px;display:block}
.bd-add input,.bd-add select{height:32px;margin:0;font-size:13px;width:100%}
.bd-add .btn{height:32px;line-height:30px;padding:0 12px;font-size:12px;width:auto;margin:0}
@media (max-width:720px){.bd-add{grid-template-columns:1fr 1fr}}

/* ---------- non-negotiables: the Day view right column (LQ 5 Oct 2026, mock habits-day-mock). BR-333 ---------- */
.day-wrap{display:grid;grid-template-columns:minmax(680px,980px) 440px;gap:14px;align-items:start;justify-content:start}
.day-left{min-width:0}
.nn-col{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.nn-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.nn-main{border-left:4px solid var(--accent)}
.nn-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.nn-big{font-size:13.5px;font-weight:700}.nn-big small{font-weight:600;font-size:11px}.nn-sub{font-size:11px;color:var(--ink2)}
.nn-ring{width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--accent) 0 var(--p,0%),#E6EEF6 var(--p,0%) 100%);display:flex;align-items:center;justify-content:center;flex:none}
.nn-ring b{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--ink)}
.nn-item{gap:9px;padding:6px 0;font-size:12.5px}
.nn-item .t{cursor:default}.nn-item.done .t{color:#5F6673;text-decoration:line-through}.nn-item.off .t{color:#5F6673}
.todo.nn-item small.nn-days{color:#5F6673;font-weight:500;font-size:11px;margin-left:4px}
.nncb{width:18px;height:18px;border-radius:50%;border:1.5px solid #C9D6E4;background:#fff;cursor:pointer;flex:none;padding:0;position:relative}
.nncb.on{background:var(--accent);border-color:var(--accent)}.nncb.on:after{content:"✓";color:#fff;font-size:11px;font-weight:700;position:absolute;left:3px;top:0;line-height:16px}
.nncb:disabled{cursor:not-allowed;opacity:.45}
.nn-st{font-size:10.5px;color:var(--ink2);font-weight:600;white-space:nowrap}.nn-st b{color:#15803D}
.nn-edit{border:0;background:none;color:#5F6673;cursor:pointer;font-size:12px;padding:0 2px}.nn-edit:hover{color:var(--accent-ink)}
.nn-add{display:block;width:100%;margin-top:6px;border:1px dashed #C9D6E4;background:none;border-radius:8px;padding:6px;text-align:center;font-weight:600;color:var(--ink2);font-size:11.5px;cursor:pointer;font-family:inherit}
.nn-add:hover{border-color:var(--accent);color:var(--accent-ink)}
.nn-fam{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;border-top:1px solid #F0F2F6;padding-top:8px}
.nn-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink2);background:#F0F6FB;border-radius:8px;padding:2px 7px}
.nn-chip i{width:8px;height:8px;border-radius:50%;display:inline-block}.nn-chip b{color:var(--ink)}
.nn-h{font-size:12px;margin:0 0 6px;display:flex;justify-content:space-between;gap:8px}.nn-h span{font-weight:600;color:var(--ink2);font-size:10.5px;white-space:nowrap}
.nn-hist{display:grid;gap:3px;align-items:center;font-size:10.5px}
.nn-hist .d{text-align:center;color:#5F6673;font-size:8.5px}.nn-hist .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px}
.nn-hist .b{height:13px;border-radius:3px;background:#EEF0F4}.nn-hist .b.on{background:var(--accent)}.nn-hist .b.skip,.nn-hist .b.none{background:transparent;border:1px dashed #E2E6EC;height:11px}
.nn-hist .s{text-align:right;font-weight:700;color:var(--ink2)}
.nn-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nn-mo{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}
.nn-mo .h{text-align:center;font-size:8.5px;font-weight:700;color:#5F6673}
.nn-mo .c{height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:#5F6673;background:#F7F8FA;cursor:pointer}
.nn-mo .c:hover{outline:1px solid var(--accent)}
.nn-mo .c.g{background:#DCFCE7;color:#166534}.nn-mo .c.a{background:#FEF3C7;color:#92400E}.nn-mo .c.r{background:#FEE2E2;color:#991B1B}
.nn-mo .c.t{outline:2px solid var(--accent);outline-offset:-2px}.nn-mo .c.sel{box-shadow:0 0 0 2px var(--ink) inset}.nn-mo .c.x{background:transparent;cursor:default}.nn-mo .c.x:hover{outline:0}
.nn-legend{font-size:10px;color:#5F6673;margin-top:6px}
.nn-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:middle;margin:0 3px 0 7px}.nn-legend i:first-child{margin-left:0}
.nn-legend i.g{background:#16A34A}.nn-legend i.a{background:#D97706}.nn-legend i.r{background:#B91C1C}
.nn-detail .i{font-size:11.5px;padding:3px 0;display:flex;gap:7px;align-items:center}.nn-detail .ok{color:#15803D;font-weight:700}.nn-detail .no{color:var(--danger);font-weight:700}
.nn-share{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink2);margin-top:10px;border-top:1px solid #F0F2F6;padding-top:8px;cursor:pointer}
.nn-wd{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 4px}.nn-wd .chk{margin:2px 0}
.tg-wrap.day-grid{max-width:980px;min-width:680px}
/* phones and narrow screens: the planner is exactly as wide as the cards under it (LQ 5 Oct 2026) */
/* tablets (LQ 7 Oct 2026): the planner narrows so the weather and to do cards stay beside it, held either way */
@media (max-width:1180px){.day-wrap{grid-template-columns:minmax(0,1fr) 330px}.tg-wrap.day-grid{min-width:0;max-width:none;width:100%}}
@media (max-width:699px){.day-wrap{grid-template-columns:minmax(0,1fr)}.nn-col{position:static}}

/* ---------- weather card above the non-negotiables (W1, LQ 5 Oct 2026). BR-334 ---------- */
.nn-box{display:flex;flex-direction:column;gap:12px}
.wx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.wx-head b{font-size:12.5px}
.wx-place{font-weight:600;color:var(--ink2);font-size:11px}
.wx-change{border:0;background:none;color:var(--accent-ink);font-weight:600;font-size:11px;cursor:pointer;margin-left:6px;padding:0;font-family:inherit}
.wx-now{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.wx-icon{font-size:34px;line-height:1}.wx-temp{font-size:30px;font-weight:800;line-height:1}
.wx-meta{font-size:11px;color:var(--ink2);line-height:1.5}
.wx-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wx-day{display:flex;flex-direction:column;align-items:center;gap:1px;border:0;border-radius:10px;padding:8px 4px 6px;background:#F7FAFD;cursor:pointer;font-family:inherit;color:var(--ink)}
.wx-day:hover{outline:1px solid var(--accent)}
.wx-day.t{background:#EAF3FA}.wx-day.sel{outline:1.5px solid var(--accent)}
.wx-day .n{font-size:10.5px;font-weight:700;color:var(--ink2)}.wx-day .i{font-size:22px;line-height:1.3;margin:2px 0}
.wx-day .hi{font-size:13px;font-weight:700}.wx-day .lo{font-size:10.5px;color:#5F6673;font-weight:600;margin-left:3px}
.wx-day .r{font-size:9.5px;color:var(--accent-ink);font-weight:600;margin-top:2px;min-height:12px}
.wx-results{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.wx-pick{text-align:left;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink)}
.wx-pick:hover{border-color:var(--accent)}.wx-pick small{margin-left:6px}

/* ---------- drag and drop (D1, LQ 5 Oct 2026). BR-335 ---------- */
.can-drag{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.is-dragging,.is-dragging *{cursor:grabbing !important}
.wk-drag-on,.wk-drag-on *,.is-dragging,.is-dragging *{user-select:none;-webkit-user-select:none}
.evblock.dragging{z-index:30;opacity:.92}
.evblock.dragging .evlabel{box-shadow:0 8px 18px rgba(19,41,75,.25);outline:2px solid var(--accent)}
.ev-resize{position:absolute;left:0;right:0;bottom:-3px;height:8px;cursor:ns-resize;z-index:2}
.evblock.can-drag:hover .ev-resize::after{content:"";position:absolute;left:4px;bottom:3px;width:22px;height:3px;border-radius:2px;background:rgba(19,41,75,.35)}
.chip.dragging,.mg-span.dragging,.adpill.dragging{opacity:.4}
.mg-cell.drop,.adcell.drop{background:#EAF3FA !important;outline:2px dashed var(--accent);outline-offset:-3px}
.drag-tip{position:fixed;z-index:100;pointer-events:none;background:var(--ink);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap;box-shadow:0 4px 10px rgba(19,41,75,.2)}
.toast-undo{border:0;background:none;color:#9fd0f0;font-weight:700;cursor:pointer;margin-left:10px;font-family:inherit;font-size:inherit;padding:0}
/* Daily To Do's: drag a row to reorder */
.nn-item.can-drag{position:relative}
.nn-item.can-drag:hover::before{content:"⋮⋮";position:absolute;left:-13px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:-2px;color:#5F6673}
.nn-item.dragging{background:#F0F6FB;border-radius:8px;box-shadow:0 6px 14px rgba(19,41,75,.15);z-index:2}

/* the MyAnnualCalendar by NorthPointe logo (LQ 5 Oct 2026): Annual in the NorthPointe swoosh blue #59A5D6 */
.logo.logo-img{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px 10px}
.logo.logo-img img{width:100%;max-width:178px;height:auto;display:block}
.logo-meta{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.logo-meta .logo-sub{margin-top:0}
.oauth-box{margin:6px 0 4px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 12px;margin:0 0 8px;border:1px solid #C9CFD8;border-radius:8px;background:#fff;font:600 14px inherit;font-family:inherit;color:#1F1F1F;cursor:pointer}
.oauth-btn:hover{background:#F7F8FA}
.oauth-or{display:flex;align-items:center;gap:10px;color:#5F6673;font-size:12px;margin:10px 0}.oauth-or:before,.oauth-or:after{content:"";flex:1;height:1px;background:#E2E6EC}
.inv-who{background:#F0F6FB;border-radius:10px;padding:12px;margin:0 0 14px;line-height:1.45}.inv-who b{color:var(--navy)}.inv-who small{display:block;color:#5F6673;margin-top:4px}
.inv-wrong{background:#FFF7E6;border:1px solid #F5D9A8;border-radius:10px;padding:12px;margin:0 0 14px;line-height:1.45}
.signin-logo{margin:0 0 6px;line-height:0}.signin-logo img{max-width:100%;height:auto}
.logo-meta .env{margin-left:0}.env:empty{display:none}

/* Connected calendars (Outlook sync, BR-337) */
.sync-prov{border-top:1px solid #F0F2F6;padding:12px 0}
.sync-ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sync-ph b{font-size:13.5px}.sync-ph small{display:block;color:#5F6673;font-size:12px}
.sync-logo{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex:none}
.sync-logo.ms{background:#0F6CBD}.sync-logo.g{background:#EA4335}
.sync-state{font-size:11.5px;font-weight:700;color:#166534;background:#DCFCE7;border-radius:8px;padding:2px 8px}
.sync-state.warn{color:#92400E;background:#FEF3C7}.sync-state.bad{color:#991B1B;background:#FEE2E2}
.sync-err{margin:8px 0 0 38px;font-size:12px;color:#991B1B}
.sync-pair{display:flex;align-items:center;gap:8px;margin:8px 0 0 38px;font-size:12.5px;padding:7px 10px;background:#F7FAFD;border-radius:8px;flex-wrap:wrap}
.sync-pair .arrow,.cc-row .arrow{color:var(--ink2);font-weight:700}
.sync-pair small{margin-left:auto;color:#5F6673}
.sync-links{display:flex;gap:16px;margin:8px 0 0 38px}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent-ink);cursor:pointer}
.linkish.danger{color:var(--danger)}
.cc-row{display:grid!important;grid-template-columns:20px 1fr 18px 170px;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #F0F2F6;font-size:13px;margin:0!important}
.cc-row input[type=checkbox]{width:16px;height:16px;margin:0}
.cc-row small{display:block;color:#5F6673;font-size:11px}
.cc-row select{margin:0;height:32px;font-size:12.5px}
.cc-row select:disabled{opacity:.45}
.cc-note{margin:0 0 8px 28px;padding:8px 10px;background:#FFF8EB;border:1px solid #F3DDB0;border-radius:8px;font-size:12px;line-height:1.45;color:#5B4A2A}
.otag{display:inline-block;margin-left:5px;font-size:9px;font-weight:700;letter-spacing:.02em;color:#0F6CBD;background:#fff;border:1px solid #BFD6EF;border-radius:4px;padding:0 4px;line-height:14px;vertical-align:1px}
@media (max-width:560px){.cc-row{grid-template-columns:20px 1fr;}.cc-row .arrow{display:none}.cc-row select{grid-column:2}}
.card .sync-ph button.primary{width:auto;height:30px;margin:0;padding:0 14px;font-size:12.5px;border-radius:8px}
.linkish.danger{border:0;background:none;color:var(--danger)}
.otag.g{color:#C5221F;border-color:#F3C1BD}
.sync-state.idle{color:#4A5B7A;background:#EEF2F7}
.cc-head{display:grid;grid-template-columns:20px 1fr 18px 170px;gap:8px;padding:2px 0 6px;font-size:11px;font-weight:700;color:#4A5B7A;line-height:1.3}
@media (max-width:560px){.cc-head{display:none}}
.bd-import{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #F0F2F6}
.bd-import:empty{display:none}
.bi-all{margin:8px 0 4px}
.bi-list{max-height:52vh;overflow:auto;border-top:1px solid #F0F2F6}
.bi-row{display:grid!important;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #F0F2F6;font-size:13px;font-weight:600;margin:0!important}
.bi-row input{width:16px;height:16px;margin:0}
.bi-row small{color:#5F6673;font-weight:500;font-size:11.5px}
.bi-row.dup span{color:#5F6673}

/* ---------- My Work (mockup B "the trays", LQ 6 Oct 2026). BR-339, BR-340 ---------- */
.badge.red{background:#DC2626;color:#fff}.nav-item.active .badge.red{background:#DC2626;color:#fff}
.otag.w{color:#B91C1C;border-color:#FCA5A5}
.main.on-work .topbar .year-nav,.main.on-work .topbar [data-today],.main.on-work .topbar [data-views],.main.on-work .topbar .search,.main.on-work .topbar .avatar-stack,.main.on-work .subbar{display:none}
.main.on-work .canvas{padding:16px 22px;display:block}
.wk{max-width:1500px}
.wk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wk-head h2{font-size:20px;margin:0 0 2px;color:var(--navy)}
.wk-titles{min-width:0}.wk-sp{flex:1}
.wk-who{width:auto;height:36px;margin:0;font-weight:600}
.wk-chips{display:flex;gap:3px;background:#EEF2F7;border-radius:9px;padding:3px}
.wk-chips button{border:0;background:none;padding:6px 11px;border-radius:7px;font-weight:600;font-size:12.5px;color:var(--ink2);cursor:pointer}
.wk-chips button.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wk-new{height:36px;padding:0 14px;border-radius:8px;font-weight:700;cursor:pointer;width:auto}
.wk-weeknav{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 10px}.wk-weeknav .view-title{font-size:18px}
/* one width for "This week" and the longest date range, so the arrows stay put (LQ 8 Oct 2026); the Day view's date row too */
.wk-weeknav .view-title,.day-nav .view-title{width:min(340px,52vw);flex:none;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:8px}
.wk-day{background:#fff;border:1px solid var(--line3);border-radius:10px;padding:7px 9px;min-height:72px;cursor:pointer;position:relative;min-width:0}
.wk-day:hover{border-color:var(--accent)}
.wk-day .h{font-weight:700;font-size:12.5px}.wk-day .h small{color:#5F6673;font-weight:600;font-size:11px}
.wk-day.today{box-shadow:0 0 0 1.5px var(--accent) inset}.wk-day.today .h{color:#2B7BB9}
.wk-day.we{background:#F8F9FB}
.wk-e{font-size:11px;margin-top:3px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.wk-e i{width:6px;height:6px;border-radius:50%;background:#94A3B8;flex:none}
.wk-e.tk{font-weight:700}.wk-e.tk i{border-radius:2px;background:#EF4444}
.wk-e.more{color:var(--accent-ink);font-weight:600}
.wk-day.wk-over{border:2px dashed var(--accent);background:#F0F7FD}
.wk-day.wk-over:after{content:"Drop to schedule";position:absolute;left:8px;bottom:5px;font-size:10.5px;font-weight:700;color:#2B7BB9;background:#F0F7FD;padding-right:4px}
.wk-hint{margin:14px 0 0;line-height:1.5} /* more room around the hint and the Category row (LQ 14 Oct 2026: "cramped") */
.wk-trays{display:flex;gap:14px;margin-top:14px;align-items:stretch}
.wk-trays > .wk-tray{flex:1 1 0}
.wk-trays > .wk-tray.in{flex:.85 1 0;min-width:220px}
.wk-tray{border-radius:14px;padding:12px 10px 14px;min-height:380px;background:linear-gradient(#EEF2F7,#E2E8F0);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #CBD5E1,0 10px 20px rgba(19,41,75,.06);min-width:0}
/* each tray wears its own color (LQ 8 Oct 2026: the grey trays blended into the page): a tint of the dot's color and a band along the top */
.wk-tray{border-top:4px solid var(--c);background:linear-gradient(color-mix(in srgb,var(--c) 7%,#fff),color-mix(in srgb,var(--c) 16%,#fff));box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--c) 40%,#fff),0 10px 20px rgba(19,41,75,.07)}
.wk-tray h3{color:color-mix(in srgb,var(--c) 55%,var(--navy))}
.wk-tray.in{background:linear-gradient(#FFF7ED,#FFEDD5);box-shadow:inset 0 -3px 0 #FDBA74,0 10px 20px rgba(194,65,12,.08)}
.wk-tray h3{margin:0 4px 10px;font-size:13.5px;display:flex;align-items:center;gap:8px;color:var(--navy)}
.wk-tray h3 i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.wk-tray h3 small{margin-left:auto;color:var(--ink2);font-weight:600}
.wk-tray.wk-over{box-shadow:0 0 0 2px var(--accent) inset}
.wk-list{display:flex;flex-direction:column;gap:9px;min-height:60px}
.wk-empty{font-size:12px;color:var(--ink2);margin:8px 6px}
.wk-card{background:#fff;border-radius:7px;padding:9px 10px;border-left:4px solid var(--c);box-shadow:0 1px 0 #E2E8F0,0 4px 10px rgba(19,41,75,.07);cursor:grab;user-select:none;position:relative}
.wk-card:hover{box-shadow:0 1px 0 #E2E8F0,0 6px 16px rgba(19,41,75,.13)}
.wk-card.wk-dragging{opacity:.3}
.wk-ghost{position:fixed;z-index:1000;pointer-events:none;transform:rotate(-3deg);box-shadow:0 18px 34px rgba(0,0,0,.25)!important;opacity:.96}
body.wk-drag-on,body.wk-drag-on *{cursor:grabbing!important;user-select:none}
.wk-gap{height:46px;border:2px dashed #94A3B8;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#64748B;background:rgba(255,255,255,.5)}
.wk-top{display:flex;align-items:flex-start;gap:8px}
.wk-t{font-weight:700;font-size:13px;line-height:1.3;flex:1;min-width:0;overflow-wrap:anywhere}
.wk-grip{color:#C2CAD6;letter-spacing:-1px;font-size:12px;touch-action:none;cursor:grab;padding:0 2px}
.wk-cb{width:17px;height:17px;border-radius:50%;border:2px solid #C9D6E4;background:#fff;flex:none;padding:0;cursor:pointer;margin-top:1px}
.wk-cb:hover{border-color:#16A34A}
.wk-cb.on{background:#16A34A;border-color:#16A34A}
.wk-note{font-size:11.5px;color:var(--ink2);margin:3px 0 0 25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-m{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.wk-card .wk-m{margin-left:25px}
.wk-vis{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#5F6673;font-weight:600}
.wk-vis svg,.wk-sched svg,.wk-radio svg{width:11px;height:11px;flex:none}
.wk-since{font-size:11px;font-weight:700;color:#B45309}
.wk-sched{margin-left:auto;border:0;background:none;font-size:11px;font-weight:700;color:var(--accent-ink);display:inline-flex;align-items:center;gap:3px;cursor:pointer;padding:0;white-space:nowrap}
.wk-sched.on{color:#15803D}
.wk-sched.late{color:var(--danger)}
.wk-sched:disabled{cursor:default}
.wk-from{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;margin-bottom:4px}
.av.sm{width:20px;height:20px;font-size:9px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none;object-fit:cover}
.wk-acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:center}
.wk-acts span{font-size:11px;color:var(--ink2);font-weight:600}
.wk-acts button{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--navy)}
.wk-acts button[data-accept="today"]{background:#FEE2E2;border-color:#FCA5A5;color:#991B1B}
.wk-acts button[data-accept="week"]{background:#E0F2FE;border-color:#7DD3FC;color:#075985}
.wk-acts button.no{border:0;background:none;color:#5F6673;margin-left:auto}
.wk-foot{display:flex;gap:18px;margin-top:12px}
.lnk{border:0;background:none;color:var(--accent-ink);font-weight:700;cursor:pointer;padding:0;font-size:13px}
.wk-form .wk-ftitle{font-weight:700;font-size:15px;margin:0 0 6px}
.wk-form textarea{resize:vertical}
.wk-radio{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}.wk-radio label.row{margin:0;display:flex;align-items:center;gap:5px}
.wk-read p{margin:0 0 10px}
.wk-donelist{display:flex;flex-direction:column}
.wk-doneitem{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line3)}
.wk-doneitem div{flex:1;min-width:0}.wk-doneitem b{display:block;font-size:13.5px}.wk-doneitem small{color:var(--ink2);font-size:11.5px}
.wk-doneitem .wk-cb{display:inline-block}
/* Day view: the Do Today card */
.wk-daycard{border-left:4px solid #EF4444}
.wk-daycard h3{margin:0 0 4px;font-size:13.5px;display:flex;align-items:baseline;gap:8px;color:var(--navy)}.wk-daycard h3 small{margin-left:auto;font-weight:600;font-size:11px;color:var(--ink2)}
.wk-ti{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #F0F2F6;cursor:grab;user-select:none;background:#fff}
.wk-ti.wk-dragging{opacity:.35}
.wk-tt{flex:1;min-width:0}.wk-tt b{font-size:12.5px;display:block}.wk-tt .wk-m{margin-top:2px}
.wk-ti .wk-sched{margin-left:0}
.wk-foot2{font-size:11.5px;color:var(--ink2);margin:8px 0 0}
.wk-ti.wk-ghost{border-radius:8px;padding:7px 10px;border-left:4px solid #EF4444;width:auto}
.wk-preview{position:absolute;left:4px;right:6px;border:2px dashed var(--accent);background:rgba(240,247,253,.9);border-radius:6px;font-size:11.5px;font-weight:700;color:#2B7BB9;padding:4px 8px;z-index:6;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tg-col.wk-over{background:rgba(75,156,211,.04)}
/* phones and narrow screens: the week scrolls sideways and the trays become a swipeable row */
@media (max-width:980px){
  .main.on-work .canvas{padding:10px 12px 20px}
  .wk-week{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .wk-day{flex:0 0 42%;scroll-snap-align:start}
  .wk-trays,.wk-trays.three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .wk-trays > .wk-tray,.wk-trays > .wk-tray.in{flex:0 0 80%;min-width:0;scroll-snap-align:start;min-height:300px}
  .wk-sp{display:none}.wk-head{gap:8px}.wk-new{margin-left:auto}
}
/* more than one account per service (LQ 6 Oct 2026) */
.sync-prov.extra{border-top:1px dashed #E3E7EE}
.sync-add{margin:0 0 6px 38px}
/* schedule a task: the form beside your whole day (option A, LQ 6 Oct 2026) */
.panel.modal.wide{width:min(940px,96vw)}
@media (min-width:641px){.panel.modal.anchored{transform:none}}
.wk-sch{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.wk-warn{margin:10px 0 0;font-size:12px;font-weight:600;color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:7px 10px}
.wk-free{display:flex;flex-wrap:wrap;gap:6px}
.wk-free button{font-size:12px;font-weight:700;border-radius:999px;padding:5px 10px;background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;cursor:pointer}
.wk-free button:hover{background:#D1FAE5}
.wk-sday{border-left:1px solid var(--line3);padding-left:18px;max-height:min(70vh,640px);overflow:auto}
.wk-sday h3{margin:0;font-size:14px;color:var(--navy)}.wk-sday>p{margin:2px 0 8px}
.wk-adays{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.wk-adays span{font-size:11px;font-weight:600;background:#F1F5F9;border-radius:4px;padding:1px 6px}
.wk-tl{position:relative;margin:8px 0 6px}
.wk-tl .hl{position:absolute;left:0;right:0;border-top:1px solid var(--line3)}.wk-tl .hl.half{border-top-color:#F3F4F6}
.wk-tl .hl b{position:absolute;left:0;top:-7px;font-size:10.5px;color:#5F6673;background:#fff;padding-right:4px;font-weight:600}
.wk-tl .ev{position:absolute;left:40px;right:6px;border-radius:5px;border-left:3px solid var(--c);font-size:11.5px;font-weight:600;padding:1px 7px;overflow:hidden;display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.wk-tl .ev span{overflow:hidden;text-overflow:ellipsis}.wk-tl .ev small{color:#64748B;font-weight:500;font-size:10.5px}
.wk-tl .prop{position:absolute;left:40px;right:6px;border-radius:6px;border:2px dashed #EF4444;background:rgba(254,226,226,.9);padding:2px 8px;font-size:12px;box-shadow:0 6px 14px rgba(239,68,68,.18);z-index:2;cursor:grab;touch-action:none;user-select:none;overflow:hidden}
.wk-tl .prop b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wk-tl .prop small{color:#991B1B;font-weight:600}
.wk-tl .prop .hd{position:absolute;left:50%;bottom:0;width:30px;height:7px;margin-left:-15px;border-radius:3px;background:#EF4444;cursor:ns-resize}
.wk-tl .prop.clash{border-color:#D97706;background:rgba(254,243,199,.93)}.wk-tl .prop.clash small{color:#92400E}.wk-tl .prop.clash .hd{background:#D97706}
@media (max-width:760px){.wk-sch{grid-template-columns:1fr}.wk-sday{border-left:0;padding-left:0;border-top:1px solid var(--line3);padding-top:12px;max-height:none}}
.wk-sechead{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line3);font-weight:700;font-size:13.5px;color:var(--navy)}
.wk-dnav{display:flex;align-items:center;gap:8px}.wk-dnav h3{flex:1;text-align:center}
.wk-dnav .nb{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:16px;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;padding:0}
.wk-dnav .nb:hover{border-color:var(--accent);color:var(--accent-ink)}
/* the day's heading and arrows stay put; the planner scrolls under them (LQ 6 Oct 2026) */
.wk-sday{padding-top:0}
.wk-shead{position:sticky;top:0;z-index:4;background:#fff;padding:2px 0 8px;border-bottom:1px solid var(--line3)}
.wk-shead>p{margin:4px 0 0}
.wk-tl{margin-top:14px}
@media (max-width:760px){.wk-shead{top:-1px}}
.wk-sch .actions{flex-wrap:wrap}.wk-sch .actions button{white-space:nowrap}
/* every task card the same shape: straight, one meta line, same minimum height (LQ 6 Oct 2026) */
.wk-card{min-height:86px;display:flex;flex-direction:column}
.wk-card .wk-m{flex-wrap:nowrap;margin-top:auto;padding-top:6px;min-width:0}
.wk-card .wk-vis,.wk-card .wk-since{white-space:nowrap}
.wk-card .wk-since{overflow:hidden;text-overflow:ellipsis;min-width:0}
.wk-card .wk-since{display:block;margin:2px 0 0 25px;font-size:11px}
.wk-tray h3{align-items:flex-start}.wk-tray h3 i{margin-top:4px}
.wk-tn{display:flex;flex-direction:column;line-height:1.2}.wk-tn em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink2);margin-top:2px}
.wk-tray h3{min-height:40px}

/* Schedule It on the New task form (LQ 6 Oct 2026) */
.wk-sch.solo{grid-template-columns:minmax(0,1fr)}
.wk-schedit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.wk-sbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--accent,#4B9CD3);color:#1D6FA8;background:#F0F7FD;border-radius:9px;padding:8px 14px;font-weight:700}
.wk-sbtn svg{width:14px;height:14px}.wk-sbtn.on{background:#4B9CD3;color:#fff}
.wk-picked{margin-top:10px;border:1px solid #BFDBFE;background:#EFF6FF;border-radius:10px;padding:4px 12px 10px}
.wk-picked label{margin-top:8px}.wk-pickhead{display:flex;align-items:center;justify-content:space-between;margin:6px 0 0;font-size:13px;color:#1D4ED8}
.wk-pickhead .lnk{font-size:12px;color:var(--ink2,#4A5B7A)}

/* a Daily To Do being dragged onto the planner (LQ 6 Oct 2026) */
.nn-item.nn-planning{opacity:.45}

/* Task categories (LQ 6 Oct 2026): chips, filter row, picker, Settings list */
.wk-cat{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--k) 12%,#fff);border:1px solid color-mix(in srgb,var(--k) 35%,#fff);border-radius:999px;padding:1px 8px 1px 6px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wk-cat i{width:8px;height:8px;border-radius:50%;background:var(--k);flex:none}
.wk-card.has-cat{border-left-color:var(--k)}
.wk-catline{margin:-2px 0 5px 25px;min-width:0;display:flex}
.wk-cats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 18px}.wk-cats > b{margin-right:4px}
.wk-cats>b{font-size:12px;color:var(--ink2)}
.wk-cf{font:inherit;cursor:pointer}
.wk-cats .wk-cf{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;color:var(--ink)}
.wk-cats .wk-cf.wk-cat{padding:4px 10px 4px 8px;border-color:color-mix(in srgb,var(--k) 35%,#fff)}
.wk-cats .wk-cf.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wk-cats .wk-cf.wk-cat.on{background:var(--k);border-color:var(--k)}.wk-cats .wk-cf.wk-cat.on i{background:#fff}
.wk-cats .wk-cf.none{border-style:dashed;color:var(--ink2)}
.wk-catpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.wk-cp{font:inherit;cursor:pointer;font-size:12.5px;padding:4px 11px 4px 9px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;color:var(--ink)}
.wk-cp.none{border-style:dashed;color:var(--ink2);padding:4px 11px}
.wk-cp.wk-cat{border-color:color-mix(in srgb,var(--k) 35%,#fff)}
.wk-cp.on{background:var(--ink);color:#fff;border-color:var(--ink);border-style:solid}
.wk-cp.wk-cat.on{background:var(--k);border-color:var(--k)}.wk-cp.wk-cat.on i{background:#fff}
.wk-cpnew{font-size:12.5px}
.wk-cpadd{display:inline-flex;gap:6px;align-items:center}.wk-cpadd input{height:32px;width:180px}
.tcat-list .cat-row{cursor:default}
.tcat-list .cat-row small b{color:var(--ink2);font-weight:600}
.tcat-list .lnk{font-size:12.5px}
.tcat-add{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;max-width:640px}
.tcat-add input[type=text]{flex:1;min-width:200px}
.tcat-pal{display:flex;gap:5px}
.tcat-pal .sw{width:22px;height:22px}
.tcat-pal .sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
/* the Done drawer */
.panel.wk-drawer{width:min(580px,100vw);z-index:12}
.wk-dd{display:flex;flex-direction:column;gap:12px}
.wk-ddstats{display:flex;gap:10px}
.wk-ddstats div{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.wk-ddstats b{display:block;font-size:22px}.wk-ddstats span{font-size:12px;color:var(--ink2);font-weight:600}
.wk-ddstats .hl{border-color:#86EFAC;background:#F0FDF4}.wk-ddstats .hl b{color:#15803D}
.wk-ddbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wk-ddbar input{grid-column:1/-1;width:100%;margin:0}.wk-ddbar select{width:100%;margin:0}.wk-ddbar select:only-of-type{grid-column:1/-1}
.wk-ddwk h4{display:flex;align-items:baseline;gap:8px;margin:6px 0 6px;font-size:13.5px}
.wk-ddwk h4 small{color:var(--ink2);font-weight:600;font-size:12px}
.wk-ddwk h4 em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:#15803D;background:#DCFCE7;border-radius:999px;padding:2px 9px}
.wk-ddlist{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.wk-ddrow{display:flex;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid #F0F2F6}.wk-ddrow:first-child{border-top:0}
.wk-ddrow .ck{width:20px;height:20px;border-radius:50%;background:#15803D;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.wk-ddrow .mid{flex:1;min-width:0}.wk-ddrow .mid b{font-size:13.5px}
.wk-ddrow .wk-ddm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px}
.wk-ddrow .tr{font-size:11px;font-weight:700;color:var(--ink2);background:#F1F5F9;border-radius:5px;padding:1px 6px}
.wk-ddrow .frm{font-size:11px;font-weight:700}
.wk-ddrow .sc{font-size:11px;font-weight:600;color:#15803D;display:inline-flex;gap:3px;align-items:center}.wk-ddrow .sc svg{width:11px;height:11px}
.wk-ddrow .when{text-align:right;font-size:12px;color:var(--ink2);font-weight:600;white-space:nowrap}.wk-ddrow .when .lnk{display:block;font-size:11.5px;margin-left:auto}
.wk-ddrow mark{background:#FEF3C7;border-radius:3px;padding:0 1px;color:inherit}
.tcat-add button,.tcat-add .btn{width:auto;flex:none;margin:0}.tcat-add input[type=text]{margin:0}
.card .tcat-add button.primary,.card .tcat-add button{width:auto;height:38px;margin:0;padding:0 18px}
.wk-ddbar input[type=search]{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:inherit;outline-offset:1px}
.wk-ghost.nn-ghost{position:fixed;margin:0;background:#fff;border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:10px;pointer-events:none}.nn-ghost .nn-edit,.nn-ghost .nn-st{display:none}

/* New event or new task? (LQ 6 Oct 2026) */
.new-choice{position:fixed;z-index:450;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(19,41,75,.2);padding:6px;width:250px}
.new-choice .nc-when{font-size:11.5px;font-weight:700;color:var(--ink2);padding:4px 8px 6px}
.new-choice button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink)}
.new-choice button:hover,.new-choice button:focus-visible{background:#F0F7FD;outline:none}
.new-choice b{display:block;font-size:14px}.new-choice small{display:block;font-size:12px;color:var(--ink2)}

/* Dashboard option B (LQ 6 Oct 2026) */
.dsec{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:4px 0 8px}
.dsec::after{content:"";flex:1;height:1px;background:var(--line)}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.tiles.three,.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tiles.three,.tiles.four{grid-template-columns:1fr}}
.tile .v.good{color:#15803D}
.wbars{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:4px}
.wbars>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}
.wbars i{display:block;width:100%;min-height:2px;background:#86C5EA;border-radius:4px 4px 0 0}
.wbars .now i{background:#16A34A}
.wbars b{font-size:11px}.wbars span{font-size:10.5px;color:var(--ink2);white-space:nowrap}
.cdot{width:10px;height:10px;border-radius:50%;flex:none;margin:0 4px}

/* Two-way or Bring in only (LQ 6 Oct 2026) */
.sync-pair{flex-wrap:wrap}
.sync-dir{display:inline-flex;gap:2px;background:#EEF2F7;border-radius:8px;padding:2px;margin-left:auto}
.sync-dir button{border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink2);padding:4px 9px;border-radius:6px;cursor:pointer}
.sync-dir button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sync-note{font-size:12px;color:var(--ink2);margin:4px 0 6px 2px;line-height:1.4}.sync-note.warn{color:#92400E}

/* tray header option B (LQ 6 Oct 2026): dot, name, count; + on the right opens New task in that tray */
.wk-tray h3 .wk-nm{display:flex;align-items:center;gap:7px}
.wk-cnt{font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px;background:#fff;border:1px solid #CBD5E1;color:var(--ink);line-height:1.4}
.wk-plus{margin-left:auto;width:28px;height:28px;flex:none;border-radius:8px;border:1px solid #CBD5E1;background:#fff;color:var(--ink);font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wk-plus:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------- Rail C (LQ 6 Oct 2026): + New, search, Plan / Do / See, Showing chips; A's soft blue ---------- */
.rail{width:248px;min-width:248px}
.rail .acct{margin:0 14px 10px;width:calc(100% - 28px);height:38px;border-radius:10px;font-weight:600}
.new-split{display:flex;margin:0 14px 10px}
.new-split[hidden]{display:none}
.new-split .new-event{margin:0;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700}
.new-split .new-event svg{width:16px;height:16px}
.rail-search{display:flex;align-items:center;gap:8px;margin:0 14px 6px;background:#fff;border:1px solid #B9D6EA;border-radius:10px;padding:0 10px;height:38px;color:#7B8EA8;cursor:text}
.rail-search svg{width:16px;height:16px;flex:none}
.rail-search input.search{border:0;outline:0;background:none;width:100%;min-width:0;height:34px;padding:0;margin:0;font:inherit;font-size:13px;color:var(--navy);box-shadow:none}
.rail-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(75,156,211,.18)}
.rail-search kbd{font:inherit;font-size:11px;border:1px solid #CFE0EE;border-radius:5px;padding:0 5px;color:#7B8EA8}
.rail-group{padding:6px 10px 2px}
.rail-gh{font-size:12px;font-weight:700;color:#5B7290;padding:6px 8px 4px;letter-spacing:0;text-transform:none;border:0;margin:0}
.rail .nav-item{gap:11px;padding:7px 10px;font-size:14px;font-weight:600;color:var(--navy)}
.rail .nav-item svg{width:18px;height:18px;flex:none}
.rail .nav-item .nl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .nav-item small{font-size:11.5px;font-weight:700;color:#5B7290;white-space:nowrap}
.rail .nav-item.active{background:#fff;color:var(--navy);box-shadow:inset 3px 0 0 var(--accent),0 1px 2px rgba(19,41,75,.08)}
.rail .nav-item.active .badge{background:#DCE9F3;color:var(--navy)}.rail .nav-item.active .badge.red{background:#DC2626;color:#fff}
.rail-pr{width:34px;height:6px;border-radius:3px;background:#D5E4F0;overflow:hidden;flex:none}.rail-pr b{display:block;height:100%;width:0;background:#16A34A}
.rail-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 6px 4px}
.rchip{display:inline-flex;align-items:center;gap:6px;border:1px solid #CFE0EE;background:#fff;border-radius:999px;padding:3px 10px 3px 4px;font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;max-width:100%}
.rchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rchip .avatar{width:20px;height:20px;font-size:9px;flex:none}
.rchip.cal{border-radius:7px;padding:4px 10px 4px 8px;background:color-mix(in srgb,var(--k) 12%,#fff);border-color:color-mix(in srgb,var(--k) 40%,#fff)}
.rchip.cal i{width:9px;height:9px;border-radius:50%;background:var(--k);flex:none}
.rchip.cal.layer span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}.rchip.cal.layer small{font-size:10.5px;color:var(--ink2);font-weight:500}
.rchip.off{opacity:.5;text-decoration:line-through;background:#fff}
.rchip:focus-visible,.rail .nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Showing filters matter on the calendar only */
.shell:not([data-page="calendar"]) .rail-showing{display:none}
/* the rail picks the view on computers, so the switch above the calendar goes; phones keep it */
@media (min-width:901px){.topbar [data-views]{display:none}}
.rail-search input.search{display:block !important;flex:1;width:auto}

.rail-clients{display:flex;flex-direction:column;gap:1px;padding:0 0 2px 38px}
.rclient{display:flex;align-items:baseline;gap:8px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--navy);padding:4px 10px 4px 0;text-align:left;cursor:pointer;border-radius:7px}
.rclient span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rclient small{font-size:11.5px;color:#5B7290;font-weight:700;white-space:nowrap}
.rclient:hover span{text-decoration:underline}.rclient.add{color:#2F6FA3}

/* Showing: one row of Everyone + people; hidden when you're the only person (LQ 6 Oct 2026) */
.rail-showing.solo{display:none}
.rchip .ev-ic{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.rchip .ev-ic svg{width:13px;height:13px}
.rail-sub{width:100%;font-size:11px;font-weight:700;color:#7A8BA6;margin:4px 0 0 2px}
.admin .a-find{display:flex;gap:8px;margin:2px 0 8px}.admin .a-find input{flex:1;margin:0}.admin .a-find .btn{width:auto}
.admin .a-row{cursor:pointer}.admin .a-row:hover{background:#F0F7FC}
.badge.ok{background:#E6F6EC;color:#126E34}.badge.bad{background:#FDECEC;color:#B91C1C}.badge.warn{background:#FFF4DB;color:#92400E}
/* billing (core-billing.md) */
.billing-gate{position:fixed;inset:0;z-index:300;background:var(--bg,#F6F8FB);display:flex;align-items:center;justify-content:center;padding:16px}
.billing-gate .bg-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(19,41,75,.12);padding:28px 26px;max-width:440px;width:100%;text-align:center}
.billing-gate .bg-logo{height:34px;margin-bottom:10px}
.billing-gate h1{font-size:22px;color:var(--navy);margin:4px 0 6px}
.billing-gate .bg-plan{color:var(--ink2);font-weight:600;margin:0 0 12px}
.billing-gate .bg-sentence{font-size:15px;line-height:1.45;margin:0 0 14px}
.billing-gate .bg-agree{justify-content:center;font-size:13px;margin:0 0 12px}
.billing-gate button.primary{width:100%;margin-bottom:8px;height:46px;border-radius:10px;font-weight:700;font-size:15px}
.billing-gate button.primary:disabled{opacity:.45}
.billing-gate .bg-agree{display:block}.billing-gate .bg-agree input{vertical-align:-2px;margin-right:6px}
.billing-gate a{color:var(--accent-ink)}
.viewonly-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#FFF4DB;border-bottom:1px solid #F3DDB0;color:#5B4A2A;padding:9px 18px;font-size:13px}
.viewonly-bar .btn{margin-left:auto;width:auto}

/* Vendors page (mockup C) */
.vendors .ch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.v-card{padding:0;overflow:hidden}
.v-scroll{overflow-x:auto}
.v-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.v-table th,.v-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:center;white-space:nowrap}
.v-table tbody tr:last-child td{border-bottom:0}
.v-table .v-name{text-align:left;position:sticky;left:0;background:#fff;z-index:1;min-width:210px;border-right:1px solid var(--line)}
.v-table th{font-size:11px;color:#6B7280;font-weight:700;vertical-align:bottom;background:#FAFBFC}
.v-table th.v-name{background:#FAFBFC}
.v-client{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;cursor:pointer;font:inherit;color:#1F2937;max-width:120px;margin:0 auto}
.v-client i{width:10px;height:10px;border-radius:50%;display:block}
.v-client span{font-weight:700;font-size:12px;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.v-client small{color:#5F6673;font-weight:600}
.v-client:hover span{text-decoration:underline}
.v-who{display:flex;align-items:center;gap:10px}
.v-who .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;object-fit:cover}
.v-who b{display:block;font-size:13px}.v-who small{color:#5F6673;font-size:11px}
.v-on,.v-add{width:28px;height:28px;border-radius:8px;font-size:14px;font-weight:800;cursor:pointer;line-height:1}
.v-on{border:0;color:#fff}
.v-on:hover{filter:brightness(.9)}
.v-add{border:1.5px dashed #CBD2DC;background:#fff;color:#5F6673}
.v-add:hover{border-color:var(--navy,#1E3A5F);color:var(--navy,#1E3A5F)}
.v-table .v-n{color:#6B7280;font-weight:700;min-width:60px}
@media (max-width:700px){.v-table .v-name{min-width:0;max-width:150px}.v-who small{display:none}.v-who b{white-space:normal}.vendors .ch-head{flex-wrap:wrap}}
/* a planned daily to do on the day and week planner (spec calendar-todo-link) */
.evblock.todo-block .evlabel{font-weight:700}
.tb-streak{margin-left:6px;font-size:9.5px;font-weight:800;color:var(--accent-ink);background:#fff;border-radius:8px;padding:0 5px;line-height:14px;display:inline-block;vertical-align:1px}
.idle-note{background:#FFF7E6;border:1px solid #F5D9A8;color:#7A4B00;border-radius:8px;padding:8px 10px;font-size:13px;margin:0 0 12px}
.idle-tip{margin-top:10px;background:#F3F8FD;border:1px solid #D5E4F0;border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--ink2,#475569)}
.idle-tip b{color:var(--ink,#1F2937)}
.idle-tip ul{margin:6px 0 6px 18px;padding:0}.idle-tip li{margin:3px 0}
.idle-tip p{margin:4px 0 0}.idle-tip .idle-staff{margin:0 0 6px;color:#7A4B00;font-weight:600}
/* Year view fitted to a tablet screen (LQ 7 Oct 2026): all 12 months across, 1 to 31 down; pinch to zoom in */
.planner-wrap.yfit{min-width:0}
.yfit .planner{grid-template-columns:20px repeat(12,minmax(0,1fr))}
.yfit .cell,.yfit .num{height:var(--rowh)}
.yfit .dn{display:none}
.yfit .dw{width:11px;font-size:7.5px}
.yfit .mh{font-size:10px;letter-spacing:.02em;padding:5px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yfit .num{font-size:8.5px}
.yfit .pill{font-size:8.5px;line-height:13px;padding:0 3px;border-left-width:2px}
.yfit .pills .pill.stacked{font-size:8px;line-height:11px}
/* tablets held upright (LQ 7 Oct 2026): the whole week across, and the four trays two by two, instead of swiping */
@media (min-width:700px) and (max-width:980px){
  .wk-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;gap:6px}
  .wk-day{flex:none;padding:6px 7px}
  .wk-trays > .wk-tray,.wk-trays > .wk-tray.in{flex:0 0 44%;min-height:320px}
}
.lg.key{cursor:default}
.x.priv-sw.on{color:var(--accent-ink);border-color:var(--accent)}
.m-p .x{white-space:nowrap}
/* Admin: free to paid */
.conv-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.conv-tiles>div{background:var(--head);border-radius:10px;padding:8px 10px}
.conv-tiles b{display:block;font-size:20px;color:var(--ink)}.conv-tiles small{color:#6B7280;font-size:11px}
.conv-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:end;height:90px}
.conv-months .cm{display:flex;flex-direction:column;align-items:center;height:100%}
.conv-months .bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.conv-months .bars i{display:block;width:40%;background:#BFDCF0;border-radius:3px 3px 0 0;min-height:1px}
.conv-months .bars i.p{background:var(--accent)}
.conv-months small{font-size:10px;color:#5F6673}
@media (max-width:700px){.conv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones (LQ 7 Oct 2026 phone check): the whole week and month fit across instead of scrolling sideways;
   member rows wrap their buttons onto a second line instead of running off the card */
@media (max-width:640px){
  .month-grid,.tg-wrap{min-width:0}
  .mg-head div{font-size:9.5px;letter-spacing:0}
  .mg-cell{min-height:72px;padding:3px 2px}
  .chip{font-size:9px;padding:0 2px;gap:2px}
  .chip .t,.chip .chip-dot{display:none}
  .tg-head .d,.tg-head>div{font-size:10px}
  .evblock .evlabel{font-size:9.5px}
  .m-p{flex-wrap:wrap;row-gap:4px}
  .m-p .main-t{flex:1 1 calc(100% - 52px)}
  .m-p .badge{margin-left:42px}
  .m-p .x{margin-left:0 !important;padding:4px 6px}
  .m-p .badge+.x{margin-left:auto !important}
}

/* accessibility pass (7 Oct 2026): words in Carolina blue use --accent-ink, white words sit on --accent-fill; both meet WCAG AA 4.5:1 */
/* browser errors card (mac_110) */
.err-row{border-bottom:1px solid var(--line,#E5E8EE)}.err-row:last-child{border-bottom:0}
.err-head{display:flex;width:100%;text-align:left;background:none;border:0;padding:8px 0;cursor:pointer;font:inherit;color:inherit}
.err-head .main-t{word-break:break-word;font-weight:600;font-size:13px}.err-head small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.err-stack{white-space:pre-wrap;word-break:break-word;font-size:11px;background:#F5F6F8;border-radius:6px;padding:8px;margin:0 0 8px;max-height:220px;overflow:auto;color:#3A4150}
.wait-list{margin-bottom:8px}

/* Checklists and Client Work (mac_113) */
.c-tools{margin:8px 0 0}
.c-row .c-main{flex:1;min-width:0}
.c-row .prog{font-size:11px;color:#5F6673;margin-top:4px;white-space:nowrap;display:flex;align-items:center;gap:6px;overflow:hidden}
.c-row .prog b{display:inline;color:#15803D;font-size:11px}.c-row .prog span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-row .prog i{display:inline-block;width:46px;height:4px;background:#EEF0F4;border-radius:999px;position:relative;overflow:hidden;flex:none}
.c-row .prog i:after{content:"";position:absolute;left:0;top:0;bottom:0;background:#15803D;width:var(--p)}
.cw-head{display:flex;align-items:center;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.cw-head .bar{flex:0 0 160px;height:8px;background:#EEF0F4;border-radius:999px;overflow:hidden}.cw-head .bar i{display:block;height:100%;background:#15803D;border-radius:999px}
.cw-head .n{flex:1;min-width:200px;font-size:12px;color:#5F6673}
.st{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #EEF0F4;min-height:40px}
.cw-list .st:first-child{border-top:0}
.st .grip{color:#C3C9D4;width:14px;flex:none;font-size:12px;cursor:grab}
.st .cb{width:18px;height:18px;border:1.5px solid #C3C9D4;border-radius:50%;flex:none;position:relative;background:#fff;cursor:pointer;padding:0}
.st .cb.on{background:#15803D;border-color:#15803D}.st .cb.on:after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.st .t{flex:1;min-width:0;font-size:13px}.st .t small{display:block;color:#5F6673;font-size:11px}
.st.done .t{color:#5F6673;text-decoration:line-through}.st.done .t small{text-decoration:none}
.st.skip .t,.st.skip .rel,.st.skip .around{color:#5F6673}
.st .rel{width:84px;flex:none;font-size:12px;color:#5F6673;text-align:right;font-variant-numeric:tabular-nums}.st .rel b{color:var(--ink);font-weight:600}
.st .around{width:150px;flex:none;font-size:12px;color:#5F6673}
.st .around.past{color:#B91C1C}.st .around.soon{color:var(--accent-ink);font-weight:600}
.st .acts{display:flex;gap:6px;flex:none;min-width:250px;justify-content:flex-end;align-items:center}.st .acts button{opacity:0;transition:opacity .12s}.st:hover .acts button,.st:focus-within .acts button{opacity:1}
.st .acts button{font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--accent-ink);font-weight:600;cursor:pointer}
.st .acts button.x{color:#5F6673}
.st .inwk{font-size:10px;font-weight:700;color:var(--accent-ink);background:#E8F3FA;border-radius:999px;padding:2px 7px;flex:none}
.st.hd{font-size:11px;color:#5F6673;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-top:0;min-height:0;padding:4px 0}
.st.hd .t,.st.hd .rel,.st.hd .around{font-size:11px;color:#5F6673;font-weight:600}
.st .inc{width:56px;flex:none;display:flex;justify-content:center}
.sq{width:18px;height:18px;border:1.5px solid #C3C9D4;border-radius:5px;display:inline-block;position:relative;background:#fff;cursor:pointer;padding:0}
.sq.on{background:var(--accent-fill);border-color:var(--accent-fill)}.sq.on:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.st.off .rel,.st.off .t,.st.off .around{color:#5F6673}
.addstep{display:flex;gap:8px;align-items:center;padding:8px 0 0 26px}
.addstep input{border:1px solid var(--line);border-radius:6px;padding:7px 9px;font:inherit;font-size:13px}
.addstep input[name=title]{flex:1;min-width:0}.addstep input[name=days]{width:84px;text-align:right}
.cw-prompt{margin:8px 0 0 26px;font-size:12.5px;color:var(--ink);background:#FFF8E6;border:1px solid #F3DFA2;border-radius:8px;padding:8px 10px}
.cw-prompt .lnk{padding:0;font-size:12.5px}.cw-prompt .sep{color:#C3C9D4;margin:0 2px}
.cw-note{margin:10px 0 0}
.apply .prev{border:1px solid var(--line);border-radius:10px;padding:2px 12px;max-height:46vh;overflow:auto;margin:8px 0 12px}
.apply-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.apply-foot .cnt{margin-left:auto;font-size:12px;color:#5F6673}.apply-foot .sep{color:#C3C9D4}.apply-foot .lnk{padding:0}
.tmw{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.tmw-b{text-align:left;font:inherit;font-size:13px;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;gap:8px;align-items:center;color:var(--ink)}
.tmw-b i{width:9px;height:9px;border-radius:50%;display:inline-block}.tmw-b.on{border-color:var(--accent-fill);background:#E8F3FA}
.lib{display:grid;grid-template-columns:240px 1fr;gap:16px;min-height:380px}
.lib-side{background:#FCFBF8;border:1px solid var(--line);border-radius:12px;padding:12px}
.lib-top{display:flex;justify-content:space-between;align-items:center}
.lib-side h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5F6673;margin:12px 0 6px}
.lib-it{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;border:0;background:none;color:var(--ink)}
.lib-it.on{background:#E8F3FA;color:var(--accent-ink);font-weight:600}.lib-it small{display:block;color:#5F6673;font-size:11px;font-weight:400}
.lib-ed{min-width:0}
.lib-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.lib-head .name{font-size:15px;font-weight:700;flex:1;min-width:160px}.lib-head .lab{font-size:12px;color:#5F6673}
.lib-head input.title{border:1px solid var(--line);padding:6px 8px;border-radius:6px;font:inherit;font-size:13px}
.lib-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid #EEF0F4}
.lib-row.hd{border-top:0;color:#5F6673;font-size:11px;font-weight:600}
.lib-row .grip{color:#C3C9D4;width:14px;flex:none;font-size:12px}
.lib-row input{border:1px solid var(--line);padding:6px 8px;border-radius:6px;font:inherit;font-size:13px;min-width:0}
.lib-row .title{flex:2}.lib-row .note{flex:2}.lib-row .days{width:64px;text-align:right;flex:none}
.lib-row input[readonly]{border-color:transparent;background:none}
.lib-row .x{width:24px;border:0;background:none;color:#C3C9D4;font-size:16px;cursor:pointer;flex:none}
.lib-row.hd .title,.lib-row.hd .note{flex:2}.lib-row.hd .days{width:64px;text-align:right;flex:none}
.lnk.danger{color:var(--danger)}
.nx .r{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #EEF0F4;font-size:13px}.nx .r:first-of-type{border-top:0}
.nx .r .dot{width:9px;height:9px;border-radius:50%;flex:none}.nx .r .who{width:160px;flex:none;font-weight:600;text-align:left;padding:0;font-size:13px;color:var(--ink)}.nx .r .ar{width:170px;flex:none;color:#5F6673;font-size:12px;text-align:right}
.nx .r .cb{width:16px;height:16px;border:1.5px solid #C3C9D4;border-radius:50%;flex:none;background:#fff;padding:0;cursor:pointer}.nx .r .cb.on{background:#15803D;border-color:#15803D}
.nx .r .st-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-client{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--accent-ink);background:#E8F3FA;border-radius:999px;padding:2px 8px;font-weight:600;margin-bottom:6px}
.wk-client i{width:7px;height:7px;border-radius:50%;display:inline-block}
@media (max-width:760px){.st .around{width:auto}.st .acts{min-width:0}.st .acts button{opacity:1}.st .acts button{padding:3px 6px}.lib{grid-template-columns:1fr}.nx .r .who{width:auto}.nx .r .ar{width:auto}}
.apply-foot button.lnk{border:0;background:none;padding:0;box-shadow:none;min-width:0}
.lib-head input.title{width:auto}.lib-head input.name{flex:1 1 200px}.lib-head input[data-anchor]{width:150px;flex:none}
.lnk.danger{border:0;background:none;padding:0;font-size:12px}
.lib-row.hd .grip{width:14px}.lib-row.hd span.days{text-align:right}
/* Start your own calendar, bring your events (mac_115) */
.su-from{margin:4px 0 12px;padding:10px 12px;background:#FFF8E6;border:1px solid #F3DFA2;border-radius:8px;font-size:13px}
.su-from p{margin:0}.su-from label{margin:0}
.bring+.bring{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.bring .actions{margin-top:8px}

/* the week strip above the Today planner (LQ 8 Oct 2026) */
/* same gutters and the same two columns as the planner below, so Sunday starts at the planner's left edge and Saturday ends
   at the side column's right edge (LQ 8 Oct 2026); both keep room for a scrollbar so a visible one never shifts them */
.day-strip{margin:0 18px 14px;flex:none;display:grid;grid-template-columns:minmax(680px,980px) 440px;column-gap:14px;justify-content:start;overflow:hidden;scrollbar-gutter:stable}
.day-strip>.wk-week{grid-column:1 / -1}
.main.view-day .canvas>.day-wrap{scrollbar-gutter:stable}.main.view-day .canvas>.day-navrow{overflow:hidden;scrollbar-gutter:stable}
@media (max-width:1180px){.day-strip{grid-template-columns:minmax(0,1fr) 330px}}
@media (max-width:699px){.day-strip{display:none}}

/* Day view: the day's pagination lives above the planner, centered on it; the header keeps only View as there (LQ 8 Oct 2026) */
.day-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px}
/* Day view: the week strip and the date row are frozen; the planner and its side column scroll beneath them (LQ 8 Oct 2026) */
.main.view-day .canvas{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.main.view-day .canvas>.day-wrap{flex:1;min-height:0;overflow:auto;margin-top:0;padding-bottom:20px;align-content:start}
.day-navrow{display:grid;grid-template-columns:minmax(680px,980px) 440px;gap:14px;justify-content:start;flex:none}
@media (max-width:1180px){.day-navrow{grid-template-columns:minmax(0,1fr) 330px}}
@media (max-width:699px){.day-navrow{grid-template-columns:minmax(0,1fr)}.day-navrow>div:last-child{display:none}}
.day-nav .view-title{font-size:18px}
.main.view-day .topbar .year-nav,.main.view-day .topbar [data-today],.main.view-day .topbar [data-views],.main.view-day .topbar [data-avatars]{display:none}
/* with nothing left in it, the top bar goes (LQ 8 Oct 2026: "we don't need this empty white header"); phones keep it for the menu button */
@media (min-width:901px){.main:is(.view-day,.on-profile,.on-settings,.on-clients,.on-dashboard,.on-review,.on-chores,.on-members,.on-work) .topbar{display:none}}
.main.view-day .subbar:has([data-hint]:empty) .hint-text{display:none}


/* Admin: slow calls, a row opens its nightly history (LQ 8 Oct 2026) */
.slow-row{cursor:pointer;border-radius:8px}.slow-row:hover{background:#F7FAFD}.slow-row.on{background:#EEF5FB}
.slow-row .slow-last{margin-left:auto;text-align:right;font-size:12.5px;white-space:nowrap}.slow-row>b{margin-left:14px;min-width:70px;text-align:right}
.slow-hist{margin:4px 0 10px;padding:12px 14px;background:#F7FAFD;border:1px solid var(--line3);border-radius:10px}
.slow-hist .hh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.slow-hist .hh b{font-size:14px}
.slow-hist .legend-l{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:6px}.slow-hist .legend-l i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* Profile and Settings: tabs in the body, the tab's cards two to a row (LQ 8 Oct 2026) */
/* tab you're on: bold with a blue underline (LQ chose A, 18 Oct 2026). The grey rule is an inset shadow, not a border,
   because the sideways scroll clipped the old underline that overlapped the border. */
.s-tabs{display:flex;gap:4px;box-shadow:inset 0 -2px 0 var(--line3);margin:4px 0 16px;overflow-x:auto;scrollbar-width:none}.s-tabs::-webkit-scrollbar{display:none}
.s-tabs button{border:0;background:none;padding:9px 14px;font:inherit;font-size:14px;font-weight:600;color:#7A879C;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.s-tabs button:hover{color:var(--navy)}.s-tabs button.on{color:var(--navy);font-weight:700;border-bottom-color:var(--accent)}
/* cards side by side on Profile and Settings are the same height (LQ 18 Oct 2026: "these cards are diff sizes") */
.s-pane{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;align-items:stretch}
.s-pane>.card{margin:0}.s-pane>.card.wide{grid-column:1 / -1}.s-pane>.card.s-off{display:none}
@media (max-width:820px){.s-pane{grid-template-columns:minmax(0,1fr)}}
.idle-only{margin:0 0 8px;font-weight:600;color:var(--ink)}
.inv-note{background:#F0F6FB;border-radius:10px;padding:10px 12px;margin:4px 0 12px;font-size:13.5px}

/* fold a My Work tray to a slim strip (LQ 10 Oct 2026) */
.wk-fold{width:22px;height:22px;flex:none;border:0;border-radius:6px;background:transparent;cursor:pointer;position:relative;padding:0;margin:0 -2px 0 -4px}
.wk-fold:before{content:"";position:absolute;left:7px;top:6px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.wk-fold:hover{background:rgba(255,255,255,.7)}
.wk-tray.folded .wk-fold:before{transform:rotate(-45deg);left:5px;top:7px}
.wk-trays > .wk-tray.folded,.wk-trays > .wk-tray.in.folded{flex:0 0 54px;min-width:54px;padding:10px 6px;cursor:pointer;overflow:hidden}
.wk-tray.folded .wk-list,.wk-tray.folded .wk-plus,.wk-tray.folded .wk-tn em{display:none}
.wk-tray.folded h3{flex-direction:column;align-items:center;gap:10px;margin:0;min-height:0}
.wk-tray.folded h3 i{margin-top:0}
.wk-tray.folded .wk-tn{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.wk-tray.folded .wk-nm{flex-direction:row-reverse}
/* Day view: the planner and the weather / to do's column each scroll on their own (LQ 10 Oct 2026); phones keep one scroll */
@media (min-width:700px){
  .main.view-day .canvas>.day-wrap{overflow:hidden;align-items:stretch;grid-template-rows:minmax(0,1fr);padding-bottom:0}
  .main.view-day .canvas>.day-wrap>.day-left,.main.view-day .canvas>.day-wrap>.nn-col{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:20px;scrollbar-gutter:stable}
  .main.view-day .canvas>.day-wrap>.nn-col{position:static}
}
@media (pointer:coarse){.focus-exit{opacity:.85;padding:10px 16px;font-size:14px;top:max(10px,env(safe-area-inset-top))}}
/* Safari on iPhone and iPad draws date boxes with the text riding high (LQ 10 Oct 2026: "the dates for starts / ends need to be centered");
   draw them like the other fields so the date sits in the middle, left-aligned like the time beside it */
input[type=date]{-webkit-appearance:none;appearance:none;display:flex;align-items:center;line-height:1.2}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;line-height:1.2}
input[type=date]::-webkit-datetime-edit{padding:0}
/* the fitted Year view (iPad) shows each day's number once you zoom in (LQ 10 Oct 2026: "when i zoom in i need to see the dates") */
.vv-zoomed .yfit .dn{display:flex;width:12px;font-size:7.5px}
/* the calendar zooms its own cells with a pinch (LQ 10 Oct 2026); the browser's page zoom stays off inside it */
.shell[data-page="calendar"] .canvas{touch-action:pan-x pan-y}
.planner{grid-template-columns:calc(26px * var(--fz,1)) repeat(12,minmax(var(--colw,132px),1fr))}
.planner-wrap:not(.yfit) .cell,.planner-wrap:not(.yfit) .num{height:var(--rowh,32px)}
/* text grows with pinch zoom (var --fz, 1 when not zoomed) */
.planner-wrap:not(.yfit) .pills .pill,.planner-wrap:not(.yfit) .pills .pill.stacked{font-size:calc(9.5px * var(--fz,1));line-height:calc(13px * var(--fz,1))}
.planner-wrap:not(.yfit) .dn,.planner-wrap:not(.yfit) .dw,.planner-wrap:not(.yfit) .more{font-size:calc(8.5px * var(--fz,1))}
.planner-wrap:not(.yfit) .dn{width:calc(17px * var(--fz,1))}.planner-wrap:not(.yfit) .dw{width:calc(15px * var(--fz,1))}
.planner-wrap:not(.yfit) .num{font-size:calc(9.5px * var(--fz,1))}
.planner-wrap:not(.yfit) .mh{font-size:calc(12px * var(--fz,1))}
.month-grid .mg-span{height:calc(17px * var(--fz,1));line-height:calc(17px * var(--fz,1));font-size:calc(10px * var(--fz,1))}
.month-grid .chip{font-size:calc(10px * var(--fz,1))}
.month-grid .mg-num{font-size:calc(11.5px * var(--fz,1));line-height:calc(16px * var(--fz,1))}
.month-grid .mg-more{font-size:calc(9.5px * var(--fz,1))}
.month-grid .mg-dow{font-size:calc(11px * var(--fz,1))}
.tg-wrap .evblock{font-size:calc(10.5px * var(--fz,1))}
/* My Work cards: press and hold to lift on touch screens; no text selection or iOS callout menu while holding (LQ 10 Oct 2026) */
[data-wk-trays] [data-task],.wk-box [data-task]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wk-held{transform:scale(.98);opacity:.6}
body.wk-drag-on .wk-trays{scroll-snap-type:none !important;scroll-behavior:auto}
/* the app's own yes-or-no box (ask, tell, askText), in place of the browser's (LQ 12 Oct 2026) */
.ask-back{position:fixed;inset:0;z-index:400;background:rgba(19,41,75,.38);display:flex;align-items:center;justify-content:center;padding:16px}
.ask{background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(19,41,75,.25);border-top:4px solid var(--accent-fill);padding:20px 22px 18px;max-width:420px;width:100%}
.ask .ask-logo{height:22px;display:block;margin:0 0 12px}
.ask p{margin:0 0 16px;font-size:15px;line-height:1.45;color:var(--ink)}
.ask textarea{width:100%;box-sizing:border-box;margin:0 0 14px;font:inherit;font-size:13px;padding:8px;border:1px solid var(--line);border-radius:8px}
.ask-btns{display:flex;justify-content:flex-end;gap:8px}
.ask-btns .btn{min-width:92px;height:38px;border-radius:9px;font-weight:600}
.ask-btns .btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.ask-btns .btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.field-hint{display:block;margin-top:4px;font-weight:400;line-height:1.4}
.apply-on{background:#F1F6FB;border-radius:8px;padding:8px 10px;margin:0 0 10px;color:var(--ink2)}
/* Projects (stage 2, LQ 12 Oct 2026) */
.pj{padding:18px 22px;max-width:1000px}
.pj-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pj-head h2{font-size:18px;margin:2px 0}
.pj-back{font-size:13px;padding:0;margin-bottom:2px}
.pj-acts{display:flex;gap:8px;flex-wrap:wrap}
.pj-empty{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;max-width:560px}
.pj-empty p{margin:0 0 10px;line-height:1.45}
.pj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pj-card{display:block;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink)}
.pj-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(19,41,75,.08)}
.pj-card-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pj-card-top b{font-size:15px}
.pj-tag{font-size:11px;font-weight:600;background:#E8F3FA;color:var(--accent-ink);border-radius:999px;padding:2px 8px}
.pj-bar{height:6px;background:#EEF0F4;border-radius:999px;overflow:hidden;margin-bottom:8px}.pj-bar i{display:block;height:100%;background:#15803D;border-radius:999px}
.pj-card-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.pj-late{color:var(--danger);font-weight:600}
.pj-tree{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 0}
.pj-row{display:flex;align-items:center;gap:10px;padding:7px 14px;border-bottom:1px solid #F1F3F6}
.pj-row:last-child{border-bottom:0}
.pj-row.d1{padding-left:44px}.pj-row.d2{padding-left:74px}
.pj-row.d0 .pj-t{font-weight:600}
.pj-tick{flex:none;width:20px;height:20px;border:1.5px solid var(--ink2);border-radius:5px;background:#fff;color:#fff;font-size:12px;line-height:16px;padding:0;cursor:pointer}
.pj-tick.on{background:#16A34A;border-color:#16A34A}
.pj-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:none;border:0;padding:2px 0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.pj-main:hover .pj-t{text-decoration:underline}
.pj-t{font-size:14px}
.pj-kids{font-size:11px;color:var(--ink2);background:#F1F3F6;border-radius:999px;padding:1px 7px}
.pj-when{font-size:12px;color:var(--ink2);margin-left:auto}
.pj-when.late{color:var(--danger);font-weight:600}.pj-when.today{color:var(--accent-ink);font-weight:600}.pj-when.wait{color:#8A6D1E;font-style:italic}.pj-when.done{color:#15803D}
.pj-row.is-done .pj-t{text-decoration:line-through;color:#6B7280}
.pj-who{flex:none;width:24px;height:24px;border-radius:50%;background:#E8F3FA;color:var(--accent-ink);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pj-sub{flex:none;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink2);cursor:pointer;padding:0;font-size:15px;line-height:20px;opacity:.55}
.pj-row:hover .pj-sub,.pj-sub:focus{opacity:1}.pj-sub-sp{flex:none;width:24px}
.pj-none{padding:10px 14px;margin:0}
.pj-quick{margin-top:10px}.pj-quick input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font:inherit;background:#fff}
.pj-foot{margin-top:8px}
.pj-form label{display:block;margin-bottom:12px}
.pj-form label > input:not([type=checkbox]):not([type=radio]), .pj-form label > select, .pj-form label > textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px}
.pj-picks{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:12px}
.pj-pick{display:flex !important;gap:8px;align-items:center;margin:4px 0 !important;font-weight:400}
.pj-tpls{display:flex;flex-direction:column;gap:8px}.pj-tpl{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.pj-tpl span{flex:1}.pj-tpl small{display:block;color:var(--ink2)}
@media (max-width:640px){.pj{padding:12px}.pj-row.d1{padding-left:30px}.pj-row.d2{padding-left:46px}.pj-when{margin-left:0;flex-basis:100%}}
.wk-proj{border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:600;background:#EEF2FF;color:#3730A3}.wk-proj::before{content:"\25A4  ";font-size:10px}

/* ---------- MAC Pocket (spec docs/specs/core-pocket.md; mockup D, LQ 12 Oct 2026) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk{height:100dvh;max-width:560px;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;position:relative}
.pk-top{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 6px}
.pk-word{flex:1;font-family:Tinos,"Times New Roman",Times,"Liberation Serif",serif;font-size:28px;font-weight:400;color:#000;line-height:1;letter-spacing:.01em}
.pk-word span{color:#59A5D6}
.pk-full{font-size:14px;font-weight:600;color:var(--accent-ink);border:1px solid #C9D6E3;border-radius:999px;padding:9px 14px;background:#fff;cursor:pointer}
.pk-day{display:flex;align-items:center;gap:4px;padding:2px 12px 8px}
.pk-arrow{width:44px;height:44px;border:1px solid #C9D6E3;border-radius:12px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.pk-arrow:disabled{opacity:.35;cursor:default}
.pk-daymid{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.pk-date{font-size:21px;font-weight:700;white-space:nowrap}
.pk-back{border:0;background:transparent;font-size:13px;font-weight:600;color:var(--accent-ink);padding:2px 6px;cursor:pointer}
.pk-events{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none;flex-shrink:0}
.pk-events::-webkit-scrollbar{display:none}
.pk-evlabel{flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink2)}
.pk-ev{flex-shrink:0;background:var(--navy);color:#fff;border:0;border-radius:10px;padding:7px 10px;font-size:13px;white-space:nowrap;cursor:pointer}
.pk-ev span{opacity:.75}
.pk-noev{font-size:13px;color:var(--ink2)}
.pk-trays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 16px;flex-shrink:0}
.pk-trays.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 28px}
.pk-tray{display:block;width:100%;padding:6px 4px 4px;border:0;border-radius:14px;background:transparent;cursor:pointer;transition:background .15s}
.pk-tray.on{background:var(--tint)}
.pk-bin{position:relative;display:block;width:100%;height:62px}
.pk-back-wall{position:absolute;left:6%;right:6%;bottom:16px;height:18px;border-radius:6px 6px 0 0;background:#CBD5E1}
.pk-tray.on .pk-back-wall{background:var(--ink);opacity:.55}
.pk-paper{position:absolute;left:18%;right:18%;height:30px;box-sizing:border-box;padding:11px 7px 2px 6px;border:1px solid #D5DDE7;border-radius:3px;box-shadow:0 1px 2px rgba(19,41,75,.08);
  background:linear-gradient(#64748B,#64748B) 6px 5px/55% 2px no-repeat,repeating-linear-gradient(180deg,#CBD5E1 0 1px,transparent 1px 4px) content-box,#fff}
.pk-paper.p0{bottom:18px;transform:rotate(-3deg)}
.pk-paper.p1{bottom:24px;transform:rotate(2deg);padding-right:9px;background-size:45% 2px,auto,auto}
.pk-paper.p2{bottom:30px;transform:rotate(-1deg);padding-right:6px;background-size:60% 2px,auto,auto}
.pk-lip{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,93% 100%,7% 100%);border-radius:4px;color:var(--ink);background:var(--tint);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.pk-tray.on .pk-lip{color:#fff;background:var(--c)}
.pk-head{display:flex;align-items:baseline;gap:8px;padding:14px 16px 0;flex-shrink:0}
.pk-head b{font-size:18px}.pk-head span{font-size:13px;color:var(--ink2)}
.pk-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 16px 12px;display:flex;flex-direction:column;gap:10px}
.pk-empty{text-align:center;color:var(--ink2);padding:28px 8px;font-size:15px}
.pk-hint{margin:2px 0 0;text-align:center;font-size:12px;color:var(--ink2)}
.pk-swipe{position:relative;border-radius:14px;overflow:hidden;flex-shrink:0}
.pk-under{position:absolute;top:0;bottom:0;display:none;align-items:center;font-size:14px;font-weight:700;color:#fff;padding:0 18px}
.pk-under.done{left:0;right:0;background:#15803D}
.pk-swipe.to-done .pk-under.done{display:flex}
.pk-acts{position:absolute;top:0;bottom:0;right:0;display:none;width:168px}
.pk-swipe.to-acts .pk-acts{display:flex}
.pk-act{flex:1;border:0;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.pk-act.move{background:var(--accent-ink)}.pk-act.del{background:#DC2626}
.pk-card{position:relative;background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pk-card.is-done{opacity:.6}
.pk-box{flex-shrink:0;width:30px;height:30px;border:2px solid var(--ink2);border-radius:8px;background:#fff;color:#fff;font-size:15px;padding:0;cursor:pointer}
.pk-card.is-done .pk-box{background:#15803D;border-color:#15803D}
.pk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pk-title{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.pk-card.is-done .pk-title{text-decoration:line-through}
.pk-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pk-proj{font-size:12px;font-weight:600;background:#EEF2FF;color:#3730A3;border-radius:999px;padding:3px 9px}
.pk-meta{font-size:12px;color:var(--ink2)}.pk-meta.late{color:var(--danger);font-weight:700}
.pk-accept{flex-shrink:0;height:36px;border:0;border-radius:9px;background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:0 12px;cursor:pointer}
.pk-add{flex-shrink:0;background:#fff;border-top:1px solid #E3E8EF;padding:10px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.pk-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--soft);border-radius:10px;padding:3px}
.pk-seg button{height:36px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer}
.pk-seg button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(19,41,75,.15)}
.pk-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.pk-chip{flex-shrink:0;height:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid #C9D6E3;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.pk-chip.on{border-color:#3730A3;background:#EEF2FF;color:#3730A3}
.pk-addrow{display:flex;gap:8px}
.pk-addrow input{flex:1;height:48px;margin:0;border:1px solid #C9D6E3;border-radius:12px;padding:0 14px;font-size:16px;background:var(--bg)}
.pk-plus{width:48px;height:48px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-size:24px;cursor:pointer}
.pk-sheet-back{position:fixed;inset:0;background:rgba(19,41,75,.35);z-index:30;display:flex;align-items:flex-end;justify-content:center}
.pk-sheet{width:100%;max-width:560px;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -8px 24px rgba(19,41,75,.15);padding:10px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px;max-height:80dvh;overflow-y:auto}
.pk-grab{align-self:center;width:40px;height:5px;border-radius:3px;background:#C9D6E3;margin-bottom:8px}
.pk-sheet-title{font-size:13px;color:var(--ink2);margin-bottom:4px}
.pk-sheet-btn{min-height:50px;border:0;border-bottom:1px solid var(--soft);background:transparent;text-align:left;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer}
.pk-sheet-btn.quiet{color:var(--ink2);font-weight:500;border-bottom:0}
.pk-sheet-btn.primary{background:var(--navy);color:#fff;border-radius:12px;text-align:center;margin-top:10px;border:0}
.pk-days{flex-wrap:wrap;margin:6px 0 10px}
.pk-sched-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-sched-row label{font-size:13px;font-weight:600;color:var(--ink2)}
.pk-sched-row input,.pk-sched-row select{display:block;width:100%;margin-top:6px}
.pk .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
.pk-open{margin-left:6px}
@media (max-width:600px){.wk-hint{display:none}} /* phones: the drag hint is for computers (LQ 12 Oct 2026: "cluttered") */
/* LQ 12 Oct 2026: "i don't love the white header". Pages with their own heading (My Work, Projects, Settings, Dashboard...)
   need no white bar: on computers it is gone (the rail has MAC Pocket under Do); on phones it keeps only the menu and Pocket
   buttons, on the page's own background, and the page heading names the page. */
@media (min-width:901px){.pk-open{display:none}}
@media (max-width:900px){
  .main:is(.on-profile,.on-settings,.on-clients,.on-dashboard,.on-review,.on-chores,.on-members,.on-work) .topbar{background:transparent;border-bottom:0;min-height:0;padding-bottom:0}
  .main:is(.on-profile,.on-settings,.on-clients,.on-dashboard,.on-review,.on-chores,.on-members,.on-work) .topbar [data-title]{display:none}
}
/* LQ 12 Oct 2026: "i can't tell from the rail where i am in the app": the page you are on reads at a glance */
.rail .nav-item.active{background:#D6E9F7;color:var(--navy);font-weight:700;box-shadow:inset 4px 0 0 var(--accent-ink)}
.rail .nav-item.active svg{color:var(--accent-ink)}
/* LQ 12 Oct 2026: "i don't want the white header anywhere". The top bar sits on the page's own background on every page and
   every screen size, with no rule under it; on the calendar it and the Key dates row read as one band above the grid. */
.topbar{background:transparent;border-bottom:0}
.main .subbar{padding-top:2px}
/* A line passes behind a holiday or birthday name, hidden where it crosses, and shows again below it (LQ 12 Oct 2026: "is there
   a way for the vertical line to 'go through, invisibly' the pill"). The name takes the day's own background, so it covers the line. */
.cell{--cbg:#fff}.cell.wk{--cbg:#E9EBEF}.cell.band{--cbg:#FFF7C2}.cell.wk.band{--cbg:#F4EBB4}.cell.today{--cbg:#FFFBDF}.cell:hover{--cbg:#F0F7FC}
.pills .pill.holiday,.pills .pill.birthday{position:relative;z-index:2;background:var(--cbg)}
/* LQ 12 Oct 2026: "the 'Pocket' button on mobile seems to be floating around ... can we lock that down?" On phones and tablets it
   sits in the same place on every page: the top right corner of the top bar, where Pocket's own "Full App" button sits. */
@media (max-width:900px){
  .topbar{position:relative;padding-right:56px;min-height:52px}
  .topbar .pk-open{position:absolute;top:8px;right:10px;margin:0;width:36px;height:36px}
}
/* the client page's Projects card (Projects replace Client Work, LQ 12 Oct 2026) */
.cp-row{display:grid;grid-template-columns:1fr 120px;gap:2px 12px;align-items:center;width:100%;text-align:left;border:1px solid var(--line3);background:#fff;border-radius:10px;padding:10px 12px;margin:0 0 8px;cursor:pointer;font:inherit;color:var(--ink)}
.cp-row:hover{border-color:var(--accent)}
.cp-row .cp-name{font-weight:700}
.cp-row small{grid-column:1/-1;color:var(--ink2)}.cp-row small .late{color:var(--danger)}
.cp-bar{display:block;height:6px;background:#E3E8EF;border-radius:3px;overflow:hidden}.cp-bar i{display:block;height:100%;width:var(--p);background:var(--accent)}
/* project task panel: the task's own actions on one row, as real buttons, with a line saying what they do (LQ 12 Oct 2026:
   "I don't understand these buttons and if Remove is a button it should look like a button") */
.pj-more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0 4px;border-top:1px solid var(--line3);margin-top:8px}
.pj-more .pj-more-hint{flex-basis:100%;margin:2px 0 0}
.btn.danger-outline{color:var(--danger);border:1px solid #F1B5B5;background:#fff}
.btn.danger-outline:hover{background:#FEF2F2;border-color:var(--danger)}
.pj-tpl-new{margin-top:14px;padding-top:12px;border-top:1px solid var(--line3)}.pj-tpl-new p{margin:8px 0 0}
.pj-tpl-banner{display:flex;align-items:center;gap:10px;background:#EEF2FF;border:1px solid #C7D2FE;border-radius:12px;padding:12px 14px;margin:0 0 14px}.pj-tpl-banner>div{flex:1}.pj-tpl-banner small{display:block;color:var(--ink2);margin-top:2px}
.drow-btn{width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;padding-left:0;padding-right:0}.drow-btn:hover b{color:var(--accent-ink)}.drow .r.late{color:var(--danger);font-weight:700}
.c-row .prog .late{color:var(--danger)}
.pk-sub{display:inline-flex;align-items:center;justify-content:center;margin:0 -6px 0 0} @media (max-width:900px){.pk-sub{display:none}} /* phones and tablets use the top-right one */ /* same square as the full-screen button beside it */
/* Projects as a list once there are more than six (LQ 12 Oct 2026) */
.pjl-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.pjl-q{flex:1 1 220px;max-width:340px;margin:0;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:inherit;background:#fff;color:var(--ink)}
.pjl-tools select{width:auto;margin:0;height:34px}
.pjl-sort{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);margin-left:auto}
.pjl-chip{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:12.5px;color:var(--ink2);cursor:pointer}
.pjl-chip.on{background:#FEF2F2;border-color:#F1B5B5;color:var(--danger)}
.pjl-rows{display:flex;flex-direction:column;gap:6px}
.pjl-row{display:grid;grid-template-columns:minmax(180px,1.4fr) 150px minmax(180px,1.6fr) 70px 110px;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--line3);background:#fff;border-radius:10px;padding:10px 14px;font:inherit;color:var(--ink);cursor:pointer}
.pjl-row:hover{border-color:var(--accent)}
.pjl-name{display:flex;flex-direction:column;gap:3px;min-width:0}.pjl-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pjl-name .pj-tag{align-self:flex-start}
.pjl-prog{display:flex;flex-direction:column;gap:4px}.pjl-prog small{color:var(--ink2)}
.pjl-next{font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjl-end{font-size:12px;color:var(--ink2);text-align:right}
.pjl-none{padding:14px 0}
@media (max-width:760px){.pjl-row{grid-template-columns:1fr 90px;gap:6px 10px}.pjl-next{grid-column:1/-1}.pjl-late,.pjl-end{display:none}.pjl-sort{margin-left:0}}

/* ---------- MAC Pocket: My Work | Projects slider and the Projects side (mockup E, LQ 12 Oct 2026) ---------- */
.pk-switch-row{display:flex;justify-content:center;padding:2px 16px 12px;flex-shrink:0}
.pk-switch{position:relative;width:260px;max-width:100%;height:40px;border:0;padding:0;border-radius:999px;background:#E3E8EF;cursor:pointer;box-shadow:inset 0 1px 3px rgba(19,41,75,.12)}
.pk-knob{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:34px;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(19,41,75,.2);transition:transform .22s ease}
.pk-switch.on .pk-knob{transform:translateX(100%)}
.pk-sw-l,.pk-sw-r{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#6B7A90;transition:color .2s}
.pk-sw-l{left:0;color:var(--ink)}.pk-sw-r{right:0}
.pk-switch.on .pk-sw-l{color:#6B7A90}.pk-switch.on .pk-sw-r{color:var(--ink)}
.pk-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.pk-pane[hidden]{display:none}
.pk-pane[data-pk-proj]{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 14px}
.pk-newproj{height:48px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-size:16px;font-weight:600;cursor:pointer}
.pk-newproj[hidden],.pk-addrow[hidden]{display:none}
.pkp-tools{display:flex;gap:8px;padding-bottom:10px}
.pkp-q{flex:1;min-width:0;height:44px;margin:0;border:1px solid #C9D6E3;border-radius:12px;padding:0 14px;font-size:16px;background:#fff}
.pkp-late{flex-shrink:0;height:44px;padding:0 16px;border-radius:999px;border:1px solid #C9D6E3;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.pkp-late.on{border-color:#B91C1C;background:#FEF2F2;color:#B91C1C}
.pkp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--soft);border-radius:10px;padding:3px;margin-bottom:12px}
.pkp-tabs button{height:36px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer}
.pkp-tabs button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(19,41,75,.15)}
.pkp-list{display:flex;flex-direction:column;gap:10px}
.pkp-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:12px 14px;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(19,41,75,.05)}
.pkp-top{display:flex;align-items:center;gap:8px;width:100%}
.pkp-top b{flex:1;min-width:0;font-size:16px;overflow-wrap:anywhere}
.pkp-badge{flex-shrink:0;font-size:12px;font-weight:700;color:#fff;background:#B91C1C;border-radius:999px;padding:3px 9px}
.pkp-go{flex-shrink:0;font-size:22px;line-height:1;color:var(--ink2)}
.pkp-prog{display:flex;align-items:center;gap:10px;width:100%}
.pkp-prog small{flex-shrink:0;font-size:12px;color:var(--ink2)}
.pkp-bar{flex:1;height:6px;border-radius:3px;background:#E3E8EF;overflow:hidden}
.pkp-bar i{display:block;height:100%;background:#15803D;border-radius:3px}
.pkp-next{font-size:13px;color:var(--ink2)}.pkp-next b{color:var(--ink);font-weight:600}.pkp-next .late{color:#B91C1C;font-weight:700}
.pkp-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:6px}
.pkp-head .pk-back{padding:2px 0}
.pkp-title{font-size:21px;font-weight:700;overflow-wrap:anywhere}
.pkp-tasks{display:flex;flex-direction:column;gap:10px}
.pkp-g{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4A5A70}
.pkp-g.late{color:#B91C1C}.pkp-g.week{color:#1F6FA8}.pkp-g.waiting{color:#6D28D9}.pkp-g.later{color:#4A5A70}.pkp-g.done{color:#15803D}
.pkp-who{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#EEF2FF;color:#3730A3;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pk-sheet-btn.danger{color:#DC2626}
/* Pocket project page: families joined by lines, foldable (LQ 12 Oct 2026: "connect the dependent tasks", "roll up or expand") */
.pkp-node{position:relative;display:flex;flex-direction:column;gap:10px}
.pkp-task{align-items:flex-start}
.pkp-kids{position:relative;display:flex;flex-direction:column;gap:10px;margin-left:29px;padding-left:20px}
.pkp-kids>.pkp-node::before{content:"";position:absolute;left:-20px;top:-10px;width:16px;height:38px;border-left:2px solid #7F95AE;border-bottom:2px solid #7F95AE;border-bottom-left-radius:10px;pointer-events:none}
.pkp-kids>.pkp-node:not(:last-child)::after{content:"";position:absolute;left:-20px;top:0;bottom:-10px;border-left:2px solid #7F95AE;pointer-events:none}
.pkp-node.folded>.pkp-kids{display:none}
.pkp-fold{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:28px;margin:-2px 0 -4px;padding:0 10px 0 8px;border:1px solid #C9D6E3;border-radius:999px;background:#F5F8FB;color:var(--accent-ink);font-size:12px;font-weight:600;cursor:pointer}
.pkp-fold .late{color:#B91C1C;font-weight:700}
.pkp-chev{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform .15s}
.pkp-node.folded>.pk-swipe .pkp-chev{transform:rotate(-90deg)}
.pkp-node.folded>.pk-swipe{overflow:visible}.pkp-node.folded>.pk-swipe>.pk-card{box-shadow:0 3px 0 -1px #fff,0 3px 0 0 #E3E8EF,0 6px 0 -2px #fff,0 6px 0 -1px #E3E8EF}
.pkp-head{position:relative}
.pkp-foldall{position:absolute;right:0;top:0;border:0;background:transparent;font-size:13px;font-weight:600;color:var(--accent-ink);padding:2px 0;cursor:pointer}
.pkp-task.is-done{opacity:1;background:#FBFCFD}.pkp-task.is-done .pk-title,.pkp-task.is-done .pk-meta{color:#8A97A8}.pkp-task.is-done .pk-box{background:#5FAE80;border-color:#5FAE80}
/* + on a Pocket project task card: add a task under it */
.pkp-side{flex-shrink:0;display:flex;align-items:center;gap:8px}
.pkp-plus{width:34px;height:34px;border:1.5px solid #C9D6E3;border-radius:10px;background:#fff;color:var(--navy);font-size:22px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pkp-plus:active{background:var(--tint)}
/* Phones and tablets zoom the page when you tap a box whose text is under 16px (LQ 12 Oct 2026: "that popup needs to stay
   within the mobile screen"). Keep every typing box at 16px on touch screens so nothing zooms. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px !important}}
.ask p{overflow-wrap:anywhere}
.ask{box-sizing:border-box;max-width:min(420px,100%)}
/* the Full App's task form shown as a Pocket bottom sheet */
.pkp-taskform{gap:0;padding-top:10px}
.pkp-form-title{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 12px;overflow-wrap:anywhere}
.pkp-taskform .pj-form .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.pkp-taskform .pj-form .actions button{height:46px;min-width:110px;border-radius:12px;font-size:16px;font-weight:600}
.pkp-taskform .pj-form > p.muted.small:first-child{display:none}
.pkp-side{gap:6px}
.pkp-side .pkp-plus{width:32px;height:32px;font-size:21px}
.pkp-minus{color:#DC2626;border-color:#F3C4C4}
.pkp-minus:active{background:#FEF2F2}
/* dragging a Project Task (Pocket and the Full App project screen) */
.pj-row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pj-del{color:#DC2626;border-color:#F3C4C4}
.td-armed{transform:scale(1.02);box-shadow:0 6px 18px rgba(19,41,75,.18);transition:transform .12s ease,box-shadow .12s ease;position:relative;z-index:2}
.td-src{opacity:.35}
.td-ghost{position:fixed !important;z-index:500;margin:0 !important;pointer-events:none;box-shadow:0 14px 34px rgba(19,41,75,.28);transform-origin:center;background:#fff;border-radius:14px;opacity:.97}
.td-ghost.td-no{outline:2px solid #DC2626}
.td-line{position:fixed;z-index:499;height:3px;border-radius:2px;background:var(--accent-fill);pointer-events:none}
.td-line::before{content:"";position:absolute;left:-5px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--accent-fill)}
.td-into{outline:2.5px solid var(--accent-fill);outline-offset:2px;background:#EEF5FB !important;position:relative}
.td-into::after{content:"Put under this task";position:absolute;right:10px;bottom:-11px;font-size:11px;font-weight:700;color:#fff;background:var(--accent-fill);border-radius:999px;padding:2px 8px;z-index:3}
body.td-dragging,body.td-dragging *{cursor:grabbing !important;-webkit-user-select:none !important;user-select:none !important}
.td-into::after{bottom:auto;top:-11px}
/* the "Put under" label floats above the task so nothing clips it (LQ, iPhone: "a blue message that pops up that i can't read") */
.td-into::after{content:none !important}
.td-into{outline-offset:-3px !important}
.td-tag{position:fixed;z-index:501;pointer-events:none;max-width:calc(100vw - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700;color:#fff;background:var(--accent-fill);border-radius:999px;padding:5px 12px;box-shadow:0 4px 12px rgba(19,41,75,.25)}
/* the full logo, centered at the bottom of Pocket (LQ 12 Oct 2026) */
.pk-logo{display:block;align-self:center;height:26px;width:auto;margin:2px auto 0}
/* Pocket trays: a project task says so (LQ 12 Oct 2026: "we need a way to denote that a particular task sitting in the trays is part of a Project") */
.pk-card.is-proj{border-left:4px solid #4F46E5;padding-left:11px}
.pk-projline{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:100%;border:0;background:#EEF2FF;color:#3730A3;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px 4px 8px;margin-top:-1px;cursor:pointer}
.pk-projline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Pocket: the logo in its own footer (LQ 12 Oct 2026: "the logo needs to go in its own footer") */
.pk-add{padding-bottom:12px}
.pk-foot{flex-shrink:0;background:var(--bg);border-top:1px solid #E3E8EF;padding:8px 0 calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:center}
.pk-foot .pk-logo{height:24px;margin:0}
/* who gets new tasks: a chip beside the add box on a project's page */
.pk-whopick{flex-shrink:0;height:48px;display:flex;align-items:center;gap:3px;border:1px solid #C9D6E3;border-radius:12px;background:#fff;padding:0 8px;cursor:pointer;color:var(--ink2)}
.pk-whopick[hidden]{display:none}
.pk-who-i{width:30px;height:30px;border-radius:50%;background:#EEF2FF;color:#3730A3;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pk-who-i.none{background:#F1F3F6;color:var(--ink2)}
.pk-who-c{font-size:11px}
/* Full App quick add: who gets it */
.pj-quick{display:flex;gap:8px;align-items:center}
.pj-quick input{flex:1;min-width:0}
.pj-quick-who{display:flex !important;align-items:center;gap:6px;margin:0 !important;font-size:13px;color:var(--ink2);white-space:nowrap}
.pj-quick-who select{max-width:150px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
/* the full Project Task form */
.pj-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pj-two label{margin-bottom:12px}
.pj-vis{margin:4px 0 4px}
@media (max-width:420px){.pj-two{grid-template-columns:1fr;gap:0}}
.pk-sheet.pkp-taskform{max-height:94dvh}
/* a passing message never blocks a tap on what's under it; only its Undo is tappable (real-touch run, small phone, 12 Oct 2026) */
.toast{pointer-events:none}
.toast .toast-undo,.toast button{pointer-events:auto}
/* ---------- MAC Pocket: My Work | Projects | Dictation (mockup F, LQ 13 Oct 2026) ---------- */
.pk-switch{position:relative;display:flex;width:340px;max-width:100%;height:40px;border:0;padding:0;border-radius:999px;background:#E3E8EF;box-shadow:inset 0 1px 3px rgba(19,41,75,.12)}
.pk-switch.two{width:260px}
.pk-switch .pk-knob{width:calc(33.333% - 2px);transition:transform .22s ease}
.pk-switch.two .pk-knob{width:calc(50% - 3px)}
.pk-switch[data-mode="work"] .pk-knob{transform:translateX(0)}
.pk-switch[data-mode="proj"] .pk-knob{transform:translateX(100%)}
.pk-switch[data-mode="dict"] .pk-knob{transform:translateX(200%)}
.pk-switch [data-pk-seg]{position:relative;z-index:1;flex:1;border:0;background:transparent;font-size:14px;font-weight:700;color:#6B7A90;cursor:pointer;padding:0}
.pk-switch [data-pk-seg][aria-checked="true"]{color:var(--ink)}
.pk-switch [data-pk-seg][hidden]{display:none}
.pk-add[hidden],.pk-talkbar[hidden]{display:none}
.pk-pane[data-pk-dict]{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 14px}
.pk-talkbar{flex-shrink:0;background:#fff;border-top:1px solid #E3E8EF;padding:10px 16px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600}
.pk-talk{width:68px;height:68px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(19,41,75,.3)}
.pk-talk:active{transform:scale(.96)}
.pkd-head{padding:4px 0 10px}
.pkd-list,.pkd-tasks{display:flex;flex-direction:column;gap:10px}
.pkd-card{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:12px 14px;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(19,41,75,.05)}
.pkd-top{display:flex;align-items:center;gap:8px;width:100%;color:var(--ink2)}
.pkd-top b{flex:1;font-size:15px;color:var(--ink)}
.pkd-top small{font-size:12px}
.pkd-prev{font-size:13px;color:var(--ink2);line-height:1.35;overflow-wrap:anywhere}
.pkd-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.pkd-badge.open{background:#E0EEF9;color:#1F6FA8}.pkd-badge.done{background:#DCFCE7;color:#15803D}.pkd-badge.work{background:#FEF3C7;color:#92400E}
.pkd-badge.none{background:#F1F3F6;color:#4A5A70}.pkd-badge.fail{background:#FEE2E2;color:#B91C1C}
.pkd-spin{display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pkdspin .8s linear infinite}
@keyframes pkdspin{to{transform:rotate(360deg)}}
.pkd-sub{font-size:13px;color:var(--ink2)}
.pkd-said{background:#fff;border:1px solid #E3E8EF;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;margin:4px 0 6px}
.pkd-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.pkd-task{align-items:center}
.pkd-task.is-placed{background:#F7FBF8}
.pkd-chip{font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px}
.pkd-chip.day{background:#E0EEF9;color:#1F6FA8}.pkd-chip.proj{background:#EEF2FF;color:#3730A3}.pkd-chip.who{background:#F1F3F6;color:var(--ink)}.pkd-chip.placed{background:#DCFCE7;color:#15803D}
.pkd-more{flex-shrink:0;width:34px;height:34px;border:1px solid #C9D6E3;border-radius:10px;background:#fff;color:var(--ink2);font-size:18px;cursor:pointer}
.pkd-tick{flex-shrink:0;font-size:18px;color:#15803D}
.pkd-rec{align-items:center;text-align:center;gap:10px}
.pkd-rec-h{font-size:18px;font-weight:700;color:var(--ink)}
.pkd-mic{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;margin:4px auto}
.pkd-pulse{position:absolute;inset:0;border-radius:50%;background:#DC2626;animation:pkdpulse 1.4s ease-out infinite}
@keyframes pkdpulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.pkd-dot{position:relative;width:72px;height:72px;border-radius:50%;background:#DC2626;color:#fff;display:flex;align-items:center;justify-content:center}
.pkd-dot svg{width:30px;height:30px}
.pkd-time{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.pkd-tip{margin:0 auto;max-width:320px;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.pkd-rec .pk-sheet-btn{width:100%;text-align:center}
@media (prefers-reduced-motion:reduce){.pkd-pulse,.pkd-spin{animation:none}}
.pkd-note{font-size:13px;color:var(--ink2);line-height:1.35;margin-top:-2px;overflow-wrap:anywhere}
/* delete a dictation: swipe its card left, or the button on its page */
.pkd-lsw{border-radius:14px}
.pk-acts.pkd-acts1{width:96px}
.pkd-lsw .pkd-card{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pkd-delall{display:block;margin:18px auto 6px;height:44px;padding:0 18px;border-radius:12px;font-size:15px;font-weight:600}

/* Pocket: a task dragged onto a tray (12 Oct 2026); the menu sheet never selects text under a held finger */
.pk-tray.pk-drop{background:var(--tint);box-shadow:0 0 0 2px var(--c) inset;transform:scale(1.06);transition:transform .12s ease}
.pk-sheet{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* New and Edit Client: color, people, access (spec core-client-setup, 13 Oct 2026) */
.cf-field{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.cf-lab{font-weight:600;font-size:13px;color:var(--ink2)}
.cf-people,.cf-access{border:1px solid var(--line3);border-radius:10px;padding:10px 12px 8px;margin:6px 0 10px}
.cf-people legend,.cf-access legend{font-weight:600;font-size:13px;color:var(--ink2);padding:0 4px}
.cf-people legend small{font-weight:400;color:var(--line2);margin-left:4px}
.cf-person{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px;margin-bottom:8px}
.cf-person input{width:100%;min-width:0}
.cf-radio{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-weight:500;margin:4px 0}
.cf-radio input{margin:0 4px 0 0}
.cf-radio small{flex-basis:100%;margin-left:22px;color:var(--ink2);font-weight:400}
.c-swatch{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;vertical-align:middle}
@media (max-width:520px){.cf-person{grid-template-columns:1fr}}
/* Vendors on This Event (spec calendar-event-vendors, 13 Oct 2026) */
.ef-vendors{border:1px solid var(--line3);border-radius:10px;padding:8px 12px 6px;margin:4px 0 8px}
.ef-vendors legend{font-weight:600;font-size:13px;color:var(--ink2);padding:0 4px}
.ef-vendors legend small{font-weight:400;color:var(--line2);margin-left:4px}
.kid-code-line{margin:10px 0 6px}.cl-lock{margin:10px 0}.cl-lock .btn{margin-left:6px}
.ch-who{display:flex;flex-wrap:wrap;gap:4px}.ch-who button{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;margin:0;width:auto}.ch-who button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.a-grp{margin:0 0 14px}.a-grp-h{font-weight:800;color:var(--navy);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid var(--line)}.a-grp-r,.a-grp-t{display:flex;justify-content:space-between;align-items:baseline;padding:7px 8px 7px 14px;border-bottom:1px solid var(--line);font-size:14px}.a-grp-t{border-bottom:none;font-weight:700;color:var(--navy);background:var(--head);border-radius:6px;margin-top:4px}.a-grp-all{padding-left:8px;font-size:15px}
/* the full menu, with locks (option C, LQ 13 Oct 2026) */
.nav-item .lock-tag{margin-left:auto;width:22px;height:22px;border-radius:999px;background:#FEF3C7;color:#8A5A00;display:flex;align-items:center;justify-content:center;flex:none}
.lock-page{min-height:100%;flex:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.lock-card{max-width:470px;width:100%;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 28px;box-shadow:0 2px 10px rgba(20,24,40,.06)}
.lock-ic{width:52px;height:52px;border-radius:14px;background:#E8F3FA;color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.lock-card h2{font-size:20px;margin:0 0 8px}.lock-card p{color:var(--ink2);line-height:1.5;margin:0 0 14px}
.lock-card ul{text-align:left;color:var(--ink2);margin:0 auto 18px;padding-left:18px;line-height:1.7;display:inline-block}
.lock-card .btn{height:40px;padding:0 18px;border-radius:10px;font-weight:600;cursor:pointer}.lock-note{margin:12px 0 0 !important}
/* Family page child rows: round buttons with a label (option C, LQ 13 Oct 2026) */
.m-acts{margin-left:auto;display:flex;gap:2px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.m-act{display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--ink2);padding:4px 5px;border-radius:8px;cursor:pointer;min-width:54px;background:none;border:0;margin:0}
.m-act .ic{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff;color:var(--accent-ink)}
.m-act:hover .ic,.m-act:focus-visible .ic{background:#E8F3FA;border-color:var(--accent)}
.m-act.danger{border:0;background:none}.m-act.danger .ic{color:var(--danger)}.m-act.danger:hover .ic{background:#FDECEC;border-color:#F3C7C7}
@media (max-width:720px){.m-acts{width:100%;justify-content:flex-start;margin-top:8px}}
.wk-acct{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);background:#E8F3FA;border-radius:5px;padding:1px 6px;margin:0 0 5px}
.a-free{display:grid;gap:8px;margin:8px 0 12px}.a-free label{margin:0}.a-free .btn{justify-self:start;height:36px;padding:0 14px;border-radius:8px}
.lock-card.upsell .lock-ic{font-size:26px}

/* the ask dialog's longer body (Google review step, LQ 14 Oct 2026). Same size as the question: LQ "i can't see the smaller print" */
.ask-more{text-align:left;font-size:15px;line-height:1.55;color:var(--ink)}
.ask-more p{margin:0 0 10px}.ask-more ol{margin:0 0 10px;padding-left:22px}.ask-more li{margin:2px 0}

/* one-day all-day items are as wide as their words, not the whole day; multi-day bars still stretch (LQ 14 Oct 2026) */
/* ...and a day's one-day pills all take the longest one's width (LQ 14 Oct 2026: "the same length as the longest pill") */
.tg-allday .adcell:not(.adlabel){display:grid;grid-template-columns:minmax(0,max-content) 1fr;align-content:start}
.tg-allday .adcell > *{grid-column:1;min-width:0}.tg-allday .adcell > .ad-multi{grid-column:1 / -1}
.adpill{box-sizing:border-box}.adpill.has-tick{padding-right:24px}
.mg-ad{display:grid;grid-template-columns:minmax(0,max-content)}.mg-ad > .chip{min-width:0;box-sizing:border-box}

/* ---------- First-time walkthroughs (mac_172) ---------- */
.wt-layer{position:fixed;inset:0;z-index:9000;pointer-events:none}
.wt-layer.dim{background:rgba(19,41,75,.45);pointer-events:auto}
.wt-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(19,41,75,.45);outline:3px solid #C9A227;outline-offset:2px;pointer-events:none;transition:all .2s}
.wt-card{position:fixed;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(19,41,75,.3);pointer-events:auto;color:var(--ink,#26324A)}
.wt-card.wt-tip{width:min(340px,calc(100vw - 24px));padding:16px 18px}
.wt-card.wt-tip .wt-t{display:block;font-size:17px;color:#13294B;margin-bottom:4px}
.wt-card.wt-tip p{margin:0;line-height:1.45;font-size:15px}
.wt-card.wt-c{left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 24px));padding:28px 30px 24px;text-align:center}
.wt-card.wt-c h2{font-size:24px;color:#13294B;margin:4px 0 8px}.wt-card.wt-c p{color:#3E4C63;line-height:1.5;margin:0 0 18px;font-size:16px}
.wt-logo{height:30px;margin-bottom:8px}
.wt-acts{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.wt-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.wt-foot .lnk{margin-right:12px}
.wt-card.wt-hub{width:min(620px,calc(100vw - 24px));text-align:left}
.wt-kick{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#1F5FAD;text-transform:uppercase}
.wt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.wt-grid{grid-template-columns:1fr}}
.wt-part{position:relative;text-align:left;font:inherit;border:2px solid #CFE0F0;border-radius:14px;padding:14px 16px;background:#fff;cursor:pointer}
.wt-part b{display:block;font-size:16px;color:#13294B}.wt-part small{font-size:13px;color:#4A5568}
.wt-part:hover:not(.done){border-color:#1F5FAD}
.wt-part.done{background:#F3F4F6;border-color:#E3E7EE;cursor:default}.wt-part.done b,.wt-part.done small{color:#9AA3AF}
.wt-done{position:absolute;top:10px;right:10px;background:#16A34A;color:#fff;font-size:12px;font-weight:800;border-radius:10px;padding:2px 8px}
.wt-bars{display:flex;gap:6px}.wt-bars i{width:28px;height:6px;border-radius:3px;background:#E3E7EE}.wt-bars i.on{background:#16A34A}
.wt-list .wt-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #EEF1F5;padding:7px 0;font-size:14.5px}
.wt-row b{color:#13294B;font-weight:600}.wt-row .lnk{margin-left:12px}
.wt-st{font-size:12.5px}.wt-st.ok{color:#16A34A}.wt-st.skip{color:#B45309}.wt-st.new{color:#8A93A3}
.wt-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #EEF1F5;padding-top:10px;margin-top:2px;flex-wrap:wrap;gap:8px}
.wt-card.wt-tip.docked{width:calc(100vw - 24px);padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
.wt-arrow{position:absolute;width:18px;height:18px;background:#fff;transform:rotate(45deg)}.wt-arrow.up{top:-8px}.wt-arrow.down{bottom:-8px}
/* walkthrough cards in a soft cool blue so they stand apart from the app's white cards (LQ 18 Oct 2026: option A) */
.wt-card{background:#EAF3FB;border:1.5px solid #59A5D6}
.wt-arrow{background:#EAF3FB;border:1.5px solid #59A5D6}.wt-arrow.down{border-top:0;border-left:0}.wt-arrow.up{border-bottom:0;border-right:0}
.wt-part{background:#fff}
/* all your calendars on one view (mac_175): one group per other account, a switch for the whole account, an arrow to pick calendars */
.lgrp{width:100%;background:#fff;border:1px solid #DCE6F0;border-radius:10px;padding:6px 8px;margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.lgrp .rchip.cal.layer{width:100%}.lgrp .rchip.cal.layer span{flex-direction:row;gap:4px;align-items:baseline}
.lgh{display:flex;align-items:center;gap:8px;width:100%}
.lgh .ln{flex:1;min-width:0;font-weight:700;font-size:12.5px;line-height:1.2;overflow:hidden}.lgh .ln small{display:block;font-weight:500;color:var(--ink2);font-size:10.5px}
.lgrp.off .ln{color:#9AA5B5}
.lsw{width:30px;height:17px;border-radius:9px;background:#CBD3DE;border:0;position:relative;flex:none;cursor:pointer;padding:0}
.lsw:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .15s}
.lsw.on{background:var(--accent)}.lsw.on:after{left:15px}
.lar{border:1px solid #D5DBE5;background:#F3F6FA;color:var(--navy);font-size:13px;line-height:1;cursor:pointer;padding:5px 8px;border-radius:7px}.lar:hover{background:#E6EDF6}
.otag.acct{color:var(--navy);background:rgba(19,41,75,.07);border-color:rgba(19,41,75,.15)}
.home-tag{display:inline-block;background:var(--navy);color:#fff;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:1px 5px;vertical-align:2px;margin-left:4px}
.acct-row [data-remove-acct]{display:block;border:0;background:none;padding:2px 0 0;color:#B42318;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.acct-row [data-make-home]{display:block;border:0;background:none;padding:2px 0 0;color:#2F6FA5;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
/* Plan and Billing: each part is its own section (LQ 18 Oct 2026: "can we get some separation here?") */
.s-sec h3{font-size:15px;margin:0 0 8px;color:var(--navy)}
.s-sec>.s-row:first-of-type,.s-sec>h3+.s-row{border-top:0;margin-top:0;padding-top:0}
.s-sec:has(> .s-row[hidden]:only-child){display:none}
/* option A (LQ 18 Oct 2026: "go with A"): on Plan and Billing each part is its own card; the outer card steps aside */
.s-pane>.card[data-s-account]{background:transparent;border:0;box-shadow:none;padding:0}
[data-s-account]>h2{display:none}
[data-s-account] .s-sec{background:#fff;border:1px solid var(--line3);border-radius:14px;padding:18px;margin-top:14px}
[data-s-account] .s-sec:first-of-type{margin-top:0}
/* who sees each birthday (mac_179) */
.bd-tag{display:inline-block;font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.bd-tag.fam{background:#EAF3FB;color:#2F6FA5}.bd-tag.me{background:#F1F3F6;color:#4A5B7A}
.su-help{color:#2F6FA5;font-weight:600;text-decoration:none}.su-help:hover{text-decoration:underline}
/* plan invitation welcome (mac_173) */
.pw-card{text-align:center}.pw-card form{text-align:left}.pw-logo{width:220px;height:auto;margin:0 auto 10px;display:block}
.pw-card h1{font-size:26px;margin:6px 0 6px}.pw-lead{margin:0 0 4px;color:var(--ink2)}.pw-free{margin:0 0 16px;font-weight:700;color:#2E7D4F}
.pw-card [data-pw-owner]{text-align:center;margin:10px 0 0}.pw-card [data-pw-later]{display:block;margin:8px auto 0}
.pi-letter{margin:4px 0}.pi-letter summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--navy)}.pi-letter textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;line-height:1.5;margin:8px 0;border:1.5px solid #D5DBE5;border-radius:8px;padding:10px}
.pi-tpl{border:1px solid #E3E7EE;border-radius:10px;padding:12px;margin:10px 0;background:#FBFCFE}.pi-tpl textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;line-height:1.5;border:1.5px solid #D5DBE5;border-radius:8px;padding:10px}.pi-tpl-acts{display:flex;gap:8px;align-items:center;margin-top:8px}
.pi-prev{background:#F3F7FB;border-left:3px solid #2F6FA5;border-radius:6px;padding:8px 12px;margin:6px 0 0}.pi-prev p{margin:4px 0 0;font-family:Georgia,serif;font-size:14px;line-height:1.55;color:#222}.pi-tpl textarea[name=lt_ask]{min-height:0}
.admin .a-off{display:none!important}.a-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.a-tile{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid #E3E7EE;border-radius:10px;background:#FBFCFE;padding:14px;font:inherit;cursor:pointer}.a-tile:hover{border-color:#2F6FA5}.a-tile b{color:#13294B;font-size:15px}.a-tile span{color:#5F6673;font-size:13px}
.hh-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0 10px}.hh-pills span{background:#EAF3FB;color:#13294B;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}.hh-form{display:flex;flex-direction:column;gap:8px;text-align:left;margin:8px 0 0}.hh-form label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px;color:#13294B}.hh-form input{font:inherit;padding:10px 12px;border:1.5px solid #D5DBE5;border-radius:8px}.hh-line{margin:10px 0 0;color:#2F6FA5}
/* Invite page, option A (LQ 18 Oct 2026) */
.pi-lrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #EEF1F5}.pi-lrow:first-child{border-top:0}.pi-lrow b{flex:1;color:#13294B}
[data-a-pi-new]{margin-top:8px}
.pi-editor label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px;color:#13294B;margin:0 0 8px}
.pi-editor input,.pi-editor textarea{font:inherit;font-weight:400;font-size:14px;padding:9px 11px;border:1.5px solid #D5DBE5;border-radius:8px;width:100%;box-sizing:border-box}
.pi-editor textarea{line-height:1.5}.pi-ed-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pi-ed-acts{display:flex;gap:8px;align-items:center}.pi-ed-acts .danger-lite{margin-left:auto;color:#B42318}
.pi-send{display:grid;grid-template-columns:minmax(240px,1fr) 1.3fr;gap:16px;align-items:start}
.pi-mail{border:1px solid #E3E7EE;border-radius:10px;padding:14px 18px;background:#fff;font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:1.6;color:#222}
.pi-mail p{margin:0 0 10px}.pi-mail small{display:block;font-family:Inter,Arial,sans-serif;margin:0 0 8px}.pi-mail small:last-child{margin:6px 0 0}
.pi-mail .auto{background:#EAF3FB;border-left:3px solid #2F6FA5;padding:4px 10px;border-radius:4px}
.pi-mail .cta{display:inline-block;background:#13294B;color:#fff;font-family:Arial,sans-serif;font-weight:700;font-size:13px;padding:8px 16px;border-radius:7px}
.pi-sent-h{margin:16px 0 4px;color:#13294B;font-size:14px}
@media (max-width:820px){.pi-send,.pi-ed-row{grid-template-columns:1fr}}
.home-note{display:flex;flex-direction:column;gap:6px;background:#fff;border:1.5px solid #D5DBE5;border-radius:12px;padding:10px 12px;margin:8px 0 0;font-size:13px;line-height:1.4;color:#13294B}.home-note .lnk{align-self:flex-start;border:1px solid #C9CFD8;border-radius:999px;padding:3px 10px;background:#fff;font-size:12.5px;color:#13294B;cursor:pointer}
/* many clients (LQ 18 Oct 2026, mockup many-clients.png) */
.lcl{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1.5px solid #D5DBE5;border-radius:8px;margin:4px 0 4px;font-weight:700;color:#13294B;font-size:13.5px;background:#fff}
.lcl span{flex:1}.lcl small{font-weight:500;color:#5F6673;margin-left:4px}.lcl.off span{color:#8A93A3}
.lsw.sm{transform:scale(.82);transform-origin:left center}
.cpick{background:#fff;border:1.5px solid #D5DBE5;border-radius:10px;padding:8px;margin:4px 0 6px}
.cpick-q{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:6px 9px;border:1.5px solid #D5DBE5;border-radius:8px}
.cpick-acts{display:flex;gap:12px;margin:6px 2px}.cpick-acts .lnk{font-size:12px;font-weight:700;color:#2F6FA5;background:none;border:0;padding:0;cursor:pointer}
.cpick-list{max-height:260px;overflow-y:auto}
.cpick-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 2px;color:#13294B;cursor:pointer}
.cpick-row i{width:10px;height:10px;border-radius:50%;flex:none}
.rchip.more-clients{font-weight:700}

/* Scheduled Jobs (mac_188) */
.job-row { cursor: pointer; }
.job-row.job-bad { border-color: #E8B4AE; background: #FDF5F4; }
.job-runs { margin: -2px 0 10px; padding: 8px 12px; border: 1px solid var(--line, #E3E7EE); border-radius: 10px; background: #fff; }
.job-run { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #F0F2F6; font-size: 13px; }
.job-run:last-child { border-bottom: 0; }
.job-run > span:first-child { min-width: 130px; color: #4A5B7A; }
.job-run small { flex: 1; min-width: 0; color: #4A5B7A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* search: a magnifying glass above the calendar opens the search panel, field on top (LQ 19 Oct 2026) */
.hsearch{display:flex;align-items:center}
.hsearch [data-search-open]{display:inline-flex;align-items:center;justify-content:center}
.panel-search{display:flex;align-items:center;gap:8px;margin:14px 16px 2px;background:#fff;border:1px solid #B9D6EA;border-radius:10px;padding:0 10px;height:40px;color:#7B8EA8}
.panel-search[hidden]{display:none}
.panel-search svg{width:16px;height:16px;flex:none}
.panel-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(75,156,211,.18)}
.panel-search input.search{display:block !important;flex:1;width:auto;min-width:0;border:0;outline:0;background:none;height:36px;padding:0;margin:0;font:inherit;font-size:14px;color:var(--navy);box-shadow:none}

/* the plan picked on the website, shown on the sign-in card (LQ 19 Oct 2026) */
.signin-plan{background:#EEF6FC;border:1px solid #CFE3F3;border-radius:10px;padding:10px 12px;font-size:14px;color:var(--navy);margin:4px 0 12px}
.oauth-btn img{width:18px;height:18px;flex:none} /* the providers' official marks (LQ 19 Oct 2026) */

/* Free Access, option B (LQ 19 Oct 2026: "this font is too small"): a table, Change opens a side panel */
.fa .fa-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}.fa .fa-hd h3{font-size:20px;margin:0}.fa .fa-sub{font-size:14px;font-weight:600;color:#6B7A92;margin-left:6px}
.fa .fa-lead{font-size:15px;color:var(--ink2);margin:8px 0 14px;line-height:1.45}
.fa-tabs{display:flex;gap:8px;margin-bottom:10px}.fa-tabs button{font:inherit;font-size:15px;font-weight:600;border:1px solid #C9D3E0;border-radius:999px;padding:6px 14px;background:#fff;color:var(--navy);cursor:pointer}.fa-tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.fa-table{width:100%;border-collapse:collapse;font-size:15px}.fa-table th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6B7A92;text-align:left;padding:8px 8px;border-bottom:1px solid var(--line)}
.fa-table td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--navy)}.fa-table td small{display:block;font-size:13px;color:#6B7A92;margin-top:2px}.fa-table td:last-child{text-align:right;white-space:nowrap}
.fa .fa-table + p,.fa [data-a-free-list] > p{font-size:15px}
.fa-form{display:flex;flex-direction:column;gap:12px}.fa-step{border:1px solid var(--line);border-radius:12px;padding:12px 14px}.fa-step h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6B7A92;margin:0 0 8px}
.fa-in{font:inherit;font-size:16px;width:100%;border:1px solid #C9D3E0;border-radius:10px;padding:10px 12px}.fa-date{margin-top:10px}
.fa-chips{display:flex;flex-wrap:wrap;gap:8px}.fa-chips button{font:inherit;font-size:15px;font-weight:600;border:1px solid #C9D3E0;border-radius:999px;padding:7px 13px;background:#fff;color:var(--navy);cursor:pointer}.fa-chips button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.fa-until{margin:8px 0 0;font-size:14px}.fa-acct{font-size:16px;margin:0}
.fa-results{display:flex;flex-direction:column;gap:6px;margin-top:8px}.fa-hit{font:inherit;font-size:15px;text-align:left;border:1px solid #CFE3F3;background:#F7FBFE;border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--navy)}.fa-hit.on{border-color:var(--navy);background:#EEF2FF}
.fa-acts{display:flex;gap:10px}.fa-end{border-top:1px solid var(--line);padding-top:12px}.fa-end .danger{color:#B91C1C;font-weight:700}
@media (max-width:700px){.fa-table th:nth-child(4),.fa-table td:nth-child(4){display:none}}
.a-find input{font-size:16px;padding:10px 12px;border-radius:10px;min-height:42px} .a-find .btn{font-size:15px} /* bigger, easier to read (LQ 19 Oct 2026) */
.fa-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.fa-opt{text-transform:none;letter-spacing:0;font-weight:500}.fa-how{margin:8px 0 0;font-size:14px}.fa-wait td{background:#FBFCFE}
.panel.modal.wide{max-width:640px}
.pi-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Dashboard and Members open from Profile's tabs, not the menu (LQ 19 Oct 2026) */
.rail .nav-item[data-nav="dashboard"],.rail .nav-item[data-nav="members"]{display:none !important}
.prof-h{font-size:24px;margin:0 0 10px}.prof-tabs{margin-bottom:16px}