/* 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}
.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)}
.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-radius:4px 4px 0 4px;padding:1px 7px;line-height:15px;color:var(--ink);vertical-align:top}
.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:12px;background:#fff;display:flex;flex-direction:column}
.plan.on{border-color:var(--accent);box-shadow:0 0 0 2px #E8F3FA}.plan.far{opacity:.55}
.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:16px;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)}
.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 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;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:12px;justify-content:center;margin:18px 0}
.kid-pin span{width:46px;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:6px 0 0}
.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: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:7px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.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 .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.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) */
.s-tabs{display:flex;gap:4px;border-bottom:2px solid 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:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap}
.s-tabs button:hover{color:var(--navy)}.s-tabs button.on{color:var(--navy);border-bottom-color:var(--navy)}
.s-pane{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;align-items:start}
.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}