/* WM 3.1 — Conceptual Sketch. Colour is semantic only. */
:root{
  --paper:#f3f0e8;--white:#fcfbf7;--ink:#202124;--muted:#75736e;
  --line:#cfcbc1;--soft:#e9e6de;--red:#dc4841;--blue:#2d65aa;--yellow:#ddb42b;
  --graphite:#343537;--pencil:#96938c;--paper-deep:#e5e1d7;
  --shadow:0 14px 34px rgba(35,34,31,.08),0 2px 5px rgba(35,34,31,.05);
  --radius:18px;--sketch-line:1px solid rgba(47,47,45,.22)
}
html{background:var(--paper);font-family:'Quicksand','Arial Rounded MT Bold',Arial,sans-serif}
body{color:var(--ink);background-color:var(--paper);background-image:radial-gradient(circle at 17% 12%,rgba(32,33,36,.035) 0 1px,transparent 1.4px),radial-gradient(circle at 78% 42%,rgba(32,33,36,.025) 0 .8px,transparent 1.2px),linear-gradient(90deg,rgba(255,255,255,.22),transparent 33%,rgba(0,0,0,.012));background-size:17px 19px,23px 29px,100% 100%}.main:before{display:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
::selection{background:#d9d6cf;color:var(--ink)}
button,input,textarea,select{font:inherit}button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--graphite)!important;outline-offset:3px}

/* Calm tool strip */
.topbar{height:78px;background:rgba(252,251,247,.9);border:0;border-bottom:1px solid rgba(32,33,36,.17);box-shadow:0 3px 20px rgba(34,34,31,.035);backdrop-filter:blur(14px) saturate(.75)}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,transparent 2%,rgba(32,33,36,.06) 21%,transparent 46%,rgba(32,33,36,.045) 72%,transparent 98%);transform:rotate(-.04deg);pointer-events:none}
.brand{width:72px;height:42px;filter:saturate(.82) contrast(.98)}.top-actions{gap:7px}
.round-action,.capture,.avatar{width:42px;height:42px;border:var(--sketch-line);background:rgba(252,251,247,.82);border-radius:50%;box-shadow:0 5px 13px rgba(32,33,36,.06)}
.round-action:hover,.capture:hover,.avatar:hover{background:#fff;transform:translateY(-1px)}
.capture{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 7px 15px rgba(32,33,36,.17)}.capture:hover{background:#303135}
.avatar{background:var(--graphite)!important;color:#fff!important}.badge-wrap i{background:var(--graphite);border-color:var(--white)}

/* Editorial hierarchy and hand-drawn rules */
.main{max-width:1120px;padding-top:46px}.hero,.page-heading,.detail-head{position:relative;border:0}
.hero:after,.page-heading:after,.detail-head:after{content:"";display:block;width:100%;height:5px;margin-top:28px;background:linear-gradient(177deg,transparent 35%,rgba(45,45,42,.24) 38% 48%,transparent 51%),linear-gradient(181deg,transparent 50%,rgba(45,45,42,.1) 52% 59%,transparent 62%);background-size:100% 5px}
.hero p,.page-heading p,.detail-head p,.eyebrow,.section-head,.record-section>header p,.v19-budget-section header small,.v30-assistant header small,.v30-forecast header small,.life-group>header small,.library-section>header small{color:var(--pencil)!important;font-size:10px!important;letter-spacing:.16em!important;font-weight:700!important}
.hero h1{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:clamp(50px,7vw,78px);letter-spacing:-.045em;line-height:.9}
.page-heading h1,.detail-head h1{letter-spacing:-.055em;line-height:.95}
.hero>div>span,.page-heading>span,.detail-head>span{color:var(--muted);line-height:1.6}
.hero-mark{width:92px;height:82px;display:block;position:relative;opacity:.7;transform:rotate(-2deg)}
.hero-mark:before{content:"";position:absolute;inset:10px 14px;border:2px solid var(--pencil);border-radius:50%}
.hero-mark:after{content:"";position:absolute;width:22px;height:2px;background:var(--pencil);left:0;top:40px;box-shadow:70px 0 var(--pencil),35px -32px var(--pencil),35px 32px var(--pencil);transform:rotate(-2deg)}.hero-mark i{display:none}

/* Today as a composed notebook spread */
.today-layout{gap:24px;padding-top:26px}.day-stream,.today-feed,.dashboard-cards,.glance{position:relative}
.day-stream,.today-feed{background:rgba(252,251,247,.78);border:1px solid rgba(32,33,36,.25);border-radius:10px 15px 12px 9px;padding:22px 24px;box-shadow:var(--shadow);transform:rotate(-.08deg)}
.day-stream:before,.today-feed:before{content:"";position:absolute;width:15px;height:15px;top:-8px;left:50%;border-radius:50%;background:#555653;box-shadow:0 4px 7px rgba(0,0,0,.18)}
.section-head{border-bottom:1px solid rgba(32,33,36,.16);height:42px}.section-head b,.today-feed>header h2{position:relative;font-size:18px;letter-spacing:0}
.section-head b:after,.today-feed>header h2:after{content:"";position:absolute;left:0;bottom:-7px;width:45px;height:2px;background:var(--graphite);transform:rotate(-1.5deg)}
.stream-row{border-color:rgba(32,33,36,.13);grid-template-columns:62px 11px 1fr 32px}.stream-row>span,.agenda-list article>span,.dash-card>i,.life-card>i,.library-row em{font-family:Georgia,serif}
.task-row>button{border-radius:4px;background:transparent}.empty-inline,.soft-empty,.empty{color:var(--muted);font-style:italic}
.glance,.dashboard-cards{background:transparent;border:0;box-shadow:none;display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0}
.glance-card,.dash-card{position:relative;min-height:142px;border:1px solid rgba(32,33,36,.2)!important;background:rgba(252,251,247,.72)!important;color:var(--ink)!important;border-radius:15px 11px 14px 12px;padding:17px;box-shadow:0 7px 17px rgba(37,36,32,.045);overflow:hidden}
.glance-card:nth-child(2n),.dash-card:nth-child(2n){transform:rotate(.12deg)}.glance-card:nth-child(2n+1),.dash-card:nth-child(2n+1){transform:rotate(-.1deg)}
.glance-card:before,.dash-card:before{content:"";position:absolute;left:12px;right:12px;bottom:11px;height:1px;background:rgba(32,33,36,.1);transform:rotate(-.7deg)}
.glance-card>span,.dash-card>span{color:var(--pencil)!important;background:transparent!important}.glance-card>b,.dash-card b{color:var(--ink)}
.glance-card>small,.dash-card small,.dash-card p{color:var(--muted)!important}.next-up{background:rgba(227,224,216,.55);border:1px dashed rgba(32,33,36,.16)}
.today-alert-banner{border:1px dashed rgba(32,33,36,.28);background:rgba(252,251,247,.7);box-shadow:none}.today-alert-banner>span{background:var(--soft);color:var(--ink)}
.today-feed>header button{color:var(--graphite)}
.v30-assistant,.v30-forecast{background:rgba(252,251,247,.74);border:1px solid rgba(32,33,36,.22);border-radius:12px 16px 13px 10px;box-shadow:var(--shadow)}
.v30-assistant>header button,.v30-assistant>div>button,.v30-notification-list button{background:rgba(255,255,255,.45)!important;border-color:rgba(32,33,36,.14);color:var(--ink)}
.v30-assistant>div>button>.material-symbols-rounded,.v30-notification-list .material-symbols-rounded{background:var(--soft);color:var(--graphite)}
.v30-all-clear{background:rgba(229,228,222,.58)}.v30-all-clear>.material-symbols-rounded{color:var(--graphite)}
.v30-assistant footer button{color:var(--graphite);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:4px}

/* Agenda: the only calendar colours are owner colours */
.sync-bar{border-bottom:1px solid rgba(32,33,36,.16)}
.sync-bar button,.history-toggle,.filter-row button{background:rgba(252,251,247,.68);border:1px solid rgba(32,33,36,.18);border-radius:99px;box-shadow:none}
.filter-row button.active{background:var(--graphite);color:#fff;border-color:var(--graphite)}.filter-row button.active .dot{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.agenda-list section>header{border:0;position:relative;padding-bottom:13px}.agenda-list section>header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(178deg,transparent 25%,rgba(32,33,36,.25) 30% 43%,transparent 48%)}
.agenda-list article{border-color:rgba(32,33,36,.13)}
.agenda-list .today-section{border-left:0;margin-left:0;padding:18px 20px;background:rgba(252,251,247,.54);border:1px dashed rgba(32,33,36,.25);border-radius:12px}
.agenda-list .today-section>header em{background:var(--graphite);color:#fff;border-radius:99px}
.calendar-deadlines{background:rgba(252,251,247,.74);border-color:rgba(32,33,36,.2);border-radius:14px;box-shadow:var(--shadow)}.calendar-deadlines header button{color:var(--graphite)}

/* Lists as compact catalogue */
.library-section>header,.life-group>header,.v19-life-groups>section>header{border-bottom:1px solid rgba(32,33,36,.16);padding-bottom:10px}
.library-rows,.library-collection-grid{gap:8px}.library-row,.library-activate{background:rgba(252,251,247,.72);border:1px solid rgba(32,33,36,.18);border-radius:10px 13px 9px 12px;box-shadow:none}
.library-row:hover{box-shadow:0 8px 18px rgba(32,33,36,.07);transform:translateY(-1px) rotate(-.08deg)}
.library-icon{background:var(--soft);color:var(--graphite)}.library-icon.michiel{background:rgba(220,72,65,.12);color:var(--red)}.library-icon.wim{background:rgba(45,101,170,.12);color:var(--blue)}.library-icon.together{background:rgba(221,180,43,.18);color:#806300}
.library-row:has(.library-icon.michiel){border-left:3px solid var(--red)}.library-row:has(.library-icon.wim){border-left:3px solid var(--blue)}.library-row:has(.library-icon.together){border-left:3px solid var(--yellow)}
.library-search,.collection-controls label{background:rgba(252,251,247,.76);border-color:rgba(32,33,36,.2);border-radius:99px}.collection-controls button{background:rgba(252,251,247,.72);border-color:rgba(32,33,36,.17)}.collection-controls button.active{background:var(--graphite);border-color:var(--graphite)}
.favorite-shelf,.grocery-favourites{background:rgba(232,229,221,.64);border:1px dashed rgba(32,33,36,.23)}.favorite-shelf button,.grocery-favourites button{border-color:rgba(32,33,36,.18);background:rgba(252,251,247,.78)}
.grocery-capture{background:rgba(252,251,247,.58);border:1px solid rgba(32,33,36,.2);border-radius:11px}.grocery-capture>button{background:var(--graphite)}
.grocery-store,.storage-rack,.collection-group button{background:rgba(252,251,247,.72);border-color:rgba(32,33,36,.18);border-radius:11px 14px 10px 12px;box-shadow:none}
.grocery-favourite.active{color:var(--graphite)}.collection-location-note{background:rgba(229,226,218,.62);color:var(--muted);border-left:3px solid var(--graphite)}.collection-location-note .material-symbols-rounded{color:var(--graphite)}
.storage-cell{background:rgba(255,255,255,.36);border-color:rgba(32,33,36,.18)}.storage-cell.occupied{background:#e4e2dc;border-color:#aaa69e;color:var(--ink)}.located{background:#e4e2dc;color:#4c4c49}
.list-tile,.new-module,.warm-grid .list-tile{background:rgba(252,251,247,.72)!important;border-color:rgba(32,33,36,.2);border-radius:11px 14px 12px 9px}.new-module{border-style:dashed}.list-tile.ink-edge:before{background:var(--graphite)}.list-tile .tile-icon.ink-bg{background:var(--graphite)!important}

/* Life is intentionally colourless */
.life-grid,.entity-grid{gap:12px}.life-card,.entity-card{background:rgba(252,251,247,.72)!important;color:var(--ink)!important;border:1px solid rgba(32,33,36,.19);border-radius:11px 15px 12px 10px;box-shadow:0 7px 18px rgba(32,33,36,.045)}
.life-card:hover,.entity-card:hover{box-shadow:var(--shadow);transform:translateY(-2px) rotate(-.06deg)}.life-card:nth-child(even),.entity-card:nth-child(even){transform:rotate(.08deg)}.life-card:nth-child(odd),.entity-card:nth-child(odd){transform:rotate(-.06deg)}
.life-icon,.entity-icon,.entity-detail-head .detail-symbol{background:var(--soft)!important;color:var(--graphite)!important}.entity-card:before{background:var(--graphite)!important}.life-card:before{display:none}
.life-card p,.life-card em,.life-card small,.entity-card p,.entity-card small,.entity-card .eyebrow{color:var(--muted)!important}.v19-life-groups>section>header:after,.life-group>header:after{content:"";display:block;width:54px;height:2px;margin-top:8px;background:var(--pencil);transform:rotate(-1deg)}

/* Detail dossiers */
.route-back,.detail-head>button{color:var(--muted);border:0;background:transparent}.entity-overview{gap:13px}
.entity-panel,.record-section{background:rgba(252,251,247,.72);border:1px solid rgba(32,33,36,.18);border-radius:12px 15px 11px 13px;box-shadow:none}.entity-panel:nth-child(even){transform:rotate(.04deg)}
.entity-panel>header button,.record-section>header button{background:var(--soft);color:var(--ink);border:0;border-radius:99px}.entity-facts>div,.notes-modern article,.timeline-modern article{background:rgba(231,228,219,.62);border-radius:8px 10px 7px 9px}
.row-icon,.timeline-modern>article>span{background:var(--soft);color:var(--graphite)}.stat-row{border-color:rgba(32,33,36,.19)}.stat-row div{border-color:rgba(32,33,36,.14)}
.entity-sections article,.record-list article,.compact-rows article{border-color:rgba(32,33,36,.13)}.prototype-note{background:var(--soft);border:1px dashed var(--pencil)}

/* Neutral ink-and-paper budget */
.v19-budget-hero,.budget-hero{background:var(--graphite);color:#fff;border-radius:12px 16px 10px 14px;box-shadow:var(--shadow)}.v19-budget-hero button{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.2)}
.v19-budget-numbers article,.v19-budget-section,.v19-funds,.v30-forecast article,.money-summary article{background:rgba(252,251,247,.72);border-color:rgba(32,33,36,.18);border-radius:10px 13px 11px 9px}
.v19-money-type,.finance-kind,.v19-money-type.income,.v19-money-type.expense,.v19-money-type.subscription,.finance-kind.income,.finance-kind.expense{background:var(--soft)!important;color:var(--graphite)!important}
.v19-money-row,.finance-list>button{border-color:rgba(32,33,36,.13)}.v19-funds progress{accent-color:var(--graphite)}.v30-forecast .negative{color:var(--ink);text-decoration:underline;text-decoration-style:wavy}
.v30-month-switch button{background:rgba(252,251,247,.75);border-color:rgba(32,33,36,.18)}.kind-switch{background:var(--soft)}

/* Precise forms on tactile paper */
.overlay{background:rgba(40,40,38,.48);backdrop-filter:blur(2px)}.sheet{background:var(--paper);border:1px solid rgba(32,33,36,.28);border-radius:18px 18px 0 0;box-shadow:0 30px 90px rgba(30,30,28,.28)}
.sheet>header{position:sticky;background:rgba(243,240,232,.94);border-bottom:1px solid rgba(32,33,36,.18);align-items:center}.sheet>header:after{content:"";position:absolute;left:20px;right:20px;bottom:-3px;height:3px;background:linear-gradient(179deg,transparent 25%,rgba(32,33,36,.13) 30% 45%,transparent 50%)}
.sheet-body{background:transparent}.sheet>header h2{letter-spacing:-.04em}.sheet>header button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.search-box,.field input,.field select,.field textarea,.big-input,.upload-choice{background:rgba(252,251,247,.86);border:1px solid rgba(32,33,36,.25);border-radius:9px 11px 8px 10px}.field.has-focus>span{color:var(--graphite)}
.field.has-focus input,.field.has-focus select,.field.has-focus textarea{box-shadow:0 0 0 3px rgba(32,33,36,.1)}
.primary-btn{background:var(--graphite);border-color:var(--graphite);border-radius:10px}.secondary-btn{border-color:rgba(32,33,36,.22);background:rgba(252,251,247,.7);border-radius:10px}.danger-btn{border-color:#777;color:#333;background:transparent}
.capture-kind,.capture-types button.selected{background:var(--soft);color:var(--graphite)}.process-card,.process-actions button{background:rgba(252,251,247,.72);border-color:rgba(32,33,36,.2);border-radius:10px 13px 9px 11px}
.toast,.wm-system-toast,.wm-system-toast.error{background:var(--graphite);box-shadow:3px 3px 0 #aaa69e;border-radius:8px}.fab{background:var(--graphite);box-shadow:4px 4px 0 #aaa69e;border-radius:14px}
.task-card.priority-high,.task-card.priority-low{border-left-color:#8e8b84}.attention-action i,.followup-intro>span,.ready-box{background:var(--soft);color:var(--graphite)}
.alert-list .late{border-left-color:var(--graphite)}.inventory-card-actions small.late,.inventory-card-actions small.soon{background:var(--soft);color:var(--graphite)}
.task-form-intro,.search-result:hover{background:rgba(232,229,221,.55)!important;border-color:rgba(32,33,36,.17)!important;color:var(--muted)}.task-form-intro span,.search-result i{color:var(--graphite)}
.search-result i,.account-release-status{background:var(--soft);color:var(--graphite)}.account-release-status .material-symbols-rounded{color:var(--graphite)}
.share-preview>.material-symbols-rounded,.collection-location-note .material-symbols-rounded{color:var(--graphite)}.cloud-gate>section{box-shadow:7px 7px 0 #aaa69e}
.wm-confirm-icon,.activation-grid button>span,.activation-grid button:nth-child(3n+2)>span,.activation-grid button:nth-child(3n)>span,.collection-insight,.collection-insight.warning,.collection-insight.success{background:var(--soft);color:var(--graphite)}
.attention-strip{background:rgba(252,251,247,.72);border-color:rgba(32,33,36,.18);border-radius:12px 15px 11px 13px}.attention-strip>header>span,.attention-strip button>span{background:var(--soft)}
.status-light,.status-light.warn,.status-light.bad{background:var(--graphite)}.status-light.warn{opacity:.55}.status-light.bad{border-radius:1px}.account-footer button{color:var(--graphite)}
.scanner-frame>span i{background:#d5d2ca;box-shadow:0 0 10px rgba(255,255,255,.45)}
.sync-dot,.sync-dot.synced,.sync-dot.syncing,.sync-dot.error{background:var(--graphite)}.sync-dot.syncing{opacity:.55}.sync-dot.error{border-radius:1px}

/* Bottom navigation */
.bottom-nav{height:calc(76px + var(--safe-bottom));background:rgba(252,251,247,.94);border:0;border-top:1px solid rgba(32,33,36,.16);box-shadow:0 -9px 30px rgba(32,33,36,.045);backdrop-filter:blur(14px) saturate(.7)}
.bottom-nav:before{content:"";position:absolute;left:4%;right:4%;top:-3px;height:3px;background:linear-gradient(181deg,transparent 25%,rgba(32,33,36,.08) 32% 45%,transparent 53%)}
.bottom-nav button{color:#888680}.bottom-nav button.active,.bottom-nav button.active .material-symbols-rounded{color:var(--ink)}.bottom-nav button.active:before{width:38px;height:2px;background:var(--graphite);top:7px;transform:rotate(-2deg)}

/* Semantic colour contract */
.dot.red,.owner-red,.task-owner.owner-red,.event-line.red,.avatar.red,.account-owner.michiel{background:var(--red)!important}.dot.blue,.owner-blue,.task-owner.owner-blue,.event-line.blue,.avatar.blue,.account-owner.wim{background:var(--blue)!important}.dot.yellow,.owner-yellow,.task-owner.owner-yellow,.event-line.yellow,.avatar.yellow,.account-owner.together{background:var(--yellow)!important}
.red-edge:before{background:var(--red)}.blue-edge:before{background:var(--blue)}.yellow-edge:before{background:var(--yellow)}
.red-bg{background:var(--red)!important;color:#fff}.blue-bg{background:var(--blue)!important;color:#fff}.yellow-bg{background:var(--yellow)!important;color:var(--ink)}
body[data-wm-page="life"] .red-edge:before,body[data-wm-page="life"] .blue-edge:before,body[data-wm-page="life"] .yellow-edge:before{background:var(--graphite)!important}
body[data-wm-page="life"] .red-bg,body[data-wm-page="life"] .blue-bg,body[data-wm-page="life"] .yellow-bg{background:var(--soft)!important;color:var(--graphite)!important}
body[data-wm-page="budget"] .red,body[data-wm-page="budget"] .blue,body[data-wm-page="budget"] .yellow{background:var(--soft)!important;color:var(--graphite)!important}

@media(max-width:860px){.main{padding-top:30px}.today-layout{gap:17px}.glance,.dashboard-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.topbar{height:70px}.top-actions{gap:4px}.round-action,.capture,.avatar{width:38px;height:38px}.main{padding:26px 15px 72px}.hero{align-items:start}.hero h1{font-size:50px;letter-spacing:-.045em}.hero-mark{width:62px;height:62px}.hero-mark:before{inset:10px}.hero-mark:after{width:13px;left:0;top:31px;box-shadow:49px 0 var(--pencil),25px -24px var(--pencil),25px 24px var(--pencil)}.day-stream,.today-feed{padding:18px 15px}.glance-card,.dash-card{min-height:128px;padding:14px}.v30-assistant,.v30-forecast{margin:16px 0}.sheet{border-radius:18px 18px 0 0}.library-row,.life-card,.entity-card{transform:none!important}.bottom-nav button.active:before{top:4px}}
@media(max-width:390px){.brand{width:60px}.hero h1{font-size:44px}.hero-mark{display:none}.glance,.dashboard-cards{grid-template-columns:1fr 1fr}}
@media(min-width:721px){.sheet{border-radius:18px;max-height:86vh}}
@media(prefers-reduced-motion:reduce){.day-stream,.today-feed,.life-card,.entity-card,.library-row,.glance-card,.dash-card{transform:none!important}}