/* ===================================================================== Esta design system */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque Variable";font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/bricolage.woff2) format("woff2")}

:root{
  --cream:#F5F0E6; --ivory:#FFFCF6; --ink:#1E2A23; --ink-2:#3A4840; --muted:#6F6A60; --line:#E6DDCC; --line-2:#EFE8DA;
  --sage:#7E9C86; --sage-d:#2F5B48; --sage-dd:#244838; --sage-l:#E2EADF; --sage-ll:#EEF3EB;
  --peach:#F2CDB4; --peach-l:#FBE9DD; --butter:#F4DE95; --butter-l:#FBF2D3; --lav:#D9D3EC; --lav-l:#EEEBF7; --warm:#8E877B;
  --pos:#2F7A50; --pos-bg:#E3F0E6; --neg:#A9542C; --neg-bg:#FBE6DA; --warn:#8A6510; --warn-bg:#FAF0CC; --info-bg:#E8E5F5;
  --focus:#2F5B48; --shadow-1:0 1px 2px #1e2a230d,0 6px 18px -8px #1e2a2326; --shadow-2:0 18px 50px -18px #1e2a2340; --shadow-btn:0 1px 0 #ffffff33 inset,0 2px 0 #1a3a2c,0 6px 14px -6px #1e2a2366;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:30px;
  --font:"Inter Variable",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bricolage Grotesque Variable","Inter Variable",ui-sans-serif,system-ui,sans-serif;
  --side:256px; --top:68px; --dock:74px; --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
[data-theme=dark]{
  --cream:#141A16; --ivory:#1C241F; --ink:#EEF1EA; --ink-2:#CDD5CC; --muted:#A39E93; --line:#2E3A33; --line-2:#26302A;
  --sage:#93B39C; --sage-d:#A9CDB4; --sage-dd:#C2E0CA; --sage-l:#24342A; --sage-ll:#1F2C24;
  --peach:#6B4A39; --peach-l:#33281F; --butter:#6A5A26; --butter-l:#2F2A18; --lav:#463F63; --lav-l:#26233A; --warm:#A39E93;
  --pos:#8FD0A6; --pos-bg:#1F3529; --neg:#F0A27C; --neg-bg:#3A261C; --warn:#EBCB74; --warn-bg:#352D14; --info-bg:#2A2740;
  --focus:#A9CDB4; --shadow-1:0 1px 2px #0005,0 8px 22px -10px #0008; --shadow-2:0 20px 60px -20px #000a; --shadow-btn:0 2px 0 #0d1f16,0 6px 14px -6px #0009;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--sage) var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.55 var(--font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;letter-spacing:-.006em;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
img,svg{display:block}
a{color:var(--sage-d)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.08;font-variation-settings:"wdth" 100}
p{margin:0}
.num,.money,table td.n{font-variant-numeric:tabular-nums lining-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip{position:absolute;left:12px;top:-60px;z-index:3000;background:var(--ink);color:var(--ivory);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* ---------- scrollbars */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--sage) 70%,transparent);border-radius:99px;border:3px solid var(--cream);transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--sage-d)}
.scroll-x{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;overscroll-behavior-x:contain}
.scroll-x>*{scroll-snap-align:start;flex:0 0 auto}
.scroll-x::-webkit-scrollbar{height:6px}
.scroll-x::-webkit-scrollbar-thumb{border-width:0;background:var(--line)}
@media (pointer:coarse){::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{border:0}}

/* ---------- type helpers */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.big-num{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pos{color:var(--pos)!important}.neg{color:var(--neg)!important}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- buttons */
.btn{--bg:var(--ivory);--fg:var(--ink);--bd:var(--line);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:650;font-size:14.5px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s ease,background .15s,box-shadow .15s,border-color .15s;-webkit-tap-highlight-color:transparent;position:relative}
.btn .ico{width:18px;height:18px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{--bg:var(--sage-d);--fg:#fff;--bd:var(--sage-d);box-shadow:var(--shadow-btn)}
[data-theme=dark] .btn-primary{--fg:#11251a}
.btn-primary:hover{--bg:var(--sage-dd)}
.btn-primary:active{box-shadow:0 0 0 #0000}
.btn-secondary{--bg:var(--ivory);--bd:var(--sage);--fg:var(--sage-dd)}
.btn-secondary:hover{--bg:var(--sage-ll)}
.btn-quiet{--bg:var(--sage-l);--bd:transparent;--fg:var(--sage-dd)}
.btn-quiet:hover{--bg:color-mix(in srgb,var(--sage-l) 70%,var(--sage) 30%)}
.btn-ghost{--bg:transparent;--bd:transparent;--fg:var(--ink-2)}
.btn-ghost:hover{--bg:var(--sage-ll)}
.btn-danger{--bg:var(--neg);--bd:var(--neg);--fg:#fff}
[data-theme=dark] .btn-danger{--fg:#2a140a}
.btn-sm{min-height:36px;padding:6px 14px;font-size:13.5px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
[data-enter][aria-busy=true]{cursor:progress;opacity:.75}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-color:var(--fg) transparent var(--fg) transparent;animation:spin .8s linear infinite}
.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:14px;border:1.5px solid var(--line);background:var(--ivory);color:var(--ink-2);cursor:pointer;transition:background .15s,transform .15s,border-color .15s;position:relative}
.icon-btn:hover{background:var(--sage-ll);border-color:var(--sage)}
.icon-btn:active{transform:scale(.95)}
.icon-btn[data-tip]:hover::after,.icon-btn[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ivory);font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;z-index:50;pointer-events:none}
.text-btn{background:none;border:0;padding:8px 4px;color:var(--sage-d);font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:8px;min-height:40px}
.text-btn:hover{text-decoration:underline;text-underline-offset:4px}
.text-btn .ico{width:16px;height:16px}

/* ---------- form controls */
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field>span,.label{font-size:13px;font-weight:650;color:var(--ink-2)}
.field small,.hint{font-size:12.5px;color:var(--muted)}
.field .err{color:var(--neg);font-weight:600;font-size:13px}
.form-summary{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border-radius:var(--r);background:var(--neg-bg);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--neg) 35%,transparent);font-size:14px}
.form-summary>.ico{color:var(--neg);flex:0 0 auto;margin-top:2px}.form-summary ul{margin:6px 0 0;padding-left:18px}.form-summary li{margin:2px 0}
.linkish{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--neg);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.input,.select,.textarea{width:100%;min-height:46px;padding:11px 14px;border-radius:13px;border:1.5px solid var(--line);background:var(--ivory);color:var(--ink);font-size:15.5px;transition:border-color .15s,box-shadow .15s}
.textarea{min-height:88px;resize:vertical;line-height:1.5}
.input:hover,.select:hover,.textarea:hover{border-color:color-mix(in srgb,var(--sage) 60%,var(--line))}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--sage-d);box-shadow:0 0 0 4px color-mix(in srgb,var(--sage) 25%,transparent)}
.input[aria-invalid=true],.select[aria-invalid=true]{border-color:var(--neg);box-shadow:0 0 0 4px color-mix(in srgb,var(--neg) 15%,transparent)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E9C86' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:40px}
.money-input{position:relative}
.money-input .cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted);pointer-events:none;font-size:15px}
.money-input .input{padding-left:calc(22px + var(--cw,1ch))}
.row{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:14px}
.stack{display:grid;gap:16px}
.seg{display:flex;gap:4px;padding:4px;background:var(--sage-ll);border-radius:999px;border:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-weight:650;font-size:13.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;min-height:38px}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--ivory);color:var(--ink);box-shadow:var(--shadow-1)}
/* custom checkbox / radio */
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:10px 12px;border-radius:14px;transition:background .15s;min-height:44px;position:relative}
.check:hover{background:var(--sage-ll)}
.check input{position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.check .box{width:24px;height:24px;flex:0 0 24px;border-radius:8px;border:2px solid var(--sage);background:var(--ivory);display:grid;place-items:center;transition:background .15s,border-color .15s,transform .15s;margin-top:1px}
.check .box svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .2s ease}
.check input:checked+.box{background:var(--sage-d);border-color:var(--sage-d);transform:scale(1.04)}
[data-theme=dark] .check .box svg{stroke:#11251a}
.check input:checked+.box svg{stroke-dashoffset:0}
.check input:focus-visible+.box{outline:3px solid var(--focus);outline-offset:2px}
.check input:disabled+.box{opacity:.45}
.check:has(input:disabled){cursor:not-allowed;opacity:.7}
.check input[type=radio]+.box{border-radius:50%}
.check .txt{display:grid;gap:2px;font-size:14.5px}
.check .txt small{color:var(--muted);font-size:13px}
/* file picker */
.file{display:grid;gap:8px}
.file-drop{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px dashed var(--sage);border-radius:16px;background:var(--sage-ll);cursor:pointer;transition:background .15s,border-color .15s}
.file-drop:hover,.file-drop.drag{background:var(--sage-l);border-color:var(--sage-d)}
.file-drop .fi{width:46px;height:46px;border-radius:14px;background:var(--ivory);display:grid;place-items:center;color:var(--sage-d);flex:0 0 auto;box-shadow:var(--shadow-1)}
.file-drop .ft{flex:1;min-width:0;display:grid;gap:2px}
.file-drop .ft b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-drop .ft small{font-size:12.5px;color:var(--muted)}
.file-drop .fb{font-weight:700;font-size:13.5px;color:var(--sage-dd);background:var(--ivory);padding:8px 14px;border-radius:999px;border:1.5px solid var(--sage)}
.file input[type=file]:focus-visible+.file-drop{outline:3px solid var(--focus);outline-offset:3px}
.file-chosen{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--ivory);border:1px solid var(--line);font-size:13.5px}
.file-chosen .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter{height:6px;border-radius:9px;background:var(--line-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:9px;background:var(--neg);transition:width .2s,background .2s}

/* ---------- pills & chips */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--sage-l);color:var(--sage-dd);white-space:nowrap;line-height:1.4}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.pill.plain::before{display:none}
.pill.paid,.pill.settled,.pill.ok{background:var(--pos-bg);color:var(--pos)}
.pill.due,.pill.partial,.pill.soon,.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.overdue,.pill.open,.pill.bad{background:var(--neg-bg);color:var(--neg)}
.pill.upcoming,.pill.info{background:var(--info-bg);color:var(--ink-2)}
.pill.muted{background:var(--line-2);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid var(--line);background:var(--ivory);font-weight:650;font-size:13.5px;cursor:pointer;min-height:42px;white-space:nowrap;transition:background .15s,border-color .15s}
.chip .chip-art{width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--sage-l)}
.chip .chip-art .scene{width:100%;height:100%}
.chip[aria-pressed=true]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.chip:hover{border-color:var(--sage)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:13.5px;background:var(--peach-l);color:var(--ink);flex:0 0 auto;border:2px solid var(--ivory)}
.avatar.a1{background:var(--sage-l)}.avatar.a2{background:var(--butter-l)}.avatar.a3{background:var(--lav-l)}.avatar.me{background:var(--ink);color:var(--ivory)}

/* ---------- cards & surfaces */
.card{background:var(--ivory);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-1);min-width:0}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-h h2,.card-h h3{font-size:clamp(20px,2vw,24px)}
.card-h p{color:var(--muted);font-size:14px;margin-top:4px}
.tint-sage{background:var(--sage-ll);border-color:transparent}.tint-peach{background:var(--peach-l);border-color:transparent}.tint-butter{background:var(--butter-l);border-color:transparent}.tint-lav{background:var(--lav-l);border-color:transparent}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.list{display:grid}
.li{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line-2);min-width:0}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.li .t{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .s{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .r{text-align:right;display:grid;justify-items:end;gap:3px;flex:0 0 auto}
.li .r b{font-variant-numeric:tabular-nums;font-size:15px}
.li-btn{width:100%;border:0;background:none;text-align:left;cursor:pointer;border-radius:14px;padding:13px 10px;margin:0 -6px;width:calc(100% + 12px)}
.li-btn:hover{background:var(--sage-ll)}
.li-ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--sage-l);color:var(--sage-dd);flex:0 0 auto}
.li-ico.peach{background:var(--peach-l);color:var(--neg)}.li-ico.butter{background:var(--butter-l);color:var(--warn)}.li-ico.lav{background:var(--lav-l);color:var(--ink-2)}
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:34px 18px;color:var(--muted)}
.empty .scene{width:min(240px,70%);height:auto;aspect-ratio:3/2;border-radius:22px}
.empty h3{color:var(--ink);font-size:20px}
.empty p{max-width:38ch;font-size:14.5px}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--butter-l);font-size:14px;color:var(--ink-2)}
.notice.info{background:var(--lav-l)}.notice.ok{background:var(--pos-bg)}.notice.bad{background:var(--neg-bg)}
.notice .ico{margin-top:2px}
.notice b{color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--line-2);color:var(--muted)}
.tag.calc{background:var(--sage-l);color:var(--sage-dd)}.tag.est{background:var(--butter-l);color:var(--warn)}
.progress{height:10px;border-radius:99px;background:var(--line-2);overflow:hidden;display:flex}
.progress i{display:block;height:100%;background:var(--sage-d);transition:width .5s ease}
.progress i.b{background:var(--butter)}
hr.sep{border:0;border-top:1px solid var(--line-2);margin:20px 0}

/* ---------- table (desktop) / cards (mobile) */
.table-wrap{overflow-x:auto;margin:0 -6px}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
table.t th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line)}
table.t td{padding:13px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t td.n,table.t th.n{text-align:right;white-space:nowrap}
table.t tbody tr{transition:background .12s}
table.t tbody tr:hover{background:var(--sage-ll)}

/* ===================================================================== splash (splash.js) */
.splash{position:fixed;inset:0;z-index:10000;background:radial-gradient(120% 90% at 50% 40%,var(--ivory) 0,var(--cream) 70%);color:var(--sage-dd);overflow:hidden;cursor:pointer}
.splash>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sp-start{gap:clamp(14px,3vw,22px)}
.sp-end{flex-direction:column;gap:clamp(10px,2vh,18px);text-align:center;padding:0 16px}
.sp-logo,.sp-slot{width:clamp(56px,14vw,76px);height:clamp(56px,14vw,76px);border-radius:27%;background:url(icon-light.png) center/contain no-repeat;flex:0 0 auto}
[data-theme=dark] .sp-logo,[data-theme=dark] .sp-slot{background-image:url(icon-dark.png)}
.sp-logo{opacity:0;filter:drop-shadow(0 10px 18px #1e2a2330)}
.sp-slot{width:clamp(72px,18vw,96px);height:clamp(72px,18vw,96px);opacity:0}
.splash.static .sp-slot{opacity:1}
.sp-word{display:inline-flex;opacity:0;font-family:var(--display);font-weight:800;font-size:clamp(44px,12vw,64px);letter-spacing:.015em;line-height:1}
.sp-src{position:relative;display:inline-block;line-height:1}
.sp-src .up{position:absolute;left:0;bottom:0;opacity:0}
.sp-src:nth-child(1) .lo{color:var(--ink)}.sp-src:nth-child(2) .lo{color:var(--sage-d)}.sp-src:nth-child(3) .lo{color:#C49A5E}.sp-src:nth-child(4) .lo{color:#D98B6A}
.sp-l1,.sp-l2{display:block;font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--sage-dd);white-space:nowrap}
.sp-l1{font-size:clamp(40px,11vw,68px)}
.sp-l2{font-size:clamp(22px,6vw,34px);letter-spacing:-.025em}
.sp-ch{display:inline-block;opacity:0}
.sp-terra,.sp-src.to-terra .up{color:#D4672E}.sp-sage,.sp-src.to-sage .up{color:var(--sage)}.sp-src.to-forest .up{color:var(--sage-dd)}
[data-theme=dark] .sp-terra,[data-theme=dark] .sp-src.to-terra .up{color:#E8A383}
.sp-swoosh,.sp-shine{display:none}
/* Every screen: logo stacked over "esta", a two-tone tagline with a gold light sweep and a gold swoosh beneath,
   soft gold arcs in the background corners */
@media all{
  .splash::before,.splash::after{content:"";position:absolute;width:150vmax;height:150vmax;border-radius:50%;pointer-events:none;border:1.5px solid #E9C48A3a;box-shadow:0 0 60px #F3DDB444,inset 0 0 60px #F3DDB42a}
  .splash::before{left:-40vmax;top:-128vmax}
  .splash::after{right:-50vmax;bottom:-130vmax}
  [data-theme=dark] .splash::before,[data-theme=dark] .splash::after{border-color:#C49A5E33;box-shadow:0 0 60px #C49A5E1a}
  .sp-start{flex-direction:column;gap:clamp(10px,2vh,18px)}
  .sp-logo{width:clamp(84px,22vw,120px);height:clamp(84px,22vw,120px)}
  .sp-word{font-size:clamp(60px,17vw,96px);letter-spacing:-.01em}
  .sp-src:nth-child(n) .lo{color:var(--sage-dd)}
  .sp-src:nth-child(4) .lo{background:linear-gradient(160deg,#E8945C,#C8642E);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sp-l1{font-size:clamp(42px,11.5vw,76px)}
  .sp-l2{font-size:clamp(33px,9vw,60px);letter-spacing:-.03em}
  .sp-terra,.sp-src.to-terra .up{color:#D4672E}
  .sp-swoosh{display:block;width:min(78vw,440px);height:auto;margin-top:clamp(-6px,-1vh,0px);opacity:0}
  .splash.static .sp-swoosh{opacity:1}
  .sp-shine{display:block;position:absolute;left:0;top:50%;width:38vw;height:min(46vh,380px);margin-top:calc(min(46vh,380px) / -2);opacity:0;pointer-events:none;
    background:linear-gradient(90deg,transparent,#F2CC8F33 35%,#EDBE7A66 50%,#F2CC8F33 65%,transparent);filter:blur(12px)}
  [data-theme=dark] .sp-shine{mix-blend-mode:screen;background:linear-gradient(90deg,transparent,#E9C48A33 35%,#F3DDB466 50%,#E9C48A33 65%,transparent)}
}
@media (min-width:1025px){
  .sp-logo{width:132px;height:132px}.sp-slot{width:112px;height:112px}
  .sp-word{font-size:112px}
  .sp-l1{font-size:clamp(76px,6.4vw,104px)}.sp-l2{font-size:clamp(60px,5.1vw,84px)}
  .sp-swoosh{width:min(44vw,640px)}
}

/* ===================================================================== landing (rotary) */
.landing{position:fixed;inset:0;z-index:900;background:radial-gradient(120% 90% at 50% 40%,#FBF7EF 0,var(--cream) 60%,#EFE7D8 100%);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.2fr) minmax(0,1fr);align-items:center;overflow:hidden;touch-action:none;transition:opacity .35s ease,transform .35s ease}
[data-theme=dark] .landing{background:radial-gradient(120% 90% at 50% 40%,#1C241F 0,var(--cream) 70%)}
html.resuming .landing{visibility:hidden}
/* the loading screen for that reload: only appears if loading takes more than a moment, so fast reloads don't flicker */
html.resuming body::before{content:"";position:fixed;inset:0;z-index:12000;background:var(--cream) url(icon-light.png) center calc(50% - 18px)/84px no-repeat;opacity:0;animation:resumeIn .3s ease .25s forwards,resumePulse 1.6s ease-in-out .55s infinite}
[data-theme=dark].resuming body::before{background-image:url(icon-dark.png)}
html.resuming body::after{content:"";position:fixed;z-index:12001;left:50%;top:calc(50% + 46px);width:120px;height:4px;margin-left:-60px;border-radius:2px;opacity:0;
  background:linear-gradient(var(--sage-d),var(--sage-d)) -44px 0/44px 100% no-repeat,var(--line);animation:resumeIn .3s ease .25s forwards,resumeBar 1.1s cubic-bezier(.6,0,.4,1) .25s infinite}
@keyframes resumeIn{to{opacity:1}}
@keyframes resumePulse{0%,100%{background-size:84px}50%{background-size:90px}}
@keyframes resumeBar{from{background-position:-44px 0}to{background-position:120px 0}}
@media (prefers-reduced-motion:reduce){html.resuming body::before{animation:resumeIn .3s ease .25s forwards}html.resuming body::after{animation:resumeIn .3s ease .25s forwards}}
.landing.leaving{opacity:0;transform:scale(1.015);pointer-events:none}
.landing-side{position:relative;height:100%;min-width:0}
.rotary{--size:min(84vh,780px,70vw);position:absolute;top:50%;width:var(--size);height:var(--size);transform:translateY(-50%);border-radius:50%;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;outline:none}
.landing-month .rotary{right:auto;left:calc(var(--size) * -.62)}
.landing-date .rotary{left:auto;right:calc(var(--size) * -.62)}
.rotary.dragging{cursor:grabbing}
.rotary .disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#ECE4D5 0 52%,#E5DCCB 52.4% 100%);box-shadow:inset 0 0 0 1.5px #ffffffaa,inset 0 -18px 40px #cdbfa833,0 30px 60px -30px #6b5a3a44}
[data-theme=dark] .rotary .disc{background:radial-gradient(circle at 50% 50%,#212B25 0 52%,#26312A 52.4% 100%);box-shadow:inset 0 0 0 1.5px #ffffff10,0 30px 60px -30px #000}
.rotary .ticks{position:absolute;inset:3%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#c9bca5 0 .45deg,transparent .45deg 6deg);-webkit-mask:radial-gradient(circle,transparent 0 92%,#000 92.2% 100%);mask:radial-gradient(circle,transparent 0 92%,#000 92.2% 100%);opacity:.75;will-change:transform}
[data-theme=dark] .rotary .ticks{background:repeating-conic-gradient(from 0deg,#46524a 0 .45deg,transparent .45deg 6deg)}
.rotary .labels{position:absolute;inset:0}
.rotary .lbl{position:absolute;left:50%;top:50%;font-family:var(--display);font-weight:800;letter-spacing:-.04em;color:#b5a88f;white-space:nowrap;transform-origin:0 0;will-change:transform,opacity;pointer-events:none;line-height:1}
[data-theme=dark] .rotary .lbl{color:#4e5b52}
.rotary .lbl.sel{color:var(--ink)}
.landing-center{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;padding:24px}
.brand-btn{border:0;background:none;padding:6px 12px;cursor:pointer;display:grid;justify-items:center;gap:8px;color:inherit;border-radius:20px}
/* The ESTA icon (house) is the brand mark everywhere, light and dark versions per theme */
.brand-mark{width:84px;height:84px;display:block;background:url(icon-light.png) center/contain no-repeat;transition:transform .25s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 8px 12px #1e2a2326)}
[data-theme=dark] .brand-mark{background-image:url(icon-dark.png);filter:drop-shadow(0 8px 12px #0006)}
/* Logo motion: hover lifts and tilts it with a springy settle while a sheen sweeps across the tile; pressing
   squashes it and it springs back. The sheen is clipped to the tile's own rounded corners. */
.brand-mark{position:relative;overflow:hidden;border-radius:27%;transform-origin:50% 80%}
.brand-mark::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.brand-btn:hover .brand-mark,.brand:hover .brand-mark,.brand-btn:focus-visible .brand-mark,.brand:focus-visible .brand-mark{animation:logoLift .7s cubic-bezier(.22,1,.36,1) forwards}
.brand-btn:hover .brand-mark::after,.brand:hover .brand-mark::after{animation:logoSheen .9s cubic-bezier(.16,1,.3,1) .08s}
.brand-btn:active .brand-mark,.brand:active .brand-mark,.brand-mark.pop{animation:logoPress .45s cubic-bezier(.22,1,.36,1)}
@keyframes logoLift{0%{transform:none}45%{transform:translateY(-6px) rotate(-7deg) scale(1.08)}100%{transform:translateY(-3px) rotate(-3deg) scale(1.05)}}
@keyframes logoSheen{to{transform:translateX(120%)}}
@keyframes logoPress{0%{transform:scale(1)}30%{transform:scale(.88,.84) translateY(2px)}65%{transform:scale(1.07,1.1) translateY(-3px)}100%{transform:scale(1)}}
.brand-cap{font-size:11px;letter-spacing:.2em;font-weight:750;color:var(--muted);text-transform:uppercase}
.landing h1{font-size:clamp(46px,6.2vw,92px);line-height:.92;letter-spacing:-.05em;font-weight:800;margin:30px 0 16px}
.landing h1 em{font-style:normal;color:var(--sage-d)}
/* the ESTA tagline, same colours as the splash's final frame */
.landing h1.tagline{display:grid;justify-items:center;gap:.08em;color:var(--sage-dd);margin-bottom:4px}
.tagline .tl1,.tagline .tl2{display:block;white-space:nowrap}
.tagline .tl2{font-size:.8em;letter-spacing:-.035em}
.tl-terra{color:#D4672E}
[data-theme=dark] .tl-terra{color:#E8A383}
.tl-swoosh{display:block;width:min(100%,clamp(220px,26vw,400px));height:auto;margin:0 auto 18px}
.landing-lede{font-size:clamp(15.5px,1.2vw,18px);color:var(--ink-2);max-width:34ch;margin:0 auto 24px}
.enter-btn{display:inline-flex;align-items:center;gap:18px;border:0;border-radius:999px;background:var(--ink);color:var(--ivory);padding:16px 18px 16px 28px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 14px 30px -14px #1e2a23aa;transition:transform .2s,background .2s}
.enter-btn span.arr{width:34px;height:34px;border-radius:50%;background:var(--ivory);color:var(--ink);display:grid;place-items:center;transition:transform .2s}
.enter-btn:hover{background:var(--sage-d);transform:translateY(-2px)}
.enter-btn:hover span.arr{transform:rotate(-45deg)}
.landing-readout{margin-top:22px;font-size:13px;color:var(--muted);font-weight:600;min-height:20px}
.landing-foot{position:absolute;left:24px;right:24px;bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:3}
.dial-link{display:none}
.landing-links{display:flex;gap:4px}
.landing-links a{font-size:11px;letter-spacing:.16em;font-weight:750;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 10px;border-radius:10px}
.landing-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.landing-links a:focus-visible,.get-app:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.get-app{white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 18px 8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--ivory);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--shadow-1);transition:transform .15s,border-color .15s}
.get-app:hover{transform:translateY(-1px);border-color:var(--sage)}
.get-app .ico{width:18px;height:18px;color:var(--sage-d)}
.get-app[hidden]{display:none}
/* Desktop and tablet: Get the app sits under Dashboard and the legal links are centred; phones keep it in the footer */
.get-app-center{margin-top:14px}
.landing-foot{justify-content:center}

/* ===================================================================== app shell */
.app{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--ivory);border-right:1px solid var(--line-2);display:flex;flex-direction:column;padding:22px 16px;z-index:60;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px;border:0;background:none;cursor:pointer;color:inherit;text-align:left}
.brand .brand-mark{width:46px;height:46px;flex:0 0 auto}
/* Sidebar wordmark: each letter in a colour from the logo, tilted a little differently, and they hop on hover */
.brand-text{display:grid;gap:4px;min-width:0}
.brand-word{display:inline-flex;align-items:flex-end;font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:.015em;line-height:.85;padding-top:2px}
.brand-word span{display:inline-block;transform-origin:50% 90%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.brand-word span:nth-child(1){color:var(--ink);transform:rotate(-9deg) translateY(1px)}
.brand-word span:nth-child(2){color:var(--sage-d);transform:rotate(6deg) translateY(-3px)}
.brand-word span:nth-child(3){color:#C49A5E;transform:rotate(-5deg) translateY(1px)}
.brand-word span:nth-child(4){color:#D98B6A;transform:rotate(10deg) translateY(-2px)}
[data-theme=dark] .brand-word span:nth-child(3){color:#D9B27A}[data-theme=dark] .brand-word span:nth-child(4){color:#E8A383}
.brand:hover .brand-word span,.brand:focus-visible .brand-word span{animation:hop .55s cubic-bezier(.3,1.4,.5,1) both}
.brand-word span:nth-child(2){animation-delay:.06s}.brand-word span:nth-child(3){animation-delay:.12s}.brand-word span:nth-child(4){animation-delay:.18s}
@keyframes hop{45%{transform:translateY(-7px) rotate(0)}}
.brand small{font-size:11px;letter-spacing:.1em;white-space:nowrap;color:var(--muted);font-weight:750;text-transform:uppercase}
.nav-label{font-size:11px;letter-spacing:.16em;font-weight:750;color:var(--muted);padding:14px 12px 8px;text-transform:uppercase}
.nav{display:grid;gap:3px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;transition:background .15s,color .15s;min-height:46px}
.nav a .ico-wrap{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--sage-ll);color:var(--sage-d);transition:transform .2s}
.nav a .ico{width:18px;height:18px}
.nav a:hover{background:var(--sage-ll)}
.nav a:hover .ico-wrap{transform:rotate(-6deg)}
.nav a[aria-current=page]{background:var(--sage-l);color:var(--ink)}
.nav a[aria-current=page] .ico-wrap{background:var(--sage-d);color:#fff}
[data-theme=dark] .nav a[aria-current=page] .ico-wrap{color:#11251a}
.nav a .count{margin-left:auto;font-size:12px;font-weight:750;background:var(--neg-bg);color:var(--neg);padding:1px 8px;border-radius:99px}
.side-foot{margin-top:auto;padding-top:16px;display:grid;gap:10px}
.privacy-card{border-radius:18px;padding:14px;background:var(--sage-ll);font-size:13px;color:var(--ink-2);display:grid;gap:6px}
.privacy-card b{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.privacy-card .ico{width:18px;height:18px;color:var(--sage-d)}
.main{margin-left:var(--side);min-width:0}
.topbar{position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 32px;background:color-mix(in srgb,var(--cream) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.scrolled{border-bottom-color:var(--line-2)}
.crumb{font-size:14px;color:var(--muted);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb b{color:var(--ink)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.searchbox{position:relative;width:min(340px,30vw)}
.searchbox>.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.searchbox input{padding-left:42px;border-radius:999px;min-height:44px}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--ivory);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-2);padding:8px;z-index:80;max-height:60vh;overflow:auto}
.search-results a{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:14px}
.search-results a:hover,.search-results a:focus{background:var(--sage-ll)}
.search-results a>.ico{flex:0 0 auto;width:36px;height:36px;padding:8px;border-radius:11px;background:var(--sage-l);color:var(--sage-d)}
.search-results a>span{min-width:0;line-height:1.35}.search-results a b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results a br{display:none}
.sync{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--muted);padding:8px 12px;border-radius:999px;background:var(--ivory);border:1px solid var(--line-2);white-space:nowrap}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--pos)}
.sync.saving i{background:var(--butter);animation:pulse 1s infinite}
.sync.error i{background:var(--neg)}
.content{padding:26px 32px 64px;max-width:1440px;margin:0 auto}
.page-h{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.page-h h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.04em;margin-top:6px}
.page-h p{color:var(--muted);margin-top:8px;font-size:15.5px;max-width:60ch}
.page-h .acts{display:flex;gap:10px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.toolbar .input,.toolbar .select{width:auto;min-width:200px;flex:1 1 200px;max-width:340px}
.banner{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;margin-bottom:18px;font-size:14px;background:var(--butter-l);flex-wrap:wrap}
.banner .grow{flex:1;min-width:200px}
.banner.lav{background:var(--lav-l)}
.view{animation:viewIn .35s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================================================================== dashboard */
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.dash-top .hello{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.03em}
/* Greeting hand: waves twice when the dashboard opens and again on hover (reduced motion stops it) */
.wave{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;margin-left:.1em;overflow:visible}
.wave-hand{fill:#F6C96E;transform-box:view-box;transform-origin:19px 31px;animation:wave 1.9s ease-in-out .35s 2}
.wave-shade{fill:none;stroke:#DFA544;stroke-width:1.6;stroke-linecap:round}
.wave-lines{fill:none;stroke:var(--sage);stroke-width:1.7;stroke-linecap:round;opacity:.85}
.hello:hover .wave-hand{animation:wave 1.6s ease-in-out 1}
@keyframes wave{0%,100%{transform:rotate(0)}12%{transform:rotate(16deg)}26%{transform:rotate(-7deg)}40%{transform:rotate(15deg)}54%{transform:rotate(-5deg)}68%{transform:rotate(9deg)}82%{transform:rotate(0)}}
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(115deg,var(--sage-ll) 0%,var(--butter-l) 55%,var(--peach-l) 100%);padding:clamp(24px,4vw,46px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:center;min-height:300px;border:1px solid var(--line-2)}
.hero h1{font-size:clamp(40px,5.4vw,76px);line-height:.93;letter-spacing:-.05em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--sage-d)}
.hero p{font-size:clamp(15.5px,1.3vw,17.5px);color:var(--ink-2);margin:16px 0 22px;max-width:44ch}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:3/2;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-2);transform:rotate(2deg);transition:transform .4s}
.hero-art:hover{transform:rotate(0) scale(1.01)}
.hero-art .scene{width:100%;height:100%}
.hero-blob{position:absolute;border-radius:50%;pointer-events:none}
.hero-blob.b1{width:220px;height:220px;right:-60px;top:-80px;background:var(--lav);opacity:.45}
.hero-blob.b2{width:120px;height:120px;left:38%;bottom:-60px;background:var(--butter);opacity:.5}
.hero-sticker{position:absolute;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,30px);background:var(--ink);color:var(--ivory);font-size:12px;font-weight:750;letter-spacing:.1em;padding:9px 14px;border-radius:999px;transform:rotate(-4deg);text-transform:uppercase;z-index:2}
.money-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mcard{border-radius:22px;padding:18px 20px;background:var(--ivory);border:1px solid var(--line-2);display:grid;gap:8px;min-width:0;position:relative;overflow:hidden}
.mcard .k{font-size:12px;letter-spacing:.1em;font-weight:750;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.mcard .k .ico{width:18px;height:18px}
.mcard .v{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mcard .s{font-size:13.5px;color:var(--muted)}
.mcard.hero-m{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.mcard.hero-m .k,.mcard.hero-m .s{color:color-mix(in srgb,var(--ivory) 70%,transparent)}
[data-theme=dark] .mcard.hero-m{background:var(--sage-l);color:var(--ink);border-color:var(--sage-l)}
[data-theme=dark] .mcard.hero-m .k,[data-theme=dark] .mcard.hero-m .s{color:var(--ink-2)}
.mcard.hero-m .v.pos{color:#9FE0B5!important}.mcard.hero-m .v.neg{color:#F6B794!important}
[data-theme=dark] .mcard.hero-m .v.pos{color:var(--pos)!important}
.quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.qa{border:1.5px solid var(--line-2);background:var(--ivory);border-radius:22px;padding:16px 14px;display:grid;gap:12px;justify-items:start;cursor:pointer;text-align:left;transition:transform .2s cubic-bezier(.3,1.5,.5,1),border-color .2s,background .2s;min-height:118px;color:var(--ink)}
.qa .qi{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--sage-l);color:var(--sage-dd);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.qa:nth-child(2) .qi{background:var(--butter-l);color:var(--warn)}.qa:nth-child(3) .qi{background:var(--peach-l);color:var(--neg)}.qa:nth-child(4) .qi{background:var(--lav-l);color:var(--ink-2)}.qa:nth-child(6) .qi{background:var(--ink);color:var(--ivory)}
.qa b{font-size:15px;line-height:1.2}
.qa small{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.qa:hover{transform:translateY(-3px);border-color:var(--sage)}
.qa:hover .qi{transform:rotate(-10deg) scale(1.08)}
.prop-card{width:300px;border-radius:26px;background:var(--ivory);border:1px solid var(--line-2);overflow:hidden;text-decoration:none;color:var(--ink);display:grid;transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;box-shadow:var(--shadow-1)}
.prop-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow-2)}
.prop-card .art{aspect-ratio:3/2;position:relative;overflow:hidden}
.prop-card .art .scene{width:100%;height:100%;transition:transform .5s ease}
.prop-card:hover .art .scene{transform:scale(1.04)}
.prop-card .badge{position:absolute;left:12px;top:12px;background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;z-index:1}
.prop-card .occ{position:absolute;right:12px;top:12px;z-index:1}
.prop-card .body{padding:16px 18px 18px;display:grid;gap:10px}
/* in a row of cards they stretch to the tallest: the picture keeps its 3:2 shape, the text takes the extra space and the
   rent and occupancy figures stay at the bottom */
.prop-card{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);align-content:stretch}.prop-card .body>*{min-width:0}.prop-card .art{align-self:start;min-height:0}.prop-card .art .scene{position:absolute;inset:0}
.prop-card .body{align-content:space-between}
.prop-card h3{font-size:19px;letter-spacing:-.02em}
.prop-card .loc{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prop-card .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px;border-top:1px dashed var(--line)}
.prop-card .stats small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.prop-card .stats b{font-variant-numeric:tabular-nums;font-size:15px}
.prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.prop-grid .prop-card{width:auto}
.feed-ico{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto}
.date-tile{width:52px;flex:0 0 auto;border-radius:15px;background:var(--ivory);border:1px solid var(--line);text-align:center;padding:6px 0;font-family:var(--display);font-weight:800;font-size:20px;line-height:1}
.date-tile small{display:block;font-family:var(--font);font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:750;margin-top:3px}
.date-tile.overdue{background:var(--neg-bg);border-color:transparent}
.date-tile.soon{background:var(--butter-l);border-color:transparent}
.rent-overview{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}
.donut{--p:0;width:150px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--sage-d) calc(var(--p)*1%),var(--line-2) 0);display:grid;place-items:center;position:relative;flex:0 0 auto}
.donut::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--ivory)}
.donut span{position:relative;text-align:center;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1}
.donut span small{display:block;font-family:var(--font);font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-top:4px}
.section-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.section-h h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.035em}
.section-h p{color:var(--muted);font-size:14.5px;margin-top:4px}

/* ---------- property detail */
.detail-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-bottom:22px}
.detail-art{border-radius:30px;overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-2)}
.detail-art .scene{width:100%;height:100%}
.metric{display:grid;gap:4px;padding:14px 16px;border-radius:18px;background:var(--ivory);border:1px solid var(--line-2)}
.metric .k{font-size:12.5px;color:var(--muted);font-weight:650;display:flex;gap:6px;align-items:center;justify-content:space-between}
.metric .v{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:12px 14px;font-weight:650;font-size:14.5px;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;min-height:46px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--sage-d)}

/* ---------- split editor */
.split-rows{display:grid;gap:8px}
.split-row{display:grid;grid-template-columns:auto minmax(0,1fr) 150px 110px;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--sage-ll)}
.split-row.off{opacity:.55;background:transparent}
.split-row .who{font-weight:650;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split-row .share{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px}
.split-row .input{min-height:40px;padding:8px 10px}
.split-row .check{padding:0;min-height:auto}
.split-row .check:hover{background:none}
.alloc{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-size:14px;font-weight:650;background:var(--pos-bg);color:var(--pos)}
.alloc.bad{background:var(--neg-bg);color:var(--neg)}

/* ---------- calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:6px 0}
.cal .day{min-height:108px;border-radius:16px;background:var(--ivory);border:1px solid var(--line-2);padding:8px;display:grid;align-content:start;gap:4px;min-width:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.cal .day:hover{border-color:var(--sage)}
.cal .day.out{background:transparent;border-color:transparent;color:var(--muted);opacity:.55}
.cal .day.today{border:2px solid var(--sage-d)}
.cal .day .d{font-weight:750;font-size:14px;font-variant-numeric:tabular-nums}
.cal .ev{font-size:12px;font-weight:650;padding:3px 7px;border-radius:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--sage-l);color:var(--sage-dd)}
.cal .ev.projected{background:transparent;border:1px dashed color-mix(in srgb,var(--sage) 60%,var(--line));color:var(--ink-2)}
.cal .ev.overdue{background:var(--neg-bg);color:var(--neg)}.cal .ev.soon,.cal .ev.due{background:var(--butter-l);color:var(--warn)}.cal .ev.done,.cal .ev.paid{background:var(--pos-bg);color:var(--pos)}.cal .ev.lease{background:var(--lav-l);color:var(--ink-2)}
.cal .more{font-size:12px;color:var(--muted);font-weight:650}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}

/* ---------- reports */
.bars{display:flex;align-items:flex-end;gap:10px;height:220px;padding-top:10px}
.bars .col{flex:1;display:grid;grid-template-rows:1fr auto;gap:8px;height:100%;min-width:0}
.bars .pair{display:flex;align-items:flex-end;gap:3px;justify-content:center;height:100%}
.bars .bar{width:min(18px,40%);border-radius:7px 7px 3px 3px;background:var(--sage-d);transition:height .6s cubic-bezier(.2,.9,.3,1);min-height:2px}
.bars .bar.e{background:var(--peach)}
.bars .m{font-size:12px;color:var(--muted);text-align:center;font-weight:650}
.hbar{display:grid;gap:6px;margin:12px 0}
.hbar .top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.hbar .top b{font-variant-numeric:tabular-nums}

/* currency picker (Settings > Money format) */
.cur-now{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--sage-ll);border:1.5px solid var(--sage-l);margin:6px 0 12px}
.cur-now b{display:block;font-size:15.5px;line-height:1.3}.cur-now small{color:var(--muted);font-size:12.5px}
.cur-sym{flex:0 0 auto;min-width:34px;height:34px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:var(--butter-l);color:var(--warn);font:800 14px/1 var(--display);white-space:nowrap}
.cur-sym.big{min-width:44px;height:44px;border-radius:13px;font-size:19px;background:var(--ivory);color:var(--sage-d);box-shadow:var(--shadow-1)}
.cur-pop{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cur-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 7px;border-radius:999px;border:1.5px solid var(--line);background:var(--ivory);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.cur-chip span{min-width:22px;height:22px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:var(--line-2);font-size:12px}
.cur-chip:hover{border-color:var(--sage)}.cur-chip.on{background:var(--sage-d);border-color:var(--sage-d);color:var(--ivory)}.cur-chip.on span{background:color-mix(in srgb,var(--ivory) 22%,transparent)}
.cur-search{position:relative}.cur-search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}.cur-search .input{padding-left:42px}
.cur-list{margin-top:8px;max-height:264px;overflow-y:auto;overscroll-behavior:contain;border:1.5px solid var(--line);border-radius:var(--r);background:var(--ivory);padding:4px;scrollbar-width:thin}
.cur-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 10px;border:0;border-radius:12px;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.cur-row[hidden],.cur-none[hidden]{display:none}
.cur-row:hover{background:var(--line-2)}.cur-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cur-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cur-code{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.cur-tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;visibility:hidden;background:var(--sage-d);color:var(--ivory)}.cur-tick .ico{width:14px;height:14px;stroke-width:2.6}
.cur-row[aria-checked=true]{background:var(--sage-ll)}.cur-row[aria-checked=true] .cur-tick{visibility:visible}.cur-row[aria-checked=true] .cur-sym{background:var(--sage-d);color:var(--ivory)}
.cur-sym.long{font-size:11px;letter-spacing:.02em}
.cur-search .input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.6;cursor:pointer}
.cur-none{margin:0;padding:18px 12px;text-align:center;color:var(--muted);font-size:14px}
/* ===================================================================== at-a-glance home (phones and tablets) */
.glance{display:none}
@media (max-width:1024px){
  .glance{display:block;margin:4px 0 26px}
  .glance h1{font-size:clamp(30px,7.4vw,40px);letter-spacing:-.04em;line-height:1.05}
  .glance>p{margin:6px 0 18px;color:var(--ink-2);font-size:15.5px}
  .glance h2{font-size:18px;margin:24px 0 12px;letter-spacing:-.02em}
  .glance-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .gstat{display:grid;justify-items:center;align-content:center;gap:4px;min-height:118px;padding:14px 8px;border-radius:20px;background:var(--ivory);border:1px solid var(--line-2);box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;text-align:center;transition:transform .15s}
  .gstat:active{transform:scale(.97)}
  .gstat .gi .ico{width:26px;height:26px;color:var(--sage-d)}
  .gstat b{font:800 30px/1 var(--display);letter-spacing:-.03em}
  .gstat span:last-child{font-size:13px;font-weight:600;color:var(--ink-2)}
  .gstat.on{background:var(--sage-dd);border-color:var(--sage-dd);color:var(--ivory)}
  .gstat.on .gi .ico,.gstat.on span:last-child{color:var(--ivory)}
  [data-theme=dark] .gstat.on{background:#2F5B48;border-color:#2F5B48;color:#F4F1E8}
  [data-theme=dark] .gstat.on .gi .ico,[data-theme=dark] .gstat.on span:last-child{color:#F4F1E8}
  .gstat.warn .gi .ico{color:var(--neg)}
  .glance-qa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .gqa{position:relative;display:grid;gap:8px;padding:14px 16px;min-height:84px;border-radius:18px;background:var(--ivory);border:1px solid var(--line-2);box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;align-content:space-between}
  .gqa .gi .ico{width:26px;height:26px;color:var(--sage-d)}
  .gqa b{font-size:15.5px}
  .gqa>.ico{position:absolute;top:16px;right:14px;width:18px;height:18px;color:var(--muted)}
  .gqa:active{transform:scale(.98)}
  .dash-top{display:none}
  .hero:not(.fresh){display:none}
}
@media (min-width:600px) and (max-width:1024px){
  .glance-qa{grid-template-columns:repeat(4,1fr)}
}
/* ===================================================================== dialogs, sheets, toasts */
dialog.dlg{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 40px);color:var(--ink);overflow:visible}
dialog.dlg.wide{max-width:min(880px,calc(100vw - 32px))}
dialog.dlg.narrow{max-width:min(460px,calc(100vw - 32px))}
dialog.dlg::backdrop{background:#1e2a2366;backdrop-filter:blur(4px)}
.dlg-card{background:var(--ivory);border-radius:28px;box-shadow:var(--shadow-2);display:flex;flex-direction:column;max-height:calc(100dvh - 40px);overflow:hidden;border:1px solid var(--line-2)}
dialog.dlg[open] .dlg-card{animation:dlgIn .28s cubic-bezier(.2,1.2,.4,1)}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dlg-h{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 14px}
.dlg-h .grow{flex:1;min-width:0}
.dlg-h h2{font-size:24px;letter-spacing:-.03em}
.dlg-h p{color:var(--muted);font-size:14px;margin-top:4px}
.dlg-h .dlg-ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--sage-l);color:var(--sage-dd);flex:0 0 auto}
.dlg-h .dlg-ico.danger{background:var(--neg-bg);color:var(--neg)}
.dlg-b{padding:6px 24px 18px;overflow-y:auto;display:grid;grid-auto-rows:max-content;gap:16px;overscroll-behavior:contain}
/* a checkbox directly in a form lines its box up with the field labels (its hover tint still has room) */
.dlg-b>.check{margin-inline:-12px}
.dlg-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px calc(18px + var(--safe-b));border-top:1px solid var(--line-2);background:var(--ivory);flex-wrap:wrap}
.dlg-f .left{margin-right:auto}
.toasts{position:fixed;right:20px;bottom:20px;z-index:2000;display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:var(--ink);color:var(--ivory);padding:14px 16px;border-radius:18px;box-shadow:var(--shadow-2);font-size:14.5px;animation:toastIn .3s cubic-bezier(.2,1.3,.4,1)}
.toast .ico{margin-top:1px}
.toast.success .ico{color:#9FE0B5}.toast.warning .ico{color:#F4DE95}.toast.error .ico{color:#F6B794}.toast.info .ico{color:#D9D3EC}
.toast .toast-x{margin-left:auto;background:none;border:0;color:inherit;opacity:.7;cursor:pointer;padding:2px;border-radius:6px}
.toast .toast-act{margin-left:auto;align-self:center;flex:0 0 auto;border:0;border-radius:999px;background:var(--ivory);color:var(--ink);font-weight:700;font-size:13.5px;padding:7px 14px;cursor:pointer}
.toast .toast-act+.toast-x{margin-left:0}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
.lockscreen{position:fixed;inset:0;z-index:950;display:grid;place-items:center;background:var(--cream);padding:20px}
.lock-card{width:min(420px,100%);text-align:center;display:grid;gap:16px;justify-items:center}
.lock-card .brand-mark{width:76px;height:76px}
.type-groups{display:grid;gap:16px}
.type-group{display:grid;gap:8px}
.type-cat{font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.getapp-sec{display:grid;gap:8px}
.getapp-sec h3{font-size:13px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--font)}
.getapp-sec p .ico{width:16px;height:16px;color:var(--pos);vertical-align:-3px}
.store-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.store-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:16px;background:var(--cream)}
.store-row .grow{flex:1;min-width:0;display:grid;line-height:1.3}
.store-row small{color:var(--muted);font-size:12.5px}
.store-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--sage-l);color:var(--sage-d);flex:0 0 auto}
.pill.soon{background:var(--butter-l);color:var(--warn);white-space:nowrap}
.install-steps{margin:0;padding-left:22px;display:grid;gap:10px;color:var(--ink-2)}
.install-steps li::marker{color:var(--sage-d);font-weight:800}
.bio-btn{min-height:56px;font-size:16px;gap:10px}
.bio-btn .ico{width:24px;height:24px}
.lock-or{display:flex;align-items:center;gap:12px;width:100%;margin:0;color:var(--muted);font-size:13px}
.lock-or::before,.lock-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- mobile dock */
.dock{display:none}

/* ===================================================================== property scenes */
.scene{width:100%;height:100%}
.scene .c-sky{fill:var(--sage-l)}
.scene-condo .c-sky,.scene-office .c-sky{fill:var(--lav-l)}
.scene-retail .c-sky{fill:var(--peach-l)}
.scene-residential .c-sky,.scene-farm .c-sky{fill:var(--butter-l)}
.scene-commercial .c-sky,.scene-warehouse .c-sky,.scene-parking .c-sky{fill:#E6EEF0}
.scene-land .c-sky,.scene-other .c-sky{fill:var(--sage-ll)}
.scene-cabin .c-sky{fill:#DDE3EE}
.c-ground{fill:#D8CDB6}.c-ground2{fill:#CBBE9F}
[data-theme=dark] .c-ground{fill:#2a2a22}[data-theme=dark] .c-ground2{fill:#33322a}
.c-cloud{fill:#fff;opacity:.9}[data-theme=dark] .c-cloud{fill:#ffffff;opacity:.18}
.c-sun{fill:#F4C95D}.c-sunray{fill:#F4C95D;opacity:.25}.c-moonish{fill:#F4E6B5}
.c-sage{fill:#9DB8A4}.c-sage2{fill:#B9CDBC}.c-forest{fill:#2F5B48}.c-peach{fill:#EDB898}.c-peach2{fill:#D98B6A}.c-butter{fill:#F2D78A}.c-lav{fill:#B8AEDB}.c-ivory,.c-ivory2{fill:#FFFCF6}.c-ink{fill:#1E2A23}
[data-theme=dark] .c-ivory2{fill:#E9E2D2}
.c-window{fill:#FFF3C4}.c-window2{fill:#F5F0FF}.c-glass{fill:#CFE3E6}.c-glass2{fill:#B9D4DA}.c-sheen{fill:#fff;opacity:.45}
/* Scenes by night: dark mode turns every illustration to night. The sun sets behind the ground, the moon rises,
   stars come out, windows light up and the sky deepens, timed alongside the theme's sunlight wash. */
.scene .c-sky,.scene .c-window,.scene .c-window2,.scene .c-glass,.scene .c-glass2,.scene .c-ground,.scene .c-ground2,.scene .c-cloud{transition:fill .5s ease,opacity .5s ease}
.sun-body,.moon-body,.stars{transition:transform .6s cubic-bezier(.45,0,.2,1),opacity .4s ease}
.moon-body{opacity:0;transform:translateY(48px)}
.stars{opacity:0}
.c-moon{fill:#F3E7C0}.c-moon-cut{fill:#1A2236}.c-star{fill:#FFF6D8}
[data-theme=dark] .sun-body{opacity:0;transform:translateY(64px)}
[data-theme=dark] .moon-body{opacity:1;transform:none;transition-delay:.15s}
[data-theme=dark] .stars{opacity:1;transition-delay:.25s}
[data-theme=dark] .scene .c-sky{fill:#1A2236}
[data-theme=dark] .scene .c-window{fill:#FFD27A}[data-theme=dark] .scene .c-window2{fill:#FFE3A3}
[data-theme=dark] .scene .c-glass{fill:#34495F}[data-theme=dark] .scene .c-glass2{fill:#2C3F52}
[data-theme=dark] .scene .c-moonish{fill:#F3E7C0}
/* Sky gradient over each scene's sky colour: by day deeper above and hazy-bright at the horizon; by night deep
   blue above with a dusky violet glow low down. Stop colours transition with the theme. */
.g-top,.g-mid,.g-low,.g-sun0,.g-sun1,.g-moon0,.g-moon1{transition:stop-color 1.8s ease,stop-opacity 1.8s ease}
.g-top{stop-color:#2F5B48;stop-opacity:.07}.g-mid{stop-color:#FFFFFF;stop-opacity:.06}.g-low{stop-color:#FFF8E6;stop-opacity:.6}
[data-theme=dark] .g-top{stop-color:#070B18;stop-opacity:.55}[data-theme=dark] .g-mid{stop-color:#1A2236;stop-opacity:0}[data-theme=dark] .g-low{stop-color:#6E5A8E;stop-opacity:.42}
.g-sun0{stop-color:#FFD98A;stop-opacity:.55}.g-sun1{stop-color:#FFD98A;stop-opacity:0}
.g-moon0{stop-color:#F3E7C0;stop-opacity:.3}.g-moon1{stop-color:#F3E7C0;stop-opacity:0}
.a-pulse{animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
/* Day: a pair of birds glides across now and then */
.birds{animation:fly 26s linear infinite;animation-delay:calc(var(--d,0s) * -1);transition:opacity 1.2s ease}
.c-bird{fill:none;stroke:#3A4840;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
@keyframes fly{0%{transform:translate(-40px,6px)}50%{transform:translate(120px,-4px)}100%{transform:translate(290px,4px)}}
[data-theme=dark] .birds{opacity:0}
/* Night: an occasional shooting star, fireflies near the ground, and some windows left dark */
.shoot{opacity:0}
.c-shoot{fill:none;stroke:#FFF6D8;stroke-width:1.6;stroke-linecap:round}
[data-theme=dark] .shoot{animation:shoot 12s linear infinite;animation-delay:calc(var(--d,0s) * -1 - 3s)}
@keyframes shoot{0%,86%{opacity:0;transform:translate(0,0)}88%{opacity:1}95%{opacity:0;transform:translate(-56px,22px)}100%{opacity:0;transform:translate(-56px,22px)}}
.flies{opacity:0;transition:opacity .5s ease .2s}[data-theme=dark] .flies{opacity:1}
.c-fly{fill:#FFE38A;animation:firefly 6s ease-in-out infinite;animation-delay:calc(var(--d,0s) * -1)}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.2}25%{opacity:1}50%{transform:translate(6px,-7px);opacity:.5}75%{opacity:1}}
[data-theme=dark] .scene .w-off{fill:#2A3A52;animation:none}
.scene .c-hill,.scene .c-hill2{transition:fill 1.8s ease}
[data-theme=dark] .scene .c-hill{fill:#2E4636}[data-theme=dark] .scene .c-hill2{fill:#3A5845}
/* scene depth: distant layer, ground details, contact shadows, side shading, window frames */
.c-far{fill:#7E9C86;opacity:.16}.c-far2{fill:#7E9C86;opacity:.24}
.scene-condo .c-far,.scene-office .c-far,.scene-condo .c-far2,.scene-office .c-far2{fill:#8E84B8}
.scene-retail .c-far,.scene-retail .c-far2{fill:#C98F6E}
.c-groundlip{fill:#E6DCC6;opacity:.7}.c-tuft{fill:none;stroke:#8DAE84;stroke-width:1.4;stroke-linecap:round}.c-pebble{fill:#B9AC90}
.c-contact{fill:#3A3020;opacity:.13}
.g-lit{stop-color:#fff;stop-opacity:.10}.g-shade0{stop-color:#1E2A23;stop-opacity:0}.g-shade1{stop-color:#1E2A23;stop-opacity:.16}
.c-shadeov{pointer-events:none}
.scene .c-window,.scene .c-window2,.scene .c-glass,.scene .c-glass2{stroke:#1E2A23;stroke-opacity:.12;stroke-width:.7}
.scene .a-float{filter:drop-shadow(3px 4px 3px #3a302022)}
[data-theme=dark] .c-far,[data-theme=dark] .c-far2{fill:#0E1420;opacity:.55}
[data-theme=dark] .c-groundlip{fill:#3a382e;opacity:.6}[data-theme=dark] .c-tuft{stroke:#4E6B52}[data-theme=dark] .c-pebble{fill:#45443a}
[data-theme=dark] .c-contact{fill:#000;opacity:.35}
[data-theme=dark] .g-lit{stop-opacity:0}[data-theme=dark] .g-shade1{stop-color:#000;stop-opacity:.32}
[data-theme=dark] .scene .a-float{filter:drop-shadow(3px 4px 4px #0006)}
/* surroundings */
.c-walk{fill:#E9E1D0}.c-walk-s{fill:none;stroke:#D4C9B1;stroke-width:1}.c-kerb{fill:#CFC3A8}
.c-road{fill:#8C8C86}.c-dash{fill:none;stroke:#FFFCF6;stroke-width:1.6;stroke-linecap:round}
.c-stem{fill:none;stroke:#5C8E5E;stroke-width:1.2}
.c-pole{fill:#3A4840}.c-pole-s{fill:none;stroke:#3A4840;stroke-width:1.6;stroke-linecap:round}.c-lampglass{fill:#FFF3C4}.c-lampglow{fill:#FFD27A;opacity:0;transition:opacity 1.8s ease}
.c-hay-s{fill:none;stroke:#C9A445;stroke-width:1;stroke-linecap:round}
.c-sea{fill:#BFD9DE}.c-sea-s{fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round;opacity:.8}.c-snow{fill:#fff;opacity:.85}
.c-field{fill:#C9D79E;opacity:.75}.c-field-s{fill:none;stroke:#A9BC7C;stroke-width:1.2;stroke-linecap:round}
[data-theme=dark] .c-walk{fill:#3a382f}[data-theme=dark] .c-walk-s{stroke:#2e2c25}[data-theme=dark] .c-kerb{fill:#2c2a23}
[data-theme=dark] .c-road{fill:#2b2c2a}[data-theme=dark] .c-dash{stroke:#8f8a7c}
[data-theme=dark] .c-pole,[data-theme=dark] .c-pole-s{fill:#8f9a90;stroke:#8f9a90}[data-theme=dark] .c-pole-s{fill:none}
[data-theme=dark] .c-lampglass{fill:#FFD27A}[data-theme=dark] .c-lampglow{opacity:.45}
[data-theme=dark] .c-sea{fill:#1E2E44}[data-theme=dark] .c-sea-s{opacity:.25}[data-theme=dark] .c-snow{opacity:.35}
[data-theme=dark] .c-field{fill:#2E4636}[data-theme=dark] .c-field-s{stroke:#3A5845}
.c-door{fill:#2F5B48}.c-door2{fill:#7E9C86}.c-pot{fill:#D98B6A}.c-leaf{fill:#6E9C78}.c-leaf2{fill:#4E7D5E}.c-trunk{fill:#8A6A4E}
.c-hill{fill:#9DBC94}.c-hill2{fill:#C3D6B5}.c-crop{fill:none;stroke:#5C8E5E;stroke-width:2.2;stroke-linecap:round}
.c-pin{fill:#D9663F}.c-shadow{fill:#00000022}.c-orbit{fill:none;stroke:#9DB8A4;stroke-width:1.5;stroke-dasharray:4 6}
.c-asphalt{fill:#8C8C86}.c-curb{fill:#E9E1D0}.c-bayline{fill:none;stroke:#FFFCF6;stroke-width:2;stroke-linecap:round}
[data-theme=dark] .c-asphalt{fill:#3C3D3A}[data-theme=dark] .c-curb{fill:#5A574C}[data-theme=dark] .c-bayline{stroke:#CFC8B8}.c-sky2{fill:#3F6FB5}.c-ptext{fill:#fff;font:800 28px var(--display)}
.c-signtext{fill:#FFFCF6;font:800 9px var(--font);letter-spacing:.14em}
.c-open{fill:#2F7A50}.c-opentext{fill:#fff;font:800 6.5px var(--font);letter-spacing:.1em}
.c-blink{fill:#E2574C}
.c-ivory-s{fill:none;stroke:#FFFCF6;stroke-width:2}.c-ink-s{fill:none;stroke:#1E2A23;stroke-width:1.6;stroke-linecap:round}.c-peach-s{fill:none;stroke:#D98B6A;stroke-width:3}
.a-float{animation:float 6s ease-in-out infinite;transform-box:fill-box}
.a-drift{animation:drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--d,0s) * -1)}
.a-sway{animation:sway 3.6s ease-in-out infinite;animation-delay:calc(var(--d,0s) * -1)}
.a-twinkle{animation:twinkle 4.5s ease-in-out infinite;animation-delay:calc(var(--d,0s) * -1)}
.a-spin{animation:spin 26s linear infinite}
.a-spin-slow{animation:spin 40s linear infinite}
.a-blink{animation:blink 1.6s steps(2) infinite}
.a-blink2{animation:blink2 3s ease-in-out infinite}
.a-bounce{animation:bounce 2.4s cubic-bezier(.4,0,.3,1) infinite}
.a-bob{animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--d,0s) * -1)}
.a-sweep{animation:sweep 5s ease-in-out infinite}
.a-shine{animation:twinkle 5s ease-in-out infinite;opacity:.4}
.a-smoke{animation:smoke 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes drift{from{transform:translateX(-10px)}to{transform:translateX(14px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%{opacity:1}100%{opacity:.2}}
@keyframes blink2{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes sweep{0%,20%{transform:translateY(-40px);opacity:0}50%{opacity:.5}80%,100%{transform:translateY(100px);opacity:0}}
@keyframes smoke{0%{transform:translateY(6px);opacity:0}30%{opacity:.9}100%{transform:translateY(-10px);opacity:0}}
@keyframes pulse{50%{opacity:.4}}
.scene.still *,.paused .scene *{animation-play-state:paused!important}

/* ===================================================================== theme change ("sunlight through a room") */
/* Ported from the Manila Tower portal. Sits above everything (dialogs included) but never takes pointer events. */
.theme-sun-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.theme-sun-scrim{position:absolute;inset:0;opacity:0;will-change:opacity}
.theme-sun-glow{position:absolute;left:50%;top:-15%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);opacity:0;will-change:opacity;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,214,150,.6) 0%,rgba(255,186,107,.32) 24%,rgba(255,170,90,.12) 42%,rgba(255,170,90,0) 62%)}
/* To dark: the warm glow fades as the room dims; the scrim (old, lighter colour) rises, then clears. */
.theme-sun-to-dark .theme-sun-scrim{animation:theme-sun-scrim-dim .5s cubic-bezier(.4,0,.2,1) forwards}
.theme-sun-to-dark .theme-sun-glow{animation:theme-sun-glow-fade .5s cubic-bezier(.4,0,.2,1) forwards}
/* To light: the scrim (old, darker colour) masks the flip and clears while warm sunlight blooms in. */
.theme-sun-to-light .theme-sun-scrim{animation:theme-sun-scrim-clear .5s cubic-bezier(.4,0,.2,1) forwards}
.theme-sun-to-light .theme-sun-glow{animation:theme-sun-glow-bloom .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes theme-sun-scrim-dim{0%{opacity:0}55%{opacity:.4}100%{opacity:0}}
@keyframes theme-sun-glow-fade{0%{opacity:.85}60%{opacity:.18}100%{opacity:0}}
@keyframes theme-sun-scrim-clear{0%{opacity:.4}60%{opacity:.1}100%{opacity:0}}
@keyframes theme-sun-glow-bloom{0%{opacity:0}45%{opacity:.8}80%{opacity:.3}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.theme-sun-overlay{display:none}}
[data-motion=reduced] .theme-sun-overlay{display:none}

/* ===================================================================== pickers (dropdown lists, calendar) */
.styled-dates input[type=date].input{cursor:pointer;padding-right:44px;background:var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E9C86' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='3'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E") no-repeat right 13px center/19px}
.styled-dates input[type=date]::-webkit-calendar-picker-indicator{display:none}
.select[aria-expanded=true],.styled-dates input[type=date][aria-expanded=true]{border-color:var(--sage-d);box-shadow:0 0 0 4px color-mix(in srgb,var(--sage) 25%,transparent)}
.picker{position:fixed;inset:auto;margin:0;z-index:300;width:auto;height:auto;max-height:min(380px,var(--avail,380px));display:flex;flex-direction:column;overflow:hidden;padding:6px;background:var(--ivory);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 6px -2px #1e2a231f,var(--shadow-2);animation:pickIn .16s cubic-bezier(.2,1,.4,1);transform-origin:top center}
.picker[data-side=top]{transform-origin:bottom center}
@keyframes pickIn{from{opacity:0;transform:translateY(-4px) scale(.97)}}
.picker-opts{overflow-y:auto;overscroll-behavior:contain;outline:none;display:grid;gap:2px;padding:2px;scrollbar-width:thin}
.picker-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;font-size:15px;line-height:1.3;color:var(--ink-2);transition:background .1s}
.picker-opt .ico{width:18px;height:18px;stroke-width:2.4;color:var(--sage-d);visibility:hidden}
.picker-opt.active{background:var(--sage-l);color:var(--ink)}
.picker-opt[aria-selected=true]{font-weight:700;color:var(--ink)}
.picker-opt[aria-selected=true] .ico{visibility:visible}
.picker-opt[aria-disabled=true]{opacity:.45;cursor:default}
.picker-search{position:relative;padding:2px 2px 8px;margin-bottom:6px;border-bottom:1px solid var(--line-2)}
.picker-search .ico{position:absolute;left:14px;top:calc(50% - 3px);transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
.picker-search .input{min-height:40px;padding:8px 12px 8px 38px;border-radius:12px;font-size:14.5px}
.picker-empty{margin:0;padding:16px;text-align:center;color:var(--muted);font-size:14px}
.picker-cal{width:316px;padding:12px 12px 8px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 10px}
.cal-h b{font-family:var(--display);font-size:17px;font-weight:750;letter-spacing:-.025em}
.cal-nav{width:36px;height:36px;border-radius:12px}
.cal-nav .ico{width:18px;height:18px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-wd{padding:2px 0 6px;text-align:center;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cal-d{aspect-ratio:1;border:0;border-radius:12px;background:none;color:var(--ink);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .1s}
.cal-d:hover{background:var(--sage-l)}
.cal-d.out{color:var(--muted);opacity:.6}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--sage);color:var(--sage-d);font-weight:800}
.cal-d[aria-selected=true]{background:var(--sage-d);color:#fff;box-shadow:var(--shadow-btn)}
[data-theme=dark] .cal-d[aria-selected=true]{color:#11251a}
.cal-d:disabled{opacity:.28;cursor:not-allowed;background:none}
.cal-d:focus-visible,.cal-nav:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.cal-f{display:flex;justify-content:space-between;margin-top:8px;padding-top:4px;border-top:1px solid var(--line-2)}
.cal-f .text-btn{padding:8px 10px}
.cal-f .text-btn:disabled{opacity:.4;cursor:not-allowed}

/* touch screens: pickers rise from the bottom as sheets, with the field's name and roomy rows */
.picker.sheet{left:0;right:0;top:auto;bottom:0;width:100%;min-width:0!important;max-width:none;max-height:min(72dvh,560px);padding:8px 14px calc(14px + var(--safe-b));border-radius:26px 26px 0 0;border-width:1px 0 0;box-shadow:0 0 0 100vmax #1e2a2366,0 -10px 40px -12px #1e2a2340;animation:sheetIn .28s cubic-bezier(.2,1,.3,1)}
.picker.sheet::before{content:"";display:block;flex:0 0 auto;width:44px;height:5px;margin:2px auto 6px;border-radius:3px;background:var(--line)}
.picker-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;padding:0 2px 8px}
.picker-title b{font:750 18px/1.2 var(--display);letter-spacing:-.02em}
.picker-title .icon-btn{width:40px;height:40px}
.picker.sheet .picker-opt{min-height:52px;padding:12px 14px;font-size:16px}
.picker.sheet .picker-search .input{min-height:46px;font-size:16px}
.picker-cal.sheet{width:100%}
.picker-cal.sheet .cal-grid{gap:4px;max-width:440px;width:100%;margin:0 auto}
.picker-cal.sheet .cal-h{max-width:440px;width:100%;margin:0 auto}
.picker-cal.sheet .cal-d{font-size:16px}
.picker-cal.sheet .cal-f{max-width:440px;width:100%;margin:8px auto 0}

/* calendar: month title opens a month-and-year view */
.cal-title{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--ink);font-family:var(--display);font-size:17px;font-weight:750;letter-spacing:-.025em;padding:6px 10px;border-radius:12px;cursor:pointer}
.cal-title .ico{width:15px;height:15px;transform:rotate(90deg);color:var(--muted)}
.cal-title:hover{background:var(--sage-l)}.cal-title:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.cal-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 0 2px}
.cal-m{min-height:46px;border:0;border-radius:14px;background:none;color:var(--ink);font-size:15px;font-weight:650;cursor:pointer}
.cal-m:hover{background:var(--sage-l)}.cal-m.today{box-shadow:inset 0 0 0 1.5px var(--sage);color:var(--sage-d)}
.cal-m[aria-pressed=true]{background:var(--sage-d);color:#fff}[data-theme=dark] .cal-m[aria-pressed=true]{color:#11251a}
.cal-m:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.picker-cal.sheet .cal-months{max-width:440px;width:100%;margin:0 auto}
/* attention list: titles wrap instead of being cut off; the amount sits under the text */
.att-list .t,.att-list .s{white-space:normal}
.att-list .att-amt{display:block;margin-top:3px;font-size:15px;font-variant-numeric:tabular-nums}
.att-list .li{align-items:flex-start}.att-list .li>.btn{align-self:center}
/* dialog titles without a subtitle sit level with their icon */
.dlg-h .grow{align-self:center}

/* notifications: unread count on the bell, unread rows, sections */
#bellBtn{position:relative}
#bellBtn[data-count]::after{content:attr(data-count);position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#D4672E;color:#fff;font:800 11px/19px var(--font);text-align:center;box-shadow:0 0 0 2px var(--cream)}
.n-sec{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.n-sec .text-btn{padding:6px 2px;min-height:0}
.att-list .li{position:relative}
.att-list .li.unread .t{font-weight:750}
.att-list .li.read{opacity:.78}
.n-dot{position:absolute;left:-10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#D4672E}
.n-promo{align-items:center}.n-promo .btn{flex:0 0 auto}
.n-foot{margin-top:4px}
.n-kinds{display:grid;gap:2px;margin:6px -12px 0}
.n-device{display:grid;gap:8px}.n-device .check{margin-inline:-12px}

/* team access */
.team-people{margin-top:14px}.team-people .li{gap:10px}.team-role{width:auto;min-height:38px;padding:6px 34px 6px 10px;font-size:14px}
.team-status.error{color:var(--neg);font-weight:700}.team-status.offline{color:var(--warn)}
.team-progress{display:grid;gap:8px;margin-top:12px}
.team-progress .bar{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
.team-progress .bar span{display:block;height:100%;border-radius:inherit;background:var(--sage-d);transition:width .2s ease}

/* bottom bar: a round, raised Add button in the brand green, labelled like its neighbours */
@media (max-width:1024px){
  .dock button.fab{background:none;color:var(--ink-2);margin:0;align-content:end;padding-bottom:8px;position:relative}
  .dock button.fab .fab-c{position:absolute;left:50%;top:-26px;width:54px;height:54px;margin-left:-27px;border-radius:50%;display:grid;place-items:center;color:#fff;
    background:linear-gradient(150deg,#3E7A5C 0%,#2F5B48 55%,#244838 100%);box-shadow:0 0 0 5px var(--cream),0 12px 22px -8px #244838aa,inset 0 1px 0 #ffffff33;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
  .dock button.fab .fab-c .ico{width:26px;height:26px;stroke-width:2.4;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
  .dock button.fab:hover .fab-c{transform:translateY(-2px)}
  .dock button.fab:active .fab-c{transform:scale(.92)}
  .dock button.fab[aria-expanded=true] .fab-c .ico,.dock button.fab:active .fab-c .ico{transform:rotate(90deg)}
  .dock button.fab:focus-visible{outline:none}.dock button.fab:focus-visible .fab-c{box-shadow:0 0 0 5px var(--cream),0 0 0 8px var(--focus)}
  [data-theme=dark] .dock button.fab .fab-c{background:linear-gradient(150deg,#5E9C78 0%,#3E7A5C 55%,#2F5B48 100%);box-shadow:0 0 0 5px var(--cream),0 12px 22px -8px #000a,inset 0 1px 0 #ffffff22}
}
/* Add sheet: six tiles with a one-line hint each */
.add-grid{gap:10px}
.add-tile{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:20px;background:var(--ivory);color:var(--ink);text-align:left;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.5,.5,1),border-color .15s,background .15s}
.add-tile:hover{border-color:var(--sage);background:var(--sage-ll)}.add-tile:active{transform:scale(.97)}
.add-tile .qi{flex:0 0 auto;width:44px;height:44px;border-radius:15px;display:grid;place-items:center}
.add-tile .qi .ico{width:22px;height:22px}
.add-tile .qi.sage{background:var(--sage-l);color:var(--sage-dd)}.add-tile .qi.butter{background:var(--butter-l);color:var(--warn)}
.add-tile .qi.peach{background:var(--peach-l);color:var(--neg)}.add-tile .qi.lav{background:var(--lav-l);color:var(--ink-2)}
.add-tile b{display:block;font-size:15px;line-height:1.25}.add-tile small{display:block;font-size:12.5px;line-height:1.3;color:var(--muted);margin-top:2px}
@media (max-width:380px){.add-grid{grid-template-columns:1fr}}

/* property type details */
.units-parts{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--ivory)}
.units-parts summary{cursor:pointer;font-weight:700;font-size:14.5px}
.units-parts[open] summary{margin-bottom:6px}.units-parts .row{margin-top:10px}
.type-fields{display:grid;gap:10px;padding:14px;border-radius:var(--r);background:var(--sage-ll);border:1px solid var(--sage-l)}
.area-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.area-in .select{width:auto;min-width:112px}

/* property setup steps */
.wiz-nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:wiz}
.wiz-nav button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 4px;border-radius:12px;cursor:pointer;text-align:left;color:var(--muted);font:inherit}
.wiz-nav button:hover{background:var(--sage-ll)}
.wiz-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;border:1.5px solid var(--line);background:var(--ivory)}
.wiz-t{display:grid;min-width:0}.wiz-t b{font-size:13.5px;color:var(--ink-2)}.wiz-t small{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiz-nav [aria-current=step] .wiz-n{background:var(--sage-d);border-color:var(--sage-d);color:var(--ivory)}.wiz-nav [aria-current=step] .wiz-t b{color:var(--ink)}
.wiz-nav .done .wiz-n{background:var(--sage-l);border-color:var(--sage-l);color:var(--sage-dd)}
.wiz-step{display:grid;gap:16px}.wiz-step[hidden]{display:none}
.dlg-f .grow{flex:1}
.seg-opt{display:inline-flex;cursor:pointer}.seg-opt span{padding:8px 14px;border-radius:999px}.seg-opt input:checked+span{background:var(--sage-d);color:var(--ivory)}.seg-opt input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.add-tile.primary{border-color:var(--sage-d);background:var(--sage-ll)}
@media (max-width:760px){.wiz-nav{display:flex;gap:4px}.wiz-nav li{flex:0 0 auto}.wiz-nav li:has([aria-current=step]){flex:1 1 auto;min-width:0}.wiz-t{display:none}.wiz-nav [aria-current=step] .wiz-t{display:grid}.wiz-t small{display:none}}

/* ===================================================================== responsive */
@media (max-width:1200px){
  .quick{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  :root{--side:0px}
  .sidebar{transform:translateX(-102%);transition:transform .28s ease;width:min(290px,84vw);box-shadow:var(--shadow-2);z-index:80;height:100dvh;padding-top:calc(22px + env(safe-area-inset-top,0px));padding-bottom:calc(18px + var(--safe-b));overscroll-behavior:contain}
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:#1e2a2355;z-index:75;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.open{opacity:1;pointer-events:auto}
  .hero{grid-template-columns:1fr}
  .hero-art{max-width:440px;width:100%;justify-self:center}
  .rent-overview,.detail-hero{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1025px){.menu-btn,.scrim{display:none!important}}
@media (max-width:760px){
  body{font-size:16px}
  .topbar{padding:0 14px;height:62px}
  .searchbox{display:none}
  .sync span{display:none}
  .sync{padding:8px}
  .content{padding:16px 16px calc(var(--dock) + 28px + var(--safe-b))}
  .page-h{margin-bottom:18px}
  .page-h .acts{width:100%}
  .page-h .acts .btn{flex:1}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .row.keep{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
  .money-grid{grid-template-columns:1fr 1fr}
  .money-grid .mcard.hero-m{grid-column:1/-1}
  .mcard{padding:15px 16px;border-radius:20px}
  .mcard .v{font-size:23px}
  .quick{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 12px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
  .quick::-webkit-scrollbar{display:none}
  .quick .qa{flex:0 0 138px;scroll-snap-align:start}
  .hero{padding:24px 20px;border-radius:26px;min-height:0}
  .hero h1{font-size:44px}
  .hero-art{max-width:none;transform:none}
  .hero .acts .btn{flex:1}
  .card{padding:18px;border-radius:22px}
  .prop-card{width:min(78vw,300px)}
  .prop-grid .prop-card{width:auto}
  .toolbar .input,.toolbar .select{max-width:none;flex-basis:100%}
  table.t.responsive thead{display:none}
  table.t.responsive,table.t.responsive tbody,table.t.responsive tr,table.t.responsive td{display:block;width:100%}
  table.t.responsive tr{padding:12px 4px;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  table.t.responsive td{padding:0;border:0;text-align:left!important;min-width:0;overflow-wrap:anywhere}
  table.t.responsive td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
  table.t.responsive td.primary{grid-column:1/-1}
  table.t.responsive td.act{grid-column:1/-1}
  /* the row's buttons share the width (two full-width buttons on one line made the row twice the screen wide) */
  table.t.responsive td.act{display:flex;gap:8px;white-space:normal!important;margin-top:6px}
  table.t.responsive td.act .btn{flex:1 1 0;width:auto;min-width:0}
  .table-wrap:has(> table.t.responsive){overflow-x:visible;margin:0}
  table.t.responsive tbody tr:hover{background:none}
  .split-row{grid-template-columns:auto minmax(0,1fr) 108px;grid-template-areas:"c w s" "c i i"}
  .split-row .check{grid-area:c}.split-row .who{grid-area:w}.split-row .share{grid-area:s}.split-row .inp{grid-area:i}
  .cal{gap:3px}
  .cal .day{min-height:62px;padding:5px;border-radius:11px}
  .cal .ev{font-size:12px;color:transparent;padding:0;height:6px;border-radius:3px;line-height:6px;overflow:hidden}
  .cal .more{display:none}
  .cal .dow{font-size:11px;letter-spacing:.04em}
  .dock{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + var(--safe-b));z-index:70;background:color-mix(in srgb,var(--ivory) 92%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);border-radius:26px;padding:6px;box-shadow:var(--shadow-2);height:var(--dock)}
  .dock a,.dock button{display:grid;justify-items:center;align-content:center;gap:3px;text-decoration:none;color:var(--muted);font-size:11.5px;font-weight:700;border:0;background:none;border-radius:20px;cursor:pointer;min-height:56px}
  .dock a[aria-current=page]{color:var(--ink);background:var(--sage-l)}
  .dock .ico{width:22px;height:22px}
  .toasts{left:16px;right:16px;bottom:calc(var(--dock) + 22px + var(--safe-b));width:auto}
  dialog.dlg,dialog.dlg.wide,dialog.dlg.narrow{max-width:100vw;margin:auto 0 0;width:100vw;max-height:94dvh}
  .dlg-card{border-radius:28px 28px 0 0;max-height:94dvh}
  dialog.dlg[open] .dlg-card{animation:sheetIn .32s cubic-bezier(.2,1,.3,1)}
  .dlg-card::before{content:"";width:44px;height:5px;border-radius:9px;background:var(--line);margin:10px auto 0;flex:0 0 auto}
  .dlg-h{padding:14px 20px 12px;border-bottom:1px solid var(--line-2)}.dlg-b{padding:14px 20px 16px}.dlg-f{padding:14px 20px calc(14px + var(--safe-b))}
  .dlg-f .btn{flex:1}
  .dlg-f .left{flex-basis:100%;order:3}
  /* landing on mobile: dials anchored at top corners */
  .landing{grid-template-columns:1fr 1fr;grid-template-rows:minmax(170px,34dvh) 1fr auto;touch-action:none}
  .landing-side{height:100%}
  .landing-month{grid-column:1;grid-row:1}.landing-date{grid-column:2;grid-row:1}
  .landing-center{grid-column:1/-1;grid-row:2;align-self:start;padding:6px 18px 8px}
  .landing{--dial:min(84vw,46dvh)}
  .rotary{--size:var(--dial)}
  .landing-month .rotary{left:calc(var(--size) * -.6)}
  .landing-date .rotary{right:calc(var(--size) * -.6)}
  /* row between the dials: the chosen date's reminder chip, centred */
  .dial-link{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;grid-column:1/-1;grid-row:1;align-self:center;z-index:3;pointer-events:none;padding-inline:calc(var(--dial) * .4 + 8px)}
  .dial-rem[hidden]{display:none}
  .dial-rem{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:52vw;padding:5px 11px;border-radius:999px;background:var(--butter-l);border:1.5px solid color-mix(in srgb,var(--butter) 70%,var(--line));color:var(--warn);font-size:12.5px;font-weight:700;line-height:1.4;box-shadow:var(--shadow-1);animation:todayIn .25s cubic-bezier(.2,1.3,.4,1)}
  .dial-rem .ico{width:14px;height:14px;flex:0 0 auto;stroke-width:2.2}
  .dial-rem .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .dial-rem b{flex:0 0 auto;font-size:11px;opacity:.85}
  .landing h1{margin:18px 0 12px;font-size:clamp(44px,13vw,64px)}
  /* its own row on phones, so it never sits on top of the content */
  .landing-foot{position:relative;left:auto;right:auto;bottom:auto;grid-column:1/-1;grid-row:3;padding:6px 12px calc(10px + var(--safe-b))}
  .landing-readout{margin-top:14px}
  .landing-links a{padding:10px 7px;letter-spacing:.1em}
  .landing-foot{justify-content:center}
  .get-app-center{margin-top:12px}
  .get-app{min-height:40px;padding:7px 14px 7px 11px;font-size:13.5px}
  .brand-btn .brand-mark{width:68px;height:68px}
}
/* Shorter phones: compact the welcome screen so the footer (Privacy, Terms, Get the app) stays on screen */
@media (max-width:760px) and (max-height:820px){
  .landing{grid-template-rows:minmax(150px,27dvh) 1fr auto}
  .landing{--dial:min(80vw,38dvh)}
  .brand-btn .brand-mark{width:54px;height:54px}
  .brand-btn{gap:4px}
  .landing h1{margin:10px 0 8px;font-size:clamp(36px,10.5vw,52px)}
  .landing-lede{font-size:15px;margin-bottom:16px}
  .enter-btn{padding:13px 14px 13px 24px}
  .landing-readout{margin-top:10px}
}
/* Very short phones (iPhone SE size): a little tighter still, so Privacy and Terms stay on screen */
@media (max-width:760px) and (max-height:700px){
  .landing{grid-template-rows:minmax(130px,23dvh) 1fr auto}
  .landing{--dial:min(76vw,34dvh)}
  .brand-btn .brand-mark{width:46px;height:46px}
  .landing h1{margin:6px 0 6px;font-size:clamp(34px,10vw,46px)}
  .landing-lede{font-size:14.5px;line-height:1.5;margin-bottom:12px}
  .enter-btn{padding:11px 12px 11px 22px}
  .get-app-center{margin-top:8px;min-height:38px}
  .landing-readout{margin-top:6px}
  .landing-foot{padding-top:2px}
}
@keyframes todayIn{from{transform:scale(.85);opacity:.4}}
@keyframes sheetIn{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
@media (max-width:380px){.money-grid{grid-template-columns:1fr}.mcard .v{font-size:22px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
[data-motion=reduced] *,[data-motion=reduced] *::before,[data-motion=reduced] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
@media print{.sidebar,.topbar,.dock,.toasts{display:none!important}.main{margin:0}.content{padding:0}}

.sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* quick expense */
.exp-mode{margin-bottom:14px;width:max-content;max-width:100%}
.date-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip-btn{border:1px solid var(--line-2);background:var(--ivory);color:var(--ink-2);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:650;cursor:pointer;min-height:30px}
.chip-btn[aria-pressed=true]{background:var(--sage-ll);border-color:var(--sage);color:var(--ink)}
.exp-more summary .muted{font-weight:500;margin-left:4px}
.add-grid .add-tile.wide{grid-column:1/-1}
/* bills & property quick bar */
.prop-quick{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
@media (max-width:760px){.prop-quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.prop-quick::-webkit-scrollbar{display:none}.prop-quick .btn{flex:0 0 auto}}
.li-main{background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;display:grid;gap:2px;min-width:0}
.li-main .t{font-weight:650}.li-main .s{color:var(--muted);font-size:13px}
.bill-row .r{display:grid;justify-items:end;gap:4px}
@media (max-width:760px){
  .bill-row,.plan-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tile main amt" "tile pill act";column-gap:12px;row-gap:6px;align-items:center}
  .bill-row>.date-tile,.plan-row>.li-ico{grid-area:tile;align-self:start}.bill-row .li-main,.plan-row .li-main{grid-area:main}
  .bill-row .r,.plan-row .r{display:contents}.bill-row .r b{grid-area:amt;justify-self:end}.bill-row .r .pill,.plan-row .r .pill{grid-area:pill;justify-self:start}
  .bill-row>.btn,.plan-row>.btn{grid-area:act;justify-self:end}
  .plan-row{grid-template-areas:"tile main main" "tile pill act"}
  .li-main .t,.li-main .s{overflow-wrap:anywhere;white-space:normal;text-overflow:clip}
}
/* reminder center */
.rc-tabs{margin:12px 0 10px;max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.rc-tabs::-webkit-scrollbar{display:none}.rc-tabs button{flex:0 0 auto}[data-rc],.rc-panel{min-width:0;max-width:100%}.n-timing{align-items:end}.rc-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--line-2);font-size:11.5px;margin-left:4px}
.rc-row .rc-acts,.rc-sugg .rc-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.snooze{position:relative}.snooze>summary{list-style:none;cursor:pointer}.snooze>summary::-webkit-details-marker{display:none}
.snooze-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;display:grid;min-width:180px;padding:6px;border-radius:14px;background:var(--ivory);border:1px solid var(--line-2);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.snooze-menu button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:10px;font:inherit;color:var(--ink);cursor:pointer;min-height:40px}.snooze-menu button:hover,.snooze-menu button:focus-visible{background:var(--sage-ll)}
.rc-delivery{margin-bottom:4px}
@media (max-width:760px){.rc-row{flex-wrap:wrap}.rc-row .rc-acts{width:100%;padding-left:62px;justify-content:flex-start}.rc-tabs{overflow-x:auto;flex-wrap:nowrap}}
.rc-sugg .t,.rc-sugg .s{white-space:normal;overflow:visible;text-overflow:clip}
/* dashboard: setup checklist and What needs you */
.setup-card{margin-bottom:18px}
.setup-bar{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden;margin:4px 0 12px}.setup-bar span{display:block;height:100%;background:var(--sage-d);border-radius:99px;transition:width .4s}
.setup-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.setup-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}.setup-list li:last-child{border-bottom:0}
.setup-list b{display:block;font-weight:650}.setup-list small{display:block;color:var(--muted);font-size:13px}
.setup-tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:0 0 auto}.setup-tick .ico{width:15px;height:15px}
.setup-list li.done .setup-tick{background:var(--sage-d);border-color:var(--sage-d);color:var(--ivory)}.setup-list li.done b{color:var(--muted);text-decoration:line-through}
.setup-list li.skipped{opacity:.6}
.setup-acts{display:flex;gap:10px;align-items:center}
.needs{margin-bottom:22px}.needs-tabs{margin:2px 0 8px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.needs-tabs::-webkit-scrollbar{display:none}.needs-tabs button{flex:0 0 auto}
.rc-n.bad{background:var(--neg-bg);color:var(--neg)}
.need-row{gap:12px}.need-open{border:0;background:none;padding:0;cursor:pointer}.need-open .date-tile{display:block}.need-acts{display:flex;gap:8px;flex:0 0 auto}.need-amt{white-space:nowrap}
@media (max-width:760px){
  .setup-list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:8px}.setup-acts{grid-column:2}.setup-list li>.text-btn{grid-column:2;justify-self:start}
  .need-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:6px}
  .need-row>.need-open,.need-row>.date-tile{grid-row:span 2;align-self:start}.need-row .need-amt{justify-self:end}
  .need-row>.need-acts{grid-column:2 / -1}
  .need-row .t,.need-row .s{white-space:normal}
}
@media (max-width:420px){.seg[aria-label="Theme"],.seg[aria-label="Motion"]{flex-wrap:wrap;border-radius:20px;overflow:visible}.seg[aria-label="Theme"] button,.seg[aria-label="Motion"] button{flex:1 1 auto}}
@media (max-width:520px){.n-timing{grid-template-columns:1fr 1fr}.n-timing .select{width:100%}.n-timing>p{grid-column:1/-1}}
#notifCard .card-h{flex-wrap:wrap;gap:8px}#notifCard .card-h .pill{white-space:normal}
/* The welcome page (dials) keeps its light look in every theme: light colours are restored inside it, and the
   handful of dark-only rules that reach into it are undone. */
[data-theme=dark] .landing{
  --cream:#F5F0E6; --ivory:#FFFCF6; --ink:#1E2A23; --ink-2:#3A4840; --muted:#6F6A60; --line:#E6DDCC; --line-2:#EFE8DA;
  --sage:#7E9C86; --sage-d:#2F5B48; --sage-dd:#244838; --sage-l:#E2EADF; --sage-ll:#EEF3EB;
  --peach:#F2CDB4; --peach-l:#FBE9DD; --butter:#F4DE95; --butter-l:#FBF2D3; --lav:#D9D3EC; --lav-l:#EEEBF7; --warm:#8E877B;
  --pos:#2F7A50; --pos-bg:#E3F0E6; --neg:#A9542C; --neg-bg:#FBE6DA; --warn:#8A6510; --warn-bg:#FAF0CC; --info-bg:#E8E5F5;
  --focus:#2F5B48; --shadow-1:0 1px 2px #1e2a230d,0 6px 18px -8px #1e2a2326; --shadow-2:0 18px 50px -18px #1e2a2340; --shadow-btn:0 1px 0 #ffffff33 inset,0 2px 0 #1a3a2c,0 6px 14px -6px #1e2a2366;
  color-scheme:light;
  background:radial-gradient(120% 90% at 50% 40%,#FBF7EF 0,#F5F0E6 60%,#EFE7D8 100%);color:#1E2A23;
}
[data-theme=dark] .landing .rotary .disc{background:radial-gradient(circle at 50% 50%,#ECE4D5 0 52%,#E5DCCB 52.4% 100%);box-shadow:inset 0 0 0 1.5px #ffffffaa,inset 0 -18px 40px #cdbfa833,0 30px 60px -30px #6b5a3a44}
[data-theme=dark] .landing .rotary .ticks{background:repeating-conic-gradient(from 0deg,#c9bca5 0 .45deg,transparent .45deg 6deg)}
[data-theme=dark] .landing .rotary .lbl{color:#b5a88f}
[data-theme=dark] .landing .brand-mark{background-image:url(icon-light.png);filter:drop-shadow(0 8px 12px #1e2a2326)}
[data-theme=dark] .landing .tl-terra{color:#D4672E}
[data-theme=dark] .landing .btn-primary{--fg:#fff}
/* ---------------- calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mcal-nav{display:flex;align-items:center;gap:8px;min-width:0}
.mcal-nav h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;white-space:nowrap;margin:0 4px;flex:0 0 auto;text-align:center}
.mcal-nav h2 span{color:var(--muted);font-weight:600}
.cal-legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.cal-legend .pill{font-size:12px}
.cal-exp{border:1px dashed color-mix(in srgb,var(--sage) 60%,var(--line));background:transparent}
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cal-card{padding:14px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:6px 0}
.cal .dow-n{display:none}
.cal .day{min-height:112px;border-radius:16px;background:var(--ivory);border:1px solid var(--line-2);padding:8px;display:grid;align-content:start;gap:4px;min-width:0;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
.cal .day.wkend{background:color-mix(in srgb,var(--ivory) 70%,var(--cream))}
.cal .day:hover{border-color:var(--sage)}
.cal .day.out{background:transparent;border-color:transparent;opacity:.5}
.cal .day .d{font-weight:750;font-size:14px;font-variant-numeric:tabular-nums;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;margin:-3px 0 2px -3px}
.cal .day.today .d{background:var(--sage-d);color:var(--ivory)}
.cal .day.sel{border:2px solid var(--sage-d);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--sage-d) 70%,transparent);padding:7px}
.cal .ev{font-size:12px;font-weight:650;padding:3px 7px 3px 6px;border-radius:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--sage-l);color:var(--sage-dd);border-left:3px solid var(--sage)}
.cal .ev.projected{background:transparent;border:1px dashed color-mix(in srgb,var(--sage) 60%,var(--line));border-left-width:3px;color:var(--ink-2)}
.cal .ev.overdue{background:var(--neg-bg);color:var(--neg);border-left-color:var(--neg)}
.cal .ev.soon,.cal .ev.due{background:var(--butter-l);color:var(--warn);border-left-color:var(--warn)}
.cal .ev.done,.cal .ev.paid{background:var(--pos-bg);color:var(--pos);border-left-color:var(--pos)}
.cal .ev.lease{background:var(--lav-l);color:var(--ink-2);border-left-color:#8e86c9}
.cal .more{font-size:12px;color:var(--muted);font-weight:700}
.cal-day{position:sticky;top:calc(var(--top) + 16px);display:grid;gap:12px;padding:18px}
.cal-day-h{display:flex;gap:12px;align-items:center}.cal-day-h h3{font-size:18px;margin:0;line-height:1.25}.cal-day-h p{margin:2px 0 0}
.cal-none{color:var(--muted);font-size:14px;margin:0;padding:8px 2px}
.cal-later{border-top:1px solid var(--line-2);padding-top:12px;display:grid;gap:6px}
.cal-later .li-btn{gap:12px;padding:9px 10px}
.cal-later .t{display:block;font-weight:650;font-size:14px}.cal-later .s{display:block;font-size:12.5px;color:var(--muted)}
.cal-when{display:grid;justify-items:center;width:36px;line-height:1.05;flex:0 0 auto}.cal-when b{font-family:var(--display);font-size:18px}.cal-when small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dot{width:9px;height:9px;border-radius:50%;background:var(--sage);flex:0 0 auto}.dot.overdue{background:var(--neg)}.dot.soon,.dot.due{background:var(--warn)}.dot.done,.dot.paid{background:var(--pos)}.dot.lease{background:#8e86c9}.dot.projected{background:transparent;border:1.5px solid var(--sage)}
.cal-ev{gap:12px}.cal-ev .t,.cal-ev .s{white-space:normal}.cal-ev .t{font-weight:650}.cal-ev .s{font-size:13px;color:var(--muted)}
.cal-acts{display:flex;gap:6px;align-items:center;flex:0 0 auto}.icon-btn.sm{width:36px;height:36px;border-radius:11px}
.cal-ag-day{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-2)}.cal-ag-day:last-child{border-bottom:0}.cal-ag-day .grow{min-width:0;flex:1}
/* tablets and phones: the day panel moves under the grid and days show coloured dots */
@media (max-width:1100px){
  .cal-layout{grid-template-columns:1fr}.cal-day{position:static}
  .cal .day{display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px;min-height:76px}
  .cal .day .d{flex:0 0 100%;width:28px;max-width:28px}
  .cal .ev,.cal .ev.projected,.cal .ev.overdue,.cal .ev.soon,.cal .ev.due,.cal .ev.done,.cal .ev.paid,.cal .ev.lease{width:8px;height:8px;padding:0;border:0;border-radius:50%;font-size:12px;color:transparent;line-height:8px;text-indent:9px;white-space:nowrap;overflow:hidden;flex:0 0 auto;background:var(--sage)}
  .cal .ev.overdue{background:var(--neg)}.cal .ev.soon,.cal .ev.due{background:var(--warn)}.cal .ev.done,.cal .ev.paid{background:var(--pos)}.cal .ev.lease{background:#8e86c9}
  .cal .ev.projected{background:transparent;border:1.5px solid var(--sage)}
  .cal .more{font-size:11px;line-height:8px}
}
@media (max-width:760px){
  .cal-head{flex-direction:column;align-items:stretch}.mcal-nav{gap:6px}.mcal-nav h2{flex:1 1 auto;font-size:20px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .cal-head .seg{align-self:flex-start}
  .cal{gap:3px}.cal-card{padding:10px 8px}
  .cal .day{min-height:54px;padding:5px;border-radius:11px}.cal .day.sel{padding:4px}
  .cal .day .d{font-size:13.5px;width:24px;height:24px;max-width:24px;margin:-2px 0 1px -2px}
  .cal .dow{font-size:11px;letter-spacing:.04em}.cal .dow-s{display:none}.cal .dow-n{display:inline}
  .cal-day{padding:14px}
  .cal-ev{display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:8px}.cal-ev>.btn,.cal-ev>.cal-acts{grid-column:2;justify-self:start}
  .cal-ev .t,.cal-ev .s,.cal-later .t,.cal-later .s{white-space:normal}
}
/* ---------------- add-a-property tile (dashboard strip) */
.add-prop-card{width:220px;grid-template-rows:none;align-content:center;cursor:pointer;border:2px dashed color-mix(in srgb,var(--sage) 45%,var(--line));background:linear-gradient(160deg,var(--sage-ll),var(--ivory) 70%);box-shadow:none;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;padding:22px 18px;font:inherit;color:var(--ink)}
.add-prop-card .ap-ico{width:64px;height:64px;border-radius:20px;background:var(--sage-d);color:var(--ivory);display:grid;place-items:center;box-shadow:var(--shadow-btn);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.add-prop-card .ap-ico .ico{width:28px;height:28px}
.add-prop-card b{font-family:var(--display);font-size:19px;letter-spacing:-.02em}
.add-prop-card small{color:var(--muted);font-size:13px;max-width:16ch}
.add-prop-card:hover,.add-prop-card:focus-visible{border-color:var(--sage);transform:translateY(-3px)}
.add-prop-card:hover .ap-ico{transform:scale(1.08) rotate(-4deg)}
@media (max-width:760px){.add-prop-card{width:168px;padding:16px 12px}.add-prop-card .ap-ico{width:54px;height:54px;border-radius:17px}.add-prop-card b{font-size:17px}}
.cal-day .cal-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}.cal-day .cal-ev>.cal-acts{grid-column:2 / -1;justify-self:start}
@media (max-width:760px){.cal-head{min-width:0;max-width:100%}.mcal-nav{width:100%;max-width:100%}.mcal-nav .btn{padding-inline:12px;flex:0 0 auto}}@media (max-width:400px){.mcal-nav h2{font-size:18px}}