/* Shaadi Planning: the app's design system (also the base for the public pages, the RSVP page and wedding websites).
   Warm cream canvas, white surfaces, light serif headings, Inter for everything you read and tap, pill buttons, soft shadows.
   Tokens are shared with the public site (site.css); see docs/APP_DESIGN.md. */
@font-face{font-family:Newsreader;font-weight:300;font-style:normal;font-display:swap;src:url(/fonts/newsreader-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:300;font-style:italic;font-display:swap;src:url(/fonts/newsreader-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/newsreader-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-weight:500;font-style:italic;font-display:swap;src:url(/fonts/newsreader-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-weight:500;font-display:swap;src:url(/fonts/familjen-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-weight:600;font-display:swap;src:url(/fonts/familjen-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(/fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(/fonts/geist-mono-latin-500-normal.woff2) format("woff2")}
:root{
  --bg:#FBF9F6;--surface:#FFFFFF;--card:#FFFFFF;--soft:#F4EFE8;--soft-2:#EFE8DE;
  --ink:#1E1B18;--text:#1E1B18;--body:#3D3832;--mute:#6F6862;--line:#ECE6DE;--line-strong:#DCD3C8;
  --accent:#C8791A;--accent-ink:#9A5A0F;--accent-soft:#F8EBD8;--plum:#3E1F47;--plum-2:#2B1431;--plum-soft:#F4EEF5;
  --selection:#F6E3C6;--on-ink:#FFFFFF;
  --red-bg:#FBEAE7;--red:#A2332A;--blue-bg:#E7F0F7;--blue:#225F8C;--green-bg:#E9F2EA;--green:#2F6B3A;--yellow-bg:#FBF0D9;--yellow:#8A5A00;
  --serif:Newsreader,Georgia,"Times New Roman",serif;--sans:Inter,"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --r:16px;--r-sm:12px;--r-lg:24px;
  --shadow-s:0 1px 2px rgba(30,27,24,.04);--shadow:0 1px 2px rgba(30,27,24,.06),0 8px 24px rgba(30,27,24,.06);--shadow-l:0 2px 6px rgba(30,27,24,.06),0 18px 48px rgba(30,27,24,.10);
  --ring:0 0 0 4px rgba(200,121,26,.18);--ease:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
::selection{background:var(--selection);color:var(--ink)}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;color:var(--ink);margin:0}
h1{font-size:clamp(2.2rem,5.4vw,3.5rem);font-weight:300}h2.big{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300}
h1 em,h2 em{color:var(--accent-ink);font-style:italic}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:600}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.mute,.mut{color:var(--mute)}.s{font-size:.86rem}.r{text-align:right}.b{font-weight:600;color:var(--ink)}
.n{font-family:var(--mono);font-size:.86rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.eyebrow{display:flex;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 .9rem;font-weight:600}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
section.sec{padding:clamp(1.6rem,4vw,2.6rem) 0;border-top:1px solid var(--line)}
section.sec:first-of-type{border-top:0}
.pg{padding-top:clamp(1.6rem,5vw,3.2rem)}
.lead{max-width:62ch;color:var(--body);margin:.9rem 0 0;font-size:1.04rem;line-height:1.65}.pg .lead+.chips{margin-top:1.1rem}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- buttons and fields ---------- */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.62rem 1.2rem;min-height:44px;cursor:pointer;color:var(--ink);font-weight:500;font-size:.94rem;line-height:1.2;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .2s,transform .1s}
button:hover,.btn:hover{border-color:var(--ink);background:var(--surface)}button:active,.btn:active{transform:scale(.98)}
button:disabled{opacity:.5;cursor:default}button:disabled:hover{border-color:var(--line-strong)}
button.p,.btn.p{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}button.p:hover,.btn.p:hover,a.btn.p:hover{background:#000;border-color:#000}

button.lnk{display:inline;border:0;background:none;padding:0;min-height:0;text-align:left;font-weight:600;color:var(--ink);border-radius:0}button.lnk:hover{background:none;text-decoration:underline;text-decoration-color:var(--accent)}
input,select,textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.66rem .9rem;min-height:46px;width:100%;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#9B948D}
input:hover,select:hover,textarea:hover{border-color:#C9BFB2}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--bg);color:var(--body);opacity:1}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
textarea{min-height:0;line-height:1.5}select{width:auto;max-width:100%}
select{appearance:none;-webkit-appearance:none;padding-right:2.3rem;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231E1B18' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right .9rem center;cursor:pointer;font-weight:500}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--plum);flex:none;margin:2px 0 0;box-shadow:none}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
label.f{display:grid;gap:.4rem;font-size:.84rem;color:var(--mute);font-weight:500}
.row{display:flex;gap:.6rem;align-items:center}.row>input+button,.row>.g+button{flex:none;white-space:nowrap}.sp{justify-content:space-between}.g{flex:1}.wr{flex-wrap:wrap}
.step{display:flex;align-items:center;gap:.4rem}.step input{width:66px;text-align:center;font-family:var(--mono)}
.chk{display:flex;gap:.55rem;align-items:center;font-size:.92rem;color:var(--body)}
html,body,a,button,input,select,textarea,summary,label{touch-action:manipulation}
summary{cursor:pointer}
/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;margin:0;box-shadow:var(--shadow-s)}
.card.t{padding:0;overflow:hidden}
.grid{display:grid;gap:14px;align-items:start}




.li{display:flex;justify-content:space-between;gap:12px;padding:.65rem 0;border-bottom:1px solid var(--line)}.li:last-child{border:0}
.li label{display:flex;gap:.65rem;align-items:flex-start;flex:1}
.off{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.tag{display:inline-flex;align-items:center;font-size:.72rem;line-height:1.5;padding:.12rem .62rem;border-radius:999px;font-weight:600;white-space:nowrap;background:var(--soft);color:var(--body);border:0}
.tag.g{background:var(--green-bg);color:var(--green)}.tag.r{background:var(--red-bg);color:var(--red)}
.tag.b{background:var(--blue-bg);color:var(--blue)}.tag.y{background:var(--yellow-bg);color:var(--yellow)}
.warn{color:var(--red);font-size:.86rem}
.chips{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem .1rem .7rem;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{white-space:nowrap;border-radius:999px;min-height:38px;padding:.32rem 1rem;font-size:.9rem;background:var(--surface);border-color:var(--line)}
.chips button:hover{border-color:var(--ink)}.chips button.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s)}
table{border-collapse:collapse;width:100%}td,th{padding:.78rem 1rem;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
td:first-child,th:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}tr:last-child td{border:0}
th{font-weight:600;font-size:.7rem;color:var(--mute);text-transform:uppercase;letter-spacing:.1em;background:var(--surface)}
td.cov{white-space:normal;min-width:130px}

.tot{font-family:var(--serif);font-weight:400;font-size:1.65rem;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.todo{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line)}.todo:last-child{border:0}



.msg{white-space:pre-wrap}#log .q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.25rem;margin:0 0 .7rem;box-shadow:var(--shadow-s)}.a{padding:.3rem .2rem 1.4rem;line-height:1.65}
.chart{width:100%;max-width:720px;height:auto;display:block}
.chart text{font-family:var(--sans);font-size:12px;fill:var(--body)}
.chart .cv{font-family:var(--mono);font-size:11px;fill:var(--ink)}

details>summary{list-style-position:outside}
/* ---------- header, nav, planning bar ---------- */
.hdr{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:1rem;min-height:64px}.hdr .wrap{max-width:1440px;padding-left:clamp(16px,2.4vw,32px);padding-right:clamp(16px,2.4vw,32px)}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:400;font-size:1.42rem;letter-spacing:-.02em;color:var(--ink);margin-right:auto;text-decoration:none;white-space:nowrap}
.logo em{color:var(--mute)}.logo svg{width:34px;height:23px;flex:none}
.links{display:none;gap:.15rem;align-items:center}
.links button{border:0;background:none;min-height:38px;padding:.42rem .72rem;color:var(--mute);font-weight:500;font-size:.92rem;border-radius:999px;white-space:nowrap;flex:none}
.links button:hover{background:var(--soft);color:var(--ink)}
.links button.on{background:var(--soft);color:var(--ink);font-weight:600}
@media(min-width:860px){.links{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}.links::-webkit-scrollbar{display:none}}
/* The account menu: one avatar button at the right of the bar (Account in the phone's tab bar) and a short list under it */
.menu{flex:none;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);justify-content:center}
.menu.on,.menu[aria-expanded=true]{border-color:var(--ink);background:var(--soft)}
.acctm{position:fixed;z-index:45;top:72px;right:calc(max(0px,(100vw - 1440px) / 2) + clamp(16px,2.4vw,32px) - 6px);width:min(300px,calc(100vw - 24px));max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain;display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.45rem;box-shadow:var(--shadow-l)}
.acctm button{justify-content:flex-start;text-align:left;width:100%;border:0;background:none;min-height:44px;padding:.55rem .8rem;border-radius:12px;font-weight:500;font-size:.95rem;color:var(--body)}
.acctm button:hover,.acctm button:focus-visible{background:var(--soft);color:var(--ink)}
.am-who{padding:.55rem .8rem .45rem;font-size:.88rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}.am-who .s{font-weight:400;margin-top:.15rem}.am-who .s:empty{display:none}
.am-sec{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:.35rem;margin-top:.2rem}



/* Sub-tabs: Budget, Plan, Browse and What-Ifs inside Budget; All Tools, Checklist and Timeline inside Tools */
.subnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-top:clamp(1.2rem,3vw,2rem)}
.subnav:not([data-g=budget]) [data-sg=budget],.subnav:not([data-g=tools]) [data-sg=tools]{display:none}
.subnav:not([hidden])~.pg{padding-top:clamp(1rem,3vw,1.8rem)}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--soft);max-width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:none;min-height:36px;padding:.38rem .95rem;border-radius:999px;font-weight:500;font-size:.9rem;color:var(--mute);white-space:nowrap;flex:none}
.seg button:hover{background:none;color:var(--ink)}.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(30,27,24,.1)}

.tool{position:sticky;top:64px;z-index:15;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}

.tl{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;min-width:0}
.tool select,.tool input{min-height:40px}
.tt{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.15;margin-left:auto;text-align:right}
.tt .tot{font-size:1.7rem;line-height:1}.tt .s{margin-top:.2rem}


/* ---------- footer ---------- */
/* The footer is one quiet line: the nav lives in the bar and the account menu */
/* room under the links for the floating Help button */


/* the links on one centered line, the copyright on its own line under them */
@media(min-width:860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---------- sign-in: one centered card (public/signin.css draws it) ---------- */
#login{min-height:100vh;min-height:100dvh;background:var(--bg)}
/* ---------- Home ---------- */
/* While the wedding or the tools' code is on its way: keep the room the page will take, so the footer and the tab bar do not jump (CLS) */





















@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(47,107,58,0)}100%{box-shadow:0 0 0 0 rgba(47,107,58,0)}}








/* ---------- guests ---------- */





















/* ---------- checklist, budget ---------- */

.li input[type=checkbox]{border-radius:6px}









/* ---------- day-of timeline ---------- */









/* ---------- Tools: index, shared pieces and each tool ---------- */
.tl-back{display:inline-flex!important;align-items:center;gap:.35rem;margin:0 0 1.1rem;font-size:.88rem;color:var(--body)!important;padding:.35rem .85rem!important;border:1px solid var(--line)!important;border-radius:999px!important;background:var(--surface)!important;min-height:34px!important}
.tl-back::before{content:"\2190"}.tl-back:hover{border-color:var(--ink)!important;text-decoration:none!important}










































/* ---------- phones: bottom tab bar, roomier touch targets, tables become cards ---------- */
.tabbar{display:none}
@media(max-width:859px){.wrap{padding-left:16px;padding-right:16px}.hrow{min-height:58px;gap:.6rem}.logo{font-size:1.28rem}.logo svg{width:30px;height:20px}.hdr .menu{display:none}.logo{min-width:0;overflow:hidden;white-space:nowrap}.acctm{top:auto;bottom:calc(80px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto;max-height:calc(100vh - 150px)}.seg button{padding:.38rem .75rem}.tool{top:58px}.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-top:1px solid var(--line);padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom))}.tabbar button{border:0;background:none;min-height:54px;padding:.15rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;color:var(--mute);font-size:.68rem;font-weight:600;border-radius:14px}.tabbar button:hover{background:none}.tabbar button[hidden]{display:none}.tabbar svg{width:24px;height:24px;padding:3px 14px;box-sizing:content-box;border-radius:999px;transition:background .2s}.tabbar button.on,.tabbar button[aria-expanded=true]{color:var(--ink)}.tabbar button.on svg,.tabbar button[aria-expanded=true] svg{background:var(--soft);stroke-width:2}.tabbar button:active{transform:scale(.95)}#app{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.pg{padding-top:1.3rem}.card{padding:1.2rem}input,select,textarea{font-size:16px!important}.tl{width:100%}.tt{width:100%;flex-direction:row;align-items:baseline;justify-content:space-between;margin:0}.tt .s{margin:0}.step{width:100%}.step select{flex:1}.tw:has(.cpl-tbl){background:transparent;border:0;overflow:visible;box-shadow:none}}
/* ---------- motion (all of it off for reduced motion) ---------- */
@media(prefers-reduced-motion:no-preference){html:not(:has(#app)){scroll-behavior:smooth}.pg:not([hidden]){animation:lrise .45s var(--ease) backwards}.card{transition:border-color .2s,box-shadow .25s,transform .3s var(--ease)}button.p:hover{transform:translateY(-1px)}}
@keyframes lrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
/* ---------- print / save as PDF ---------- */
#report{display:none}
@media print{@page{margin:14mm}html,body{background:#fff!important;color:#111}body{padding:0;font-size:10.5pt;line-height:1.4}#app,#login,.hdr,.tool,footer,.ft,.tabbar{display:none!important}#report{display:block}.rp h1{font-size:26pt;margin:0 0 .2rem;font-weight:300}.rp h2{font-family:var(--sans);font-size:8.5pt;letter-spacing:.14em;text-transform:uppercase;color:#6B6A66;margin:1.4rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid #EAEAEA;break-after:avoid;font-weight:600}.rp h3{font-family:var(--sans);font-size:11pt;margin:0 0 .2rem;font-weight:600;break-after:avoid}.rp .eyebrow:before{background:#C8791A}.rp table{width:100%;border-collapse:collapse;margin:0 0 .6rem}.rp td,.rp th{padding:4pt 6pt;text-align:left;white-space:normal;border-bottom:1px solid #EAEAEA;position:static!important;background:none!important;vertical-align:top}.rp td:last-child,.rp th:last-child{text-align:right}.rp tr{break-inside:avoid}.rp tr:first-child{break-after:avoid}.rp table{break-inside:avoid}.rp ul,.rp ol{margin:.2rem 0 .6rem;padding-left:1.1rem}.rp li{margin:.15rem 0}.rp .pb{break-before:page}.rp .rf{margin-top:1.5rem;border-top:1px solid #EAEAEA;padding-top:.5rem}.rp svg{break-inside:avoid;max-width:100%}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* Long options (label sheets, time zones, households) wrap their box instead of widening the page on phones and tablets */
#t-tools select,#t-home select,#t-people select{max-width:100%}#t-tools .row>.f,#t-tools .row>label{flex:1 1 220px;min-width:0}#t-tools .tl-g3>*,#t-tools .tl-g2>*,#t-tools .grid>*{min-width:0}
#t-tools .li>.row{flex-wrap:wrap;justify-content:flex-end;min-width:0}#t-tools .li>span{min-width:0;overflow-wrap:anywhere}
@media(max-width:859px){.tabbar button{font-size:.72rem}}
@media(max-width:400px){.tabbar svg{padding:3px 9px}.tabbar button{font-size:.66rem}}/* six tabs fit at 320px */
body.simple .tool{display:none!important}/* the what-if controls belong to quote planning */

/* The signed-in app wears the home page's look: a warm wash at the top */
#app{background:radial-gradient(60% 560px at 88% -160px,#F8DDB6 0%,rgba(248,221,182,0) 70%),radial-gradient(45% 460px at -12% 40px,#F1E3EE 0%,rgba(241,227,238,0) 70%),var(--bg);background-repeat:no-repeat;min-height:100vh}
#t-tools select{min-width:0}.tabbar{grid-auto-columns:minmax(0,1fr)}
/* The paisley mark is taller than it is wide: size it by height wherever a logo sits */
svg[viewBox="16 3 88 98"]:not(.wmark){width:auto!important;aspect-ratio:88/98}.wmark{aspect-ratio:88/98}/* the wedding website sizes its own mark */.logo svg[viewBox="16 3 88 98"],.lbrand svg[viewBox="16 3 88 98"]{height:28px!important}
@media(max-width:859px){.logo svg[viewBox="16 3 88 98"]{height:24px!important}}
#sp-load.out{opacity:0;visibility:hidden;pointer-events:none}@media (prefers-reduced-motion:reduce){#sp-load{transition:none}}
/* Help Center (public/helpcenter.js) */
.kb h1{max-width:22ch}.kb .lead{max-width:60ch}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}












/* Seating: the seat finder, the floor plan and the print files */






/* Photo Groups (public/pgtool.js). A Photo Groups-only wedding shows its tool, the account, help and people, and nothing else. */









/* Review your vendors (public/myreviews.js) */
.stars{display:inline-flex;gap:1px;color:#D8CFC4;font-size:1rem;line-height:1;vertical-align:-2px}.stars .on{color:#B8731A}




/* AI switched off (no OPEN_AI_API): AI buttons stay visible but say so, AI-only forms and cards show one line instead */





/* Printed cards: the order form, the estimate and each order's timeline */




/* "We updated our policies" (public/legal.js): a one-time card at the top of the planner until the couple accepts */




/* Home for a couple: "Do these next" and "Where things stand" side by side, then the tiles. Every tile is one button, all the same shape. */









/* Home tiles: one column on phones, two on tablets, four on computers; every row the same height, the action at the bottom of each, and the
   last row always filled (a lone last tile spans the row, two share it), so there is never a half-empty row */










/* Your Wedding: a card like the tiles (the names, the date and city, one action at the bottom); the form opens inside it */



/* no empty assistant card on Home while AI is off */
/* The toast every save and action reports to (couple.js status), above the phone's tab bar */



/* Unsaved changes in a tool (tools.js): the bar sits at the end of the section being edited and sticks to the bottom while it is in view; on phones it is pinned above the tab bar */
.tl-savebar{position:sticky;bottom:14px;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1rem 0 0;padding:.75rem .9rem;border-radius:16px;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-l)}
.tl-savebar>span{flex:1 1 14rem;font-size:.9rem;line-height:1.35}.tl-savebar>span b{color:var(--on-ink)}.tl-savebar button{min-height:42px}.tl-savebar button.p{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}.tl-savebar button.p:hover{background:var(--soft)}
.tl-savebar button:not(.p){background:transparent;color:var(--on-ink);border-color:color-mix(in srgb,var(--on-ink) 45%,transparent)}.tl-savebar.ok{background:var(--green)}.tl-savebar.bad{background:var(--red)}

@media(max-width:859px){.tl-savebar{position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));margin:0}.tl-savebar>span{flex-basis:100%}.tl-savebar button{flex:1}}
/* Leaving with unsaved changes: Save changes, Discard changes or Keep editing */
.sp-dlg{border:0;border-radius:20px;padding:1.4rem;max-width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow-l);color:var(--body)}.sp-dlg::backdrop{background:rgba(30,27,24,.45)}
.sp-dlg h2{font-size:1.5rem;margin:0 0 .5rem}.sp-dlg p{margin:0 0 1.1rem}.sp-dlg .row{display:flex;flex-wrap:wrap;gap:.5rem}.sp-dlg .row button{flex:1 1 9rem}
/* Card designs, grouped by tradition */

/* Printed cards: what you get */



.li label{min-width:0}@media(max-width:400px){.li{flex-wrap:wrap}.li>.row{margin-left:auto}}/* the checklist fits a 320px phone: the due date drops under a long task */
/* ---------- The planner's look, as on the home page mock-up: a sidebar on computers, KPI tiles, the ceremony bar, Due next, What-If cards, plum and sand chat ---------- */
:root{--gold:#F2C98A;--sand:#F3EADF;--ivory:#FFFDF9;--pill:#FBEFDC;--pill-ink:#A8620F;--plum-ink:#3E1F47;--green-chip:#E6F2E7}




@media(min-width:860px){.hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ivory)}#nav.links{position:fixed;top:65px;left:0;bottom:0;width:228px;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:1.5rem .85rem;margin:0;overflow-y:auto;z-index:16;background:var(--ivory);border-right:1px solid var(--line)}#nav.links button{justify-content:flex-start;gap:.75rem;min-height:44px;padding:.6rem .9rem;border-radius:12px;color:var(--body);font-size:.95rem;font-weight:500;white-space:nowrap}#nav.links button svg{width:19px;height:19px;flex:none;color:var(--mute)}#nav.links button:hover{background:var(--soft);color:var(--ink)}#nav.links button.on{background:var(--pill);color:var(--pill-ink);font-weight:600}#nav.links button.on svg{color:var(--accent)}#app>main.wrap,#app>.tool>.wrap,#app>.ft>.wrap{max-width:calc(1160px + 228px);padding-left:calc(228px + clamp(20px,3vw,40px))}.acctm{z-index:40}}
#nav.links button span{pointer-events:none}
/* page titles: an eyebrow (the couple and their city) over a serif title */
#app .pg>.eyebrow:first-child{color:var(--accent-ink)}
#app .pg>h1{font-size:clamp(2rem,4vw,2.9rem);font-weight:400;margin-bottom:.4rem}
/* KPI tiles: spaced capitals over numbers in the mono face */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));margin:0 0 14px}
.kpi{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:.3rem;min-width:0;text-align:left;color:var(--body);font-weight:400;min-height:0;white-space:normal}
button.kpi:hover{border-color:var(--line-strong);background:var(--ivory)}



@media(max-width:859px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:.85rem .9rem}}
/* the ceremony bar: one stacked bar of what each event costs, and a two-column legend */



/* Due next: the next payment, in one line */


/* What-If cards */

.wi{background:var(--ivory);border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.wi h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin:.35rem 0 .7rem;line-height:1.2}
.wi s{font:500 .95rem var(--mono);color:var(--mute)}.wi .wv{font:600 1.55rem var(--mono);color:var(--plum)}.wi .chip{display:inline-block;margin-top:.7rem;padding:.2rem .7rem;border-radius:99px;font-size:.8rem;font-weight:600;background:var(--green-chip);color:var(--green)}.wi .chip.up{background:var(--red-bg);color:var(--red)}
/* the planning assistant and Ask: the question in a plum bubble, the answer in sand */
#log .q{background:var(--plum);color:#fff;border:0;border-radius:18px 18px 6px 18px;padding:.85rem 1.1rem;margin:0 0 .6rem auto;max-width:min(560px,88%);box-shadow:var(--shadow-s)}#log .q .mute{color:rgba(255,255,255,.7)}
#log .a{background:var(--sand);color:var(--ink);border-radius:18px 18px 18px 6px;padding:.95rem 1.15rem;margin:0 0 1.3rem;max-width:min(640px,94%);line-height:1.6}#log .a strong{font-family:var(--mono);color:var(--plum)}

/* every modal in the planner: ivory, rounded 20px, a serif title with an italic accent, plum and outline buttons */
.sp-dlg{border:0;border-radius:20px;padding:1.5rem;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;background:var(--ivory);color:var(--body);box-shadow:0 24px 64px rgba(30,27,24,.22)}
.sp-dlg::backdrop,dialog.sphd::backdrop{background:rgba(43,20,49,.42)}
.sp-dlg h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin:0 0 .5rem;color:var(--ink)}.sp-dlg h2 em{color:var(--accent-ink);font-style:italic}
.sp-dlg p{margin:0 0 1.1rem;line-height:1.55}.sp-dlg form{margin:0}.sp-dlg .f{margin:0 0 1.1rem}.sp-dlg textarea{width:100%;margin:0 0 1rem;font:500 .85rem/1.45 var(--mono)}
.sp-dlg .row{display:flex;flex-wrap:wrap;gap:.55rem}.sp-dlg .row button{flex:1 1 9rem;min-height:46px}
.sp-dlg button.p,.acctm button.p{background:var(--plum);border-color:var(--plum);color:#fff}.sp-dlg button.p:hover{background:var(--plum-2);border-color:var(--plum-2)}
button.danger{background:var(--red);border-color:var(--red);color:#fff}button.danger:hover{background:#8A2A22;border-color:#8A2A22}
.acctm{border-radius:20px!important;background:var(--ivory)!important;box-shadow:0 24px 64px rgba(30,27,24,.18)!important}

/* the command palette (Ctrl or Cmd K) */





/* the Tools index: the couple's most-used tools pinned at the top */

dialog.sphd button.p,.npanel button.p,.ninst button.p,#acctm button.p{background:var(--plum);border-color:var(--plum);color:#fff}
dialog.sphd h2,.npanel h2{font-family:var(--serif);font-weight:400}.npanel,.ninst{border-radius:20px!important;background:var(--ivory)!important}
@keyframes sphl{0%,60%{box-shadow:0 0 0 4px rgba(200,121,26,.35)}100%{box-shadow:0 0 0 0 rgba(200,121,26,0)}}

.kpi{align-items:flex-start;justify-content:flex-start}



#app button.p,#app .btn.p{background:var(--plum);border-color:var(--plum);color:#fff}#app button.p:hover,#app .btn.p:hover{background:var(--plum-2);border-color:var(--plum-2)}#app .tl-savebar button.p{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}/* the primary button in plum, as on the public site */
/* In the installed app (home-screen PWA or the iOS/Android apps) there is no page footer: Help, Support, Privacy and Terms are in the account menu */




/* ---------- Dark mode (theme.js sets data-theme on <html>: System, Light or Dark per device) ----------
   A deep plum-charcoal canvas with ivory text and gold accents; body text at least 9:1 on every surface, muted at least 5.5:1 (6:1 on the softest panel), outlines 3:1; tools/contrast.mjs checks it. */
:root[data-theme=dark]{color-scheme:dark;
  --bg:#161118;--surface:#241C29;--card:#241C29;--soft:#2F2736;--soft-2:#3A3142;--ink:#F8F3EC;--text:#F8F3EC;--body:#E9E1D7;--mute:#BCB2A9;--line:#4E4357;--line-strong:#857A8C;--ph:#A59AA8;
  --accent:#E9A85A;--accent-ink:#F0C27E;--accent-soft:#3D2E1C;--plum:#C9A3D9;--plum-2:#D9B8E2;--plum-soft:#33263B;--on-plum:#24122B;--selection:#5A4220;--on-ink:#161118;
  --red-bg:#3F2220;--red:#F5ADA4;--blue-bg:#1D2D3C;--blue:#A3CDEE;--green-bg:#1F3224;--green:#A3D9AE;--yellow-bg:#3A2E15;--yellow:#EFCF7E;
  --sand:#2F2736;--ivory:#241C29;--pill:#3D2E1C;--pill-ink:#F0C27E;--plum-ink:#DEC1E7;--green-chip:#1F3224;
  --shadow-s:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);--shadow-l:0 2px 6px rgba(0,0,0,.35),0 18px 48px rgba(0,0,0,.4);--ring:0 0 0 3px rgba(240,194,126,.55)}
[data-theme=dark] #app{background:radial-gradient(60% 560px at 88% -160px,rgba(224,160,80,.10) 0%,transparent 70%),radial-gradient(45% 460px at -12% 40px,rgba(138,88,152,.14) 0%,transparent 70%),var(--bg)}
[data-theme=dark] button.p:hover,[data-theme=dark] .btn.p:hover,[data-theme=dark] a.btn.p:hover{background:#fff;border-color:#fff}
[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F6EFE6' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E")}

[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:var(--ph)}
[data-theme=dark] input:hover,[data-theme=dark] select:hover,[data-theme=dark] textarea:hover{border-color:#A397A8}

[data-theme=dark] .wi .wv,[data-theme=dark] #log .a strong{color:var(--plum-ink)}
[data-theme=dark] button.danger:hover{background:#C9554B;border-color:#C9554B}
[data-theme=dark] .logo svg path[stroke="#C8791A"],[data-theme=dark] .logo svg circle{stroke:var(--accent)}
[data-theme=dark] .sp-dlg::backdrop,[data-theme=dark] dialog.sphd::backdrop{background:rgba(0,0,0,.6)}

[data-theme=dark] .chart text{fill:var(--body)}[data-theme=dark] .chart .cv{fill:var(--ink)}
[data-theme=dark] canvas[data-card],[data-theme=dark] .tl-cardcv{background:#fff}/* the e-invite cards and QR codes are printed things: they keep their paper */
/* ---------- The quiet look: soft cards with no outline, hairline dividers, one accent per screen, a 8/12/16/24 spacing scale ---------- */
:root{--s1:8px;--s2:12px;--s3:16px;--s4:24px}
.card,.kpi,.cpl-tile,.wi,.tw{border-color:transparent;box-shadow:0 1px 2px rgba(30,27,24,.04),0 0 0 1px rgba(30,27,24,.035)}
[data-theme=dark] .card,[data-theme=dark] .kpi,[data-theme=dark] .cpl-tile,[data-theme=dark] .wi,[data-theme=dark] .tw{box-shadow:0 0 0 1px var(--line)}
.card .card{box-shadow:none;background:var(--soft)}/* no card in a card: the inner one is a soft panel */
section.sec{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}



.sp-dlg .sp-del{margin:0 0 1.1rem}.sp-dlg .sp-del input{font:600 1rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* More: one main button in a row, the rest behind More on phones (app.js); on computers the whole row shows */
button.sp-del{color:var(--red)}
/* folded sections (phones): the heading row opens them */

/* ---------- The Advisor: one insight on Home, and Ask as a calm, full-screen sheet on phones ---------- */















#log{display:grid;gap:var(--s2);margin:0 0 var(--s3)}#log .q,#log .a{margin:0}#log .a .row{margin-top:var(--s2)}


@keyframes advb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}



/* ---------- Phones: short title, one main action, then the content (390 and 320 px) ---------- */
@media(max-width:859px){#app .pg>h1{font-size:2rem;margin-bottom:var(--s1)}#app .pg>.eyebrow:first-child{margin-bottom:var(--s1)}#app .pg>.lead,#app .sec>p.mute:not(.s),#app .sec>p.lead,#app .pg>p.mute{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:.94rem;margin-top:var(--s1);cursor:pointer}#app .pg>.lead.open,#app .sec>p.mute.open,#app .sec>p.lead.open,#app .pg>p.mute.open{-webkit-line-clamp:unset;display:block}section.sec{padding:var(--s4) 0}.card{padding:var(--s3)}.eyebrow{font-size:.68rem;margin-bottom:var(--s2)}.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent);overflow:hidden}.kpis .kpi{border:0;border-radius:0;box-shadow:none;background:none;padding:var(--s2);gap:2px}.kpis .kpi+.kpi{border-left:1px solid var(--line)}.kpis .kpi:nth-child(4){display:none}#t-tools section.sec:not(.tl-pins){padding:var(--s3) 0 0;border:0}}


@media(max-width:359px){.kpis .kpi{padding:var(--s2) var(--s1)}}
/* phones: Guests leads with the list; Home's rows name each part with its status; Where Things Stand is in those rows already */





/* the fixed save bar needs a page without a transform, even mid-animation */
@media(max-width:859px){#t-tools .li:has(>.row>button,>.row>a){flex-wrap:wrap;row-gap:var(--s1)}#t-tools .li:has(>.row>button,>.row>a)>span:first-child{flex:1 1 100%}#t-tools .li>.row{margin-left:0}#t-tools .li>.row>:is(button,a){min-height:40px;padding:.4rem .95rem;font-size:.88rem}}
/* name on top, mobile and email side by side */
/* the countdown stays deep plum in the dark */
/* computers: Help sits at the foot of the sidebar, never over the page */
/* dark: the sign-in art and its quote */

/* The owner viewing a couple's wedding from the console (app.js supportBar): whose wedding it is, and the way back */



/* One app for every role (public/spaces.js): Switch To in the planner's account menu and the console's phone menu, a select in the
   console's, the portal's and the listing's header row. Only for someone with two or more spaces. */
.sp-sw-list{display:grid;gap:2px}.sp-sw-h{margin:.2rem 0 .3rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.sp-sw-list button{justify-content:flex-start;min-height:44px}
.sp-sw-nav{margin:12px 0;padding:0 4px}.sp-sw-nav button{width:100%;background:var(--surface);border-color:var(--line)}
.sp-sw{display:inline-flex;margin:0}.sp-sw select{width:auto;min-height:40px;padding:.4rem 2rem .4rem .8rem;font-size:15px;border-radius:999px;max-width:46vw}
/* ---------- the bottom tab bar of the other spaces on phones (public/tabbar.js): the admin console (#o-tb), the planner portal (#pp-tabs)
   and the vendor space (#vs-tabs), in the couple planner's .tabbar look: 24px line icons, a label, the active one in a soft pill, 54px items.
   --sptb-pill and --sptb-ic tint the active pill (a planner's brand color in the portal). It hides while the keyboard is up (body.sptb-kb,
   body.kb in the store apps) and under a full-screen sheet; pages pad their end by --sptb-h so it never covers the last row. Computers
   (700px and up) keep their own menus. */
.sptb-row{display:contents}
@media(max-width:699px){nav.sptb{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;margin:0;overflow:visible;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-top:1px solid var(--line);border-bottom:0;
    padding:.35rem max(.4rem,var(--sa-r,0px)) calc(.35rem + max(env(safe-area-inset-bottom,0px),var(--sa-b,0px))) max(.4rem,var(--sa-l,0px))}nav.sptb[hidden]{display:none}nav.sptb .sptb-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;max-width:none;margin:0;padding:0}nav.sptb :is(a,button){position:relative;border:0;background:none;box-shadow:none;min-width:0;width:100%;min-height:54px;margin:0;padding:.15rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;color:var(--mute);font:600 .68rem/1.15 var(--sans);letter-spacing:0;border-radius:14px;text-decoration:none;white-space:nowrap}nav.sptb :is(a,button):hover{background:none;color:var(--ink)}nav.sptb svg{width:24px;height:24px;padding:3px 14px;box-sizing:content-box;border-radius:999px;transition:background .2s}nav.sptb :is([aria-current=page],.on,[aria-expanded=true]){color:var(--ink)}nav.sptb :is([aria-current=page],.on,[aria-expanded=true]) svg{background:var(--sptb-pill,var(--soft));color:var(--sptb-ic,currentColor);stroke-width:2}nav.sptb :is([aria-current=page],.on,[aria-expanded=true]) svg path{stroke-width:2}nav.sptb :is(a,button):focus-visible{outline:2px solid var(--ink);outline-offset:-2px}nav.sptb :is(a,button):active{transform:scale(.95)}.sptb-l{max-width:100%;overflow:hidden;text-overflow:ellipsis}.sptb-n{position:absolute;top:3px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:var(--bg);font:700 .625rem/17px var(--sans);text-align:center;box-sizing:border-box;box-shadow:0 0 0 2px var(--surface)}.sptb-n:empty:not(.dot){display:none}.sptb-n.dot{min-width:9px;width:9px;height:9px;padding:0;top:5px;left:calc(50% + 11px)}body:is(.sptb-kb,.kb,.osheet-on) nav.sptb{display:none!important}body:has(> nav.sptb:not([hidden])){--sptb-h:calc(66px + max(env(safe-area-inset-bottom,0px),var(--sa-b,0px)))}body:is(.sptb-kb,.kb):has(> nav.sptb){--sptb-h:0px}}
@media(min-width:700px){nav.sptb svg,nav.sptb .sptb-n{display:none}#o-tb{display:none}}
@media(max-width:400px){nav.sptb svg{padding:3px 9px}nav.sptb :is(a,button){font-size:.66rem}}
@media (prefers-reduced-motion:reduce){nav.sptb svg{transition:none}nav.sptb :is(a,button):active{transform:none}}
/* The planner's bars, simplified. The top bar: the logo, Search and the account avatar (Account in the tab bar on phones). The bell is
   Notifications in the account menu; a small gold dot on the avatar and on Account says something is new (notify.js n-new, help.js h-new).
   The account menu: Account, Appearance, Help, Switch To (spaces.js), Print and Export, the team's tools, Sign Out, in that order. */
.menu,#tbacct{position:relative}



.acctm{padding:8px;gap:0}
.acctm>.am-who{order:0}.acctm>.sp-sw-list{order:6}
.am-sec{padding-top:4px;margin-top:4px}
.am-sec:not(:has(> :not([hidden]))),.am-acct:not(:has(button:not([hidden]))),.am-team:not(:has(button:not([hidden]))){display:none}
.acctm .nbell{display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;min-height:44px;padding:.55rem .8rem;border-radius:12px;border:0}
.acctm .nbell[hidden]{display:none}







/* calmer labels: an eyebrow is a short plain label, with no dot and no capitals */
.eyebrow{letter-spacing:0;text-transform:none;font-size:.82rem}.eyebrow:before{display:none}
@media(max-width:859px){.eyebrow{font-size:.8rem}}
/* the Tools hub: cards with no icon tiles and no pill on the waiting count */
/* phones: the Appearance switch is a 44px target everywhere */
@media(max-width:859px){.sp-appear button{min-height:44px!important}}
/* ---------- Dark mode, easy to read on a phone at night (tools/contrast.mjs holds the floor: body text 7:1, muted and placeholders 4.5:1,
   field and button outlines 3:1). Plum and gold fills are light in the dark and carry a deep plum label; a disabled button is a flat soft
   pill with muted text instead of a half-transparent one; menus and sheets sit one step above the page. ---------- */
[data-theme=dark] #log .q,[data-theme=dark] .sp-dlg button.p,[data-theme=dark] .acctm button.p,[data-theme=dark] dialog.sphd button.p,[data-theme=dark] .npanel button.p,[data-theme=dark] .ninst button.p,[data-theme=dark] #acctm button.p,[data-theme=dark] #app button.p,[data-theme=dark] #app .btn.p{color:var(--on-plum)}
[data-theme=dark] #log .q .mute{color:#4A2D55}
[data-theme=dark] button.danger{color:#2A0F0C}[data-theme=dark] button.danger:hover{background:#F8C6BF;border-color:#F8C6BF}
[data-theme=dark] button:disabled{opacity:1;background:var(--soft)!important;border-color:var(--line)!important;color:var(--mute)!important}
[data-theme=dark] .acctm{background:var(--soft)!important;border:1px solid var(--line-strong)}[data-theme=dark] .acctm button:hover,[data-theme=dark] .acctm button:focus-visible{background:var(--soft-2)}
[data-theme=dark] .seg{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}[data-theme=dark] .seg button.on{background:var(--soft-2);box-shadow:0 0 0 1px var(--line-strong)}
[data-theme=dark] .chips button,[data-theme=dark] .sp-sw-nav button{border-color:var(--line-strong)}
[data-theme=dark] :focus-visible{outline-color:var(--accent-ink)}
[data-theme=dark] :is(.menu,.nsearch,.ofs-btn){border-color:var(--line-strong)}[data-theme=dark] :is(.tl-back,.sphbtn){border-color:var(--line-strong)!important}
[data-theme=dark] #t-tools .row>button:not(.p,.sq,.lnk,.cpl-ai),[data-theme=dark] #t-tools .row>.btn:not(.p){border-color:var(--line-strong)}
/* end of the dark-mode reading rules */
/* dark: checkboxes and radios drawn by us, so an unticked box is visible on dark cards (the browser's own stays dark grey). No display or size here: inputs a component hides or sizes itself keep that */
:root[data-theme=dark] :is(input[type=checkbox],input[type=radio]){-webkit-appearance:none;appearance:none;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer}:root[data-theme=dark] input[type=radio]{border-radius:50%}:root[data-theme=dark] :is(input[type=checkbox],input[type=radio]):checked{background:var(--ink);border-color:var(--ink)}:root[data-theme=dark] input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23161118' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:100%}:root[data-theme=dark] input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--surface)}:root[data-theme=dark] :is(input[type=checkbox],input[type=radio]):disabled{opacity:.5;cursor:default}:root[data-theme=dark] :is(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--gold,#E9A85A);outline-offset:2px}
/* ---------- Home in every space (public/home.js): the logo, a greeting, one big search field, "Next Up" and tiles, and a round +.
   Three calm brand tones, set by where a tile sits so neighbors always differ (2, 3 or 4 across): deep plum with ivory text and a gold icon, warm
   gold with dark plum text, and soft blush with a hairline and dark text (plum icons on both). Summaries at least 7.7:1 in light, 9:1 in dark. */
:root{--hm-a:#3E1F47;--hm-a-ink:#FBF5EC;--hm-a-sub:#E9DAE6;--hm-a-ic:#E7A54B;--hm-a-bd:#3E1F47;
  --hm-b:#EAD3A6;--hm-b-ink:#2B1431;--hm-b-sub:#4B2E46;--hm-b-ic:#5B2E6B;--hm-b-bd:#EAD3A6;
  --hm-c3:#FBF0EC;--hm-c3-ink:#2B1431;--hm-c3-sub:#5A4555;--hm-c3-ic:#6B3A6E;--hm-c3-bd:#EBD8D0;
  --hm-up:#FFFFFF;--hm-up-bd:#E3C48E;
  --hm-bg:linear-gradient(180deg,#FBF8F3 0%,#FAF1EA 55%,#F7E9DF 100%);--hm-fab:#3E1F47;--hm-fab-ink:#FBF5EC;--hm-tsh:0 1px 2px rgba(62,31,71,.06),0 10px 24px -14px rgba(62,31,71,.28)}
:root[data-theme=dark]{--hm-a:#3B2045;--hm-a-ink:#FBF5EC;--hm-a-sub:#E8DAEC;--hm-a-ic:#F0C27E;--hm-a-bd:#4F3359;
  --hm-b:#4A3418;--hm-b-ink:#FBF1E2;--hm-b-sub:#F2E2C8;--hm-b-ic:#F0C27E;--hm-b-bd:#5E4524;
  --hm-c3:#2A2130;--hm-c3-ink:#F8F3EC;--hm-c3-sub:#E6DDD6;--hm-c3-ic:#DEC1E7;--hm-c3-bd:#4E4357;
  --hm-up:#241C29;--hm-up-bd:#6B5433;
  --hm-bg:linear-gradient(180deg,#21152A 0%,#1A1220 40%,#110C13 100%);--hm-fab:#E9A85A;--hm-fab-ink:#161118;--hm-tsh:0 1px 2px rgba(0,0,0,.35)}
#app:has(#t-home:not([hidden]) .hm),body:has([data-tab=overview]:not([hidden]) > .hm),body:has(#pp-main > .hm){background:var(--hm-bg);background-repeat:no-repeat;min-height:100vh}
.hm{max-width:1040px;margin:0 auto;padding:4px 0 104px}
.hm-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 18px}
.hm-logo{display:inline-flex;align-items:center;gap:.55rem;font:400 1.6rem/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}.hm-logo svg{width:34px;height:38px;flex:none}.hm-logo em{font-style:italic;color:var(--accent-ink)}.hm-logo img{max-height:44px;max-width:200px}
.hm-gold{color:var(--accent)}
.hm .hm-hi{font:400 1.25rem/1.3 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:10px 0 0}.hm .hm-hi em{font-style:italic;color:var(--accent-ink)}
.hm-line{margin:2px 0 0;font-size:.9rem;color:var(--mute)}
.hm-lead+.hm-search{margin-top:16px}
button.hm-search{display:flex;justify-content:flex-start;gap:.75rem;width:100%;max-width:640px;margin:0 auto;min-height:56px;padding:0 1.3rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--mute);font-weight:400;font-size:1rem;text-align:left}
button.hm-search:hover{background:var(--surface);border-color:var(--line-strong)}[data-theme=dark] button.hm-search{border-color:var(--line-strong)}button.hm-search span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hm-sic{width:20px;height:20px;flex:none;color:var(--ink)}
.hm .hm-h{font:400 1.45rem/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0}
.hm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:is(.hm,.tiles) .hm-tile{--hm-c:var(--hm-a);--hm-ink:var(--hm-a-ink);--hm-sub:var(--hm-a-sub);--hm-icc:var(--hm-a-ic);--hm-bd:var(--hm-a-bd);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1/.8;margin:0;padding:14px 12px;border:1px solid var(--hm-bd);border-radius:24px;background:var(--hm-c);color:var(--hm-ink);text-align:center;text-decoration:none;white-space:normal;box-shadow:var(--hm-tsh);transition:transform .15s var(--ease),filter .15s}
:is(.hm,.tiles) .hm-tile:hover{background:var(--hm-c);border-color:var(--hm-bd);filter:brightness(1.04)}:is(.hm,.tiles) .hm-tile:active{transform:scale(.98)}:is(.hm,.tiles) .hm-tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:639px){.hm-grid>:is(:nth-child(6n+2),:nth-child(6n+5)){--hm-c:var(--hm-b);--hm-ink:var(--hm-b-ink);--hm-sub:var(--hm-b-sub);--hm-icc:var(--hm-b-ic);--hm-bd:var(--hm-b-bd)}.hm-grid>:is(:nth-child(6n+3),:nth-child(6n+6)){--hm-c:var(--hm-c3);--hm-ink:var(--hm-c3-ink);--hm-sub:var(--hm-c3-sub);--hm-icc:var(--hm-c3-ic);--hm-bd:var(--hm-c3-bd)}}
@media(min-width:640px) and (max-width:1023px){.hm-grid>:is(:nth-child(9n+2),:nth-child(9n+6),:nth-child(9n+7)){--hm-c:var(--hm-b);--hm-ink:var(--hm-b-ink);--hm-sub:var(--hm-b-sub);--hm-icc:var(--hm-b-ic);--hm-bd:var(--hm-b-bd)}.hm-grid>:is(:nth-child(9n+3),:nth-child(9n+4),:nth-child(9n+8)){--hm-c:var(--hm-c3);--hm-ink:var(--hm-c3-ink);--hm-sub:var(--hm-c3-sub);--hm-icc:var(--hm-c3-ic);--hm-bd:var(--hm-c3-bd)}}
@media(min-width:1024px){.hm-grid>:is(:nth-child(12n+2),:nth-child(12n+7),:nth-child(12n+9),:nth-child(12n+12)){--hm-c:var(--hm-b);--hm-ink:var(--hm-b-ink);--hm-sub:var(--hm-b-sub);--hm-icc:var(--hm-b-ic);--hm-bd:var(--hm-b-bd)}.hm-grid>:is(:nth-child(12n+3),:nth-child(12n+5),:nth-child(12n+8),:nth-child(12n+10)){--hm-c:var(--hm-c3);--hm-ink:var(--hm-c3-ink);--hm-sub:var(--hm-c3-sub);--hm-icc:var(--hm-c3-ic);--hm-bd:var(--hm-c3-bd)}}
.hm-ic{width:30px;height:30px;flex:none;color:var(--hm-icc)}.hm-tx{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;max-width:100%}
.hm-tt{font:500 1.18rem/1.15 var(--serif);letter-spacing:-.01em;color:var(--hm-ink)}.hm-ts{font-size:.8rem;font-weight:500;line-height:1.3;color:var(--hm-sub);overflow-wrap:anywhere}
/* the one quiet line that may close the grid: something to add, full width, on the page's own surface with a gold hairline */
:is(.hm,.tiles) .hm-tile[data-c=up]{--hm-c:var(--hm-up);--hm-ink:var(--ink);--hm-sub:var(--accent-ink);--hm-icc:var(--accent-ink);--hm-bd:var(--hm-up-bd);grid-column:1/-1;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;gap:14px;min-height:64px;padding:12px 18px;border-radius:18px;text-align:left;box-shadow:none}
:is(.hm,.tiles) .hm-tile[data-c=up] .hm-tx{align-items:flex-start}:is(.hm,.tiles) .hm-tile[data-c=up] .hm-ic{width:24px;height:24px}:is(.hm,.tiles) .hm-tile[data-c=up] .hm-tt{font:600 .98rem/1.25 var(--sans);letter-spacing:0}
:is(.hm,.tiles) .hm-tile[data-c=up]::after{content:"";width:7px;height:7px;margin-left:auto;flex:none;border:solid var(--accent-ink);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
button.hm-fab{position:fixed;z-index:30;right:max(16px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));width:60px;height:60px;min-height:60px;padding:0;border:0;border-radius:50%;background:var(--hm-fab);color:var(--hm-fab-ink);box-shadow:0 2px 6px rgba(30,27,24,.18),0 12px 28px -8px rgba(30,27,24,.45)}
button.hm-fab:hover{background:var(--hm-fab);border:0;filter:brightness(1.1)}button.hm-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.hm-fic{width:28px;height:28px}
@media(max-width:699px){body:has(nav.sptb:not([hidden])) button.hm-fab{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media(min-width:640px){.hm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}:is(.hm,.tiles) .hm-tile{aspect-ratio:1/.72}}
/* "+ Add" by the heading: a computer's stand-in for the round + */
.hm-hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 12px}.hm-hrow .hm-h{margin:0}
button.hm-addsm{display:none;gap:.4rem;min-height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:.92rem;font-weight:600}.hm-aic{width:18px;height:18px}
/* a computer: a wider page, the couple's countdown and nudge in one row, compact tiles 4 across (the icon and title on one line, the summary under),
   no big search field (the top bar has Search) and no round + (the "+ Add" by the heading) */
@media(min-width:1024px){.hm{max-width:1100px}.hm-top{align-items:flex-start;text-align:left;padding-bottom:16px}.hm-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  :is(.hm,.tiles) .hm-tile:not([data-c=up]){display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;column-gap:10px;row-gap:4px;aspect-ratio:auto;min-height:92px;padding:14px 18px;border-radius:20px;text-align:left}
  :is(.hm,.tiles) .hm-tile:not([data-c=up]) .hm-tx{display:contents}:is(.hm,.tiles) .hm-tile:not([data-c=up]) .hm-ic{width:24px;height:24px}:is(.hm,.tiles) .hm-tile:not([data-c=up]) .hm-tt{font-size:1.12rem}:is(.hm,.tiles) .hm-tile:not([data-c=up]) .hm-ts{grid-column:1/-1}
  button.hm-search,button.hm-fab{display:none}button.hm-addsm{display:inline-flex}
  .hm-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:stretch}.hm .hm-lead>*{max-width:none;margin:0}.hm .hm-lead .hm-hero{max-width:none;height:100%}.hm-lead>.hm-cd[open]>.hm-hero{height:auto}}
.hm-sheet{width:min(400px,calc(100vw - 32px))}.hm-shh{display:flex;align-items:center;justify-content:space-between;margin:0 0 .6rem}.hm-sheet h2{margin:0}
button.hm-shx{width:44px;padding:0;border:0;background:none;border-radius:50%}.hm-xic{width:22px;height:22px;transform:rotate(45deg)}
.hm-shl{display:grid;gap:8px}.hm-shl button{justify-content:flex-start;gap:.8rem;width:100%;min-height:52px;padding:0 1rem;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:1rem;text-align:left}.hm-lic{width:20px;height:20px;flex:none;color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){:is(.hm,.tiles) .hm-tile,button.hm-fab{transition:none}:is(.hm,.tiles) .hm-tile:active,button.hm-fab:active{transform:none}}
/* ---------- The same tiles on other tabs (public/home.js): .tiles holds compact tiles at every width (the Tools hub: the icon and title on one line, the
   live status under), and .hm-stats is one short strip of a tab's key numbers (Guests, Budget, Checklist, the portal's Credits; the console's .ostats
   take the same look in owner.css). A number tile that filters the list below is a button with aria-pressed. The strip's tones go plum, gold, blush by
   position, so neighbors differ in a row and in a 2 by 2. */
.tiles .hm-tile:not([data-c=up]){display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;column-gap:10px;row-gap:4px;aspect-ratio:auto;min-height:84px;padding:12px 14px;border-radius:18px;text-align:left}
.tiles .hm-tile:not([data-c=up]) .hm-tx{display:contents}.tiles .hm-tile:not([data-c=up]) .hm-ic{width:22px;height:22px}.tiles .hm-tile:not([data-c=up]) .hm-tt{font-size:1.04rem;line-height:1.2}.tiles .hm-tile:not([data-c=up]) .hm-ts{grid-column:1/-1}
@media(min-width:640px){.tiles .hm-tile:not([data-c=up]){min-height:92px;padding:14px 18px;border-radius:20px}.tiles .hm-tile:not([data-c=up]) .hm-ic{width:24px;height:24px}.tiles .hm-tile:not([data-c=up]) .hm-tt{font-size:1.12rem}}
.hm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.hm-stats.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:639px){.hm-stats.n3.big{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-stats.n3.big>:nth-child(3){grid-column:1/-1;min-height:64px}}
@media(min-width:640px){.hm-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1100px}.hm-stats.n3{max-width:840px}.hm-stats.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}}
.hm-stats .hm-stat{--hm-c:var(--hm-a);--hm-ink:var(--hm-a-ink);--hm-sub:var(--hm-a-sub);--hm-bd:var(--hm-a-bd);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;min-height:72px;margin:0;padding:12px 16px;border:1px solid var(--hm-bd);border-radius:18px;background:var(--hm-c);color:var(--hm-ink);font-weight:400;text-align:left;text-decoration:none;white-space:normal;box-shadow:var(--hm-tsh);transition:transform .15s var(--ease),filter .15s}
.hm-stats>:nth-child(3n+2){--hm-c:var(--hm-b);--hm-ink:var(--hm-b-ink);--hm-sub:var(--hm-b-sub);--hm-bd:var(--hm-b-bd)}.hm-stats>:nth-child(3n+3){--hm-c:var(--hm-c3);--hm-ink:var(--hm-c3-ink);--hm-sub:var(--hm-c3-sub);--hm-bd:var(--hm-c3-bd)}
.hm-sn{font:500 1.6rem/1.1 var(--serif);letter-spacing:-.01em;color:var(--hm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hm-sl{font-size:.8rem;font-weight:600;line-height:1.3;color:var(--hm-sub)}.hm-sl+.hm-sl{font-weight:500}
.hm-stats button.hm-stat:hover{background:var(--hm-c);border-color:var(--hm-bd);filter:brightness(1.04)}.hm-stats button.hm-stat:active{transform:scale(.98)}.hm-stats .hm-stat:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hm-stats .hm-stat[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}.hm-stats .hm-stat[aria-pressed=true] .hm-sl:first-of-type::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:currentColor;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.hm-stats .hm-stat{transition:none}.hm-stats .hm-stat:active{transform:none}}
/* the loading screen (app.html #sp-load, drawn before any script) in dark mode: theme.js has set data-theme before the first paint */
html[data-theme=dark] #sp-load{background:#161118!important}html[data-theme=dark] #sp-load div{color:#F8F3EC!important}html[data-theme=dark] #sp-load em{color:#BCB2A9!important}html[data-theme=dark] #sp-load img{content:url(/brand/loader-dark.svg)}