/* Sections: 1 tokens · 2 themes · 3 base · 4 sidebar · 5 controls · 6 components · 7 Home · 8 modules · 9 login · 10 small screens
   Colors, sizes and fonts are variables: change them here and they change everywhere. */

/* 1. Tokens. Every pop-up (✎ and share boxes, menus, the tile box, suggestions) uses --pop-bg and --shadow-pop (centered) */
:root{--radius:8px;--tile:96px;--icon-s:14px;--icon:16px;--icon-l:18px;--gap:16px;--red:#d64545;--yellow:#e3a008;--blue:#3b7ddd;--green:#2e9e5b;--grey:#8a9095;--font-hand:'Caveat','Segoe Print','Bradley Hand',cursive;--font:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--font-title:'Roboto Slab',Rockwell,Georgia,serif;--fs-xs:.72rem;--fs-sm:.82rem;--fs-md:.9rem;--fs-base:1rem;--fs-lg:1.1rem;--fs-xl:1.35rem;--fs-title:1.6rem;--fs-huge:2rem} /* text sizes; fonts --font and --font-title come from head_boot() */
:root,[data-mode="light"]{--bg:#f5f5f2;--side:#ecece8;--card:rgba(255,255,255,.66);--card-solid:#fff;--ink:#23272b;--mute:#7c8288;--line:#e2e2dc;--acc-ink:#fff;--link:#5f666c;--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);--shadow-pop:0 0 6px rgba(0,0,0,.07),0 0 30px rgba(0,0,0,.13);--pop-bg:color-mix(in srgb,var(--card-solid) 97%,transparent)}
:root:not(.ready) *{transition:none!important} /* no transitions while the page builds (app.js adds .ready) */
:root{--glow:0 0 0 2px var(--acc),0 0 16px color-mix(in srgb,var(--acc) 60%,transparent)} /* accent glow (avatar hover) */
[data-mode="dark"]{color-scheme:dark;--bg:#111314;--side:#0c0e0f;--card:rgba(32,36,39,.6);--card-solid:#1a1d1f;--ink:#e8eae9;--mute:#8b9196;--line:#2a2e31;--acc-ink:#0c0e0f;--link:#a7adb2;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-pop:0 0 6px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.55);--pop-bg:color-mix(in srgb,var(--card-solid) 97%,transparent)}

/* 2. Color themes (accent): light value, then dark */
:root,[data-theme="sage"]{--acc:#2f6f6a}
[data-theme="sage"][data-mode="dark"]{--acc:#6fb8b1}
[data-theme="ocean"]{--acc:#2b5fd9}
[data-theme="ocean"][data-mode="dark"]{--acc:#7aa2ff}
[data-theme="sunset"]{--acc:#cf5b31}
[data-theme="sunset"][data-mode="dark"]{--acc:#f0906a}
[data-theme="graphite"]{--acc:#3d4247}
[data-theme="graphite"][data-mode="dark"]{--acc:#c9ced3}
/* tints of the theme color (light, medium, strong): hovers, chosen items, soft backgrounds */
:root{--tint:color-mix(in srgb,var(--acc) 8%,transparent);--tint-2:color-mix(in srgb,var(--acc) 14%,transparent);--tint-3:color-mix(in srgb,var(--acc) 20%,transparent)}
[data-theme-style="colorful"]{--bg:color-mix(in srgb,var(--acc) 16%,#edebe6);--side:color-mix(in srgb,var(--acc) 24%,#e2e0d8);--card:color-mix(in srgb,var(--acc) 10%,rgba(255,255,255,.84));--card-solid:color-mix(in srgb,var(--acc) 8%,#ffffff);--line:color-mix(in srgb,var(--acc) 26%,#c8ccc2);--tint:color-mix(in srgb,var(--acc) 16%,transparent);--tint-2:color-mix(in srgb,var(--acc) 26%,transparent);--tint-3:color-mix(in srgb,var(--acc) 38%,transparent)}
[data-theme-style="colorful"] body{background:var(--bg) radial-gradient(1300px 650px at 88% -8%,color-mix(in srgb,var(--acc) 45%,transparent),transparent) fixed}
[data-theme-style="colorful"] .navitem a.on{background:var(--acc);color:var(--acc-ink)}
[data-theme-style="colorful"] .navitem a.on .icon{color:var(--acc-ink)}
[data-theme-style="colorful"] .pills>.on{background:var(--acc);color:var(--acc-ink)}
[data-theme-style="colorful"][data-mode="dark"]{--bg:color-mix(in srgb,var(--acc) 24%,#0b0d0f);--side:color-mix(in srgb,var(--acc) 32%,#050608);--card:color-mix(in srgb,var(--acc) 18%,rgba(22,26,30,.8));--card-solid:color-mix(in srgb,var(--acc) 18%,#14171a);--line:color-mix(in srgb,var(--acc) 35%,#262b30);--acc-ink:#fff;--tint:color-mix(in srgb,var(--acc) 22%,transparent);--tint-2:color-mix(in srgb,var(--acc) 34%,transparent);--tint-3:color-mix(in srgb,var(--acc) 46%,transparent)}
[data-theme-style="colorful"][data-mode="dark"] body{background:var(--bg) radial-gradient(1300px 650px at 88% -8%,color-mix(in srgb,var(--acc) 50%,transparent),transparent) fixed}
[data-theme-style="colorful"][data-mode="dark"] .navitem a.on{background:var(--acc);color:#fff}
[data-theme-style="colorful"][data-mode="dark"] .navitem a.on .icon{color:#fff}
[data-theme-style="colorful"][data-mode="dark"] .pills>.on{background:var(--acc);color:#fff}

/* 3. Base */
html{scrollbar-gutter:stable} /* the scrollbar's room is always kept, so tiles don't change size between pages */
*{box-sizing:border-box}
.notr,.notr *{transition:none!important} /* app.js instant(): switch theme without the hover fades */
[hidden]{display:none!important}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
form{margin:0}
body{margin:0;display:flex;min-height:100vh;background:var(--bg) radial-gradient(1100px 520px at 88% -8%,color-mix(in srgb,var(--acc) 11%,transparent),transparent) fixed;color:var(--ink);font:15px/1.55 var(--font)}
a{color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:2px}
a:hover{color:var(--ink);text-decoration-color:currentColor}
.navitem a,.btn,.list a,.dtile,.tag,.ext,.folder,.lfm-albums a,.photos a,.pic a,.news a{text-decoration:none}
h2{font-family:var(--font-title);font-size:var(--fs-title);font-weight:600;margin:0 0 18px}
h3{font-size:var(--fs-md);margin:0 0 8px}
h3.sub{margin:26px 0 8px}
h3.sub,.plain .wtitle{color:var(--mute);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.06em}
main{flex:1;padding:36px 44px;max-width:1150px}
.mute{color:var(--mute)}
.small{font-size:var(--fs-sm)}
/* .hint = explanation, .empty = nothing here, .err / .ok = messages */
.hint{color:var(--mute);font-size:var(--fs-sm)}
.tiny{font-size:var(--fs-xs)} /* the smallest text (after .hint, so .hint.tiny is tiny): when something was updated or loaded */
time.hint{font-style:italic;color:color-mix(in srgb,var(--mute) 75%,transparent)} /* when something was saved or loaded: a bit fainter */
.empty{color:var(--mute)}
.unread{font-weight:600}
/* spacing and widths; ul.items: a list without bullets and indent */
.items{list-style:none;margin:0;padding:0}
.items>.empty{margin:1em 0}
.mt{margin-top:32px}
:is(.panel,.boxes)+:is(.panel,.boxes){margin-top:var(--gap)} /* boxes and rows of boxes after each other: always a gap */
:is(.panel,.widget,.homehead):has(.hpick:is(:hover,:focus-within)){position:relative;z-index:30} /* an open pick menu above the boxes after it */
.panel textarea{min-height:0}
.panel.full{max-width:none}
.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:var(--gap)}
.boxes .panel{max-width:none;margin:0} /* boxes side by side (Settings) */
#settings h3{color:var(--mute);text-transform:uppercase;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;margin:0 0 8px}
#settings h3.sub{margin:18px 0 8px}
#settings :is(h3,header.listhead h3)+:is(.hint,p.hint){margin-top:-4px}
.boxes.same{grid-auto-rows:1fr} /* every box as tall as the tallest (Health) */
.boxes.same:has(details:not(.tedit)[open]){grid-auto-rows:auto;align-items:start} /* an open History only makes its own box taller */
.panel.narrow{max-width:360px}
.grow{flex:1}
.short{width:7.5em;flex:none;min-width:0}
:is(.catrow,.row) input.w-date,.w-date{width:135px!important;min-width:135px!important;max-width:140px!important;flex:none!important;padding:6px 8px}
.w-name{max-width:220px} /* field widths: .short (numbers), .w-date, .w-name (a person's name); other fields fill the row */
.err{color:var(--red)}
.ok{color:var(--acc)}

/* optional background image (Settings > Customization), in a layer fixed to the screen (::before), so it never moves,
   also on phones where background-attachment: fixed doesn't work. A veil of the page color fades it from left to right (::after). */
body.has-bg{background:var(--bg)}
body.has-bg::before,body.has-bg::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body.has-bg::before{background:var(--site-bg) center/cover no-repeat}
body.has-bg::after{background:linear-gradient(to right,color-mix(in srgb,var(--bg) 75%,transparent),color-mix(in srgb,var(--bg) 25%,transparent))}
.has-bg aside,.has-bg .dock,.has-bg #menu{background:color-mix(in srgb,var(--side) 72%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.has-bg .dock,.has-bg #menu{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* 4. Sidebar */
aside{width:236px;background:var(--side);border-right:1px solid var(--line);padding:22px 12px 14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;z-index:20}
aside:has(.search:focus-within),aside:has(#live:not([hidden])){z-index:250}
.navitem a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--card)}
[data-nav="collapsed"] .navitem .dot{right:calc(50% - 14px)} /* notification dot (menu, avatar, widget titles, reminder bells) */
.wtitle,.remind summary{position:relative}
.wtitle .dot{top:2px;right:-11px}
.remind summary .dot{top:2px;right:2px}
.navitem a .icon{order:1;flex:none;width:var(--icon-l);height:var(--icon-l)} /* icon right of the text */
#menu{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
#menu::-webkit-scrollbar{display:none}
#menu.vscrolls{background-image:linear-gradient(var(--acc),var(--acc)),linear-gradient(var(--tint-3),var(--tint-3));background-repeat:no-repeat;background-size:3px var(--th),3px calc(100% - 12px);background-position:right var(--ty),right 6px} /* a short window: thin scroll bar (app.js), like the phone menu's */
.navitem{display:flex;align-items:center;border-radius:var(--radius)}
.navitem a{flex:1;padding:7px 10px;color:var(--ink);text-decoration:none;border-radius:var(--radius);text-align:right}
.navitem:hover{background:var(--tint)}
.navitem a.on{background:var(--tint-2)}
.navitem .label{opacity:.78;transition:opacity .15s}
.navitem:hover .label,.navitem a.on .label{opacity:1} /* menu text a little faded, full on hover and for the current page */
.navmore{display:none} /* phones only: the tab bar's More (section 10) */
.navitem .handle{opacity:0;order:-1;padding-left:8px}
.navitem:hover .handle{opacity:1}
.dock{display:flex;flex-direction:column;gap:10px}
.search{position:relative;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0 4px 0 12px;color:var(--mute);opacity:.55;transition:opacity .15s}
.search:hover,.search:focus-within{opacity:1}
.search input{border:0;background:none;padding:8px 0;outline:0}
.live{position:absolute;top:calc(100% + 4px);left:0;z-index:50;width:max(100%,340px);max-height:70vh;overflow:auto;background:var(--pop-bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:6px}
.live a{display:block;padding:5px 8px;border-radius:var(--radius);color:var(--ink);text-decoration:none}
.live a:hover{background:var(--tint)}
.live h3.sub{margin:8px 8px 2px}
.live .empty{margin:6px 8px}
.me{display:flex;align-items:center;gap:4px;padding:0 4px}
.logout{display:flex} /* log out is a small POST form */
.melink{flex:1;min-width:0;display:flex;align-items:center;gap:4px;color:inherit;text-decoration:none} /* avatar + name: opens Settings */
[data-nav="collapsed"] .melink{flex:none}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);margin-right:4px;transition:box-shadow .2s}
.avatar:hover,.melink:hover .avatar{box-shadow:var(--glow)}
.avatar.big{width:64px;height:64px;border-width:2px}
.user{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon{width:var(--icon-l);height:var(--icon-l)} /* icon sizes: --icon-s markers, --icon tools, --icon-l menu and tiles */
:where(button:has(>.icon),.btn:has(>.icon)){display:inline-flex;align-items:center;justify-content:center;gap:6px} /* an icon with a word (Record, Refresh prices): centered on one line; :where = no weight, so a button's own display (the phone-only More) wins */
.iconbtn{background:none;border:0;color:var(--mute);padding:6px;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{background:var(--tint-2);color:var(--ink)}
.navitem .icon,.navtoggle,.dock .iconbtn{color:var(--acc)}
[data-mode="dark"] .i-moon,[data-mode="light"] .i-sun{display:none}

/* collapsed menu (html[data-nav="collapsed"], wide screens only): icons only */
@media(min-width:761px){
    aside{transition:width .15s}
    [data-nav="collapsed"] aside{width:66px;padding-left:8px;padding-right:8px;align-items:center}
    [data-nav="collapsed"] .label,[data-nav="collapsed"] .navitem .handle,[data-nav="collapsed"] .search input,[data-nav="collapsed"] .user{display:none}
    [data-nav="collapsed"] #menu,[data-nav="collapsed"] .dock{width:100%}
    [data-nav="collapsed"] .navitem a{display:flex;justify-content:center;padding:10px 0}
    [data-nav="collapsed"] .search{justify-content:center;padding:8px 0;cursor:pointer}
    [data-nav="collapsed"] .me{flex-direction:column;padding:0}
}
.navtoggle .i-chevrons-right{display:none}
[data-nav="collapsed"] .navtoggle .i-chevrons-left{display:none}
[data-nav="collapsed"] .navtoggle .i-chevrons-right{display:block}

/* 5. Controls */
input,textarea,select,button{font:inherit;color:inherit}
input,textarea,select{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 11px;width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--acc) 40%,transparent);border-color:var(--acc)}
input[type=checkbox],input[type=radio]{width:auto}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75;transition:opacity .15s}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}
[data-mode="dark"] :is(input,select,textarea){color-scheme:dark}
[data-mode="dark"] input[type=date]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E");opacity:.95}
[data-mode="dark"] input[type=time]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.1.8-1.2-4.5-2.7V7z'/%3E%3C/svg%3E");opacity:.95}

[data-mode="dark"] select::picker-icon{color:var(--ink);opacity:.95}


select{width:auto;white-space:nowrap}
/* dropdowns: the open list looks like the sleep menu (pick_menu()): a card with a slight border, plain rows, a tint on hover.
   Only browsers with customizable selects (Chrome, Edge); others show their own list. */
@supports (appearance:base-select){
    select,::picker(select){appearance:base-select}
    select{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
    select::picker-icon{color:var(--mute);transition:rotate .15s}
    select:open::picker-icon{rotate:180deg}
    ::picker(select){margin-top:4px;padding:4px;min-width:120px;color:var(--ink);background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
    option{padding:5px 10px;border-radius:calc(var(--radius) - 3px);font-size:var(--fs-sm)}
    option:hover,option:focus-visible{background:var(--tint);outline:none}
    option:checked{background:var(--tint-2)}
    option::checkmark{display:none}
}
textarea{min-height:55vh;resize:vertical}
button,.btn{background:var(--acc);color:var(--acc-ink);border:0;border-radius:var(--radius);padding:8px 15px;cursor:pointer;text-decoration:none;font-size:var(--fs-md);font-weight:550;white-space:nowrap}
button:hover,.btn:hover{filter:brightness(1.08)}
:is(button,.btn).ghost{background:none;color:var(--mute);padding:6px 9px;font-weight:500}
:is(button,.btn).ghost:hover{color:var(--ink);filter:none}
:is(button,.btn).ghost.err{color:var(--red)}
button.soft,.btn.soft{background:var(--tint-2);color:var(--acc)} /* a second button next to a main one */
.btn.ghostbtn{background:none;color:var(--ink);border:1px solid var(--line)}
.row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
:where(.row) input{flex:1;min-width:140px}
.btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.btnrow button{padding:4px 12px}
.btnrow button:disabled{opacity:1;cursor:default} /* small buttons: filters, sorting, switches */
.pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.btnrow .pills{margin:0} /* pills (pills(), data-filter, data-sort): grey, the chosen one stronger */
.pills>a,.pills>button{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border:1px solid var(--line);border-radius:var(--radius);background:none;color:var(--mute);font-size:var(--fs-sm);font-weight:400;text-decoration:none;cursor:pointer}
.pills>a:hover,.pills>button:hover{color:var(--ink);filter:none}
.pills>.on{background:var(--tint-2);border-color:transparent;color:var(--ink)}
.pills>button:disabled{opacity:1;cursor:default}
.pills>.manage{border-style:dashed}
.pills>.dim{opacity:.55} /* e.g. a month without entries */
.tx-period{margin:0 0 8px}
.tx-new+.tx-period{margin-top:24px}
.tx-period+.fin-sum{margin-top:12px}
.tx-new{position:relative}
.tx-new>.row:first-of-type{margin-right:38px} /* room for the collapse button */
.fin-sum[data-collapse],.fin-chartbox[data-collapse]{position:relative;padding-right:52px}
/* collapsible box (app.js section 17): a .ctoggle top right, a .copen line while collapsed */
[data-collapse]{position:relative}
.ctoggle{position:absolute;top:10px;right:10px}
.ctoggle .icon{transition:transform .2s}
[data-collapse].collapsed .ctoggle .icon{transform:rotate(180deg)}
.copen{display:none;padding:0;border:0;background:none;color:var(--acc);font-weight:600;text-align:left;cursor:pointer}
.copen:hover{filter:none;text-decoration:underline}
[data-collapse].collapsed>.copen{display:block}
[data-collapse].collapsed>:not(.copen,.ctoggle,.cbox-head){display:none!important}
[data-collapse].collapsed>.cbox-head{margin-bottom:0}
.panel.collapsed:not(:has(>.cbox-head)){padding:14px 52px 14px 12px} /* collapsed: every box's line starts at the same place */
.panel.tx-new{background:color-mix(in srgb,var(--card-solid) 88%,#fff);border-color:color-mix(in srgb,var(--acc) 35%,var(--line));box-shadow:var(--shadow-pop)} /* the new-transaction form stands out a little */
.handle{cursor:grab;color:var(--mute);user-select:none;touch-action:none;padding:4px 6px;line-height:1}
.handle:active{cursor:grabbing}
:is(.handle,.whead .handle,.dtools .handle,.draft .handle):hover{background:none!important;color:var(--ink)}
.drag{opacity:.45}

/* 6. Components */
.widget,.panel,.entry,.loginbox,.sbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;max-width:640px;display:flex;flex-direction:column;gap:14px}
.panel>*{margin-block:0} /* inside a box only its gap spaces things */
.panel label:where(:not([class])){display:flex;flex-direction:column;gap:5px;font-size:var(--fs-md)}
.check{display:flex;align-items:center;gap:8px} /* labels: text above the field */
.panel button{align-self:flex-start}
.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:none;backdrop-filter:none}
.modal-panel{position:relative;width:min(var(--modal-w,480px),94vw);max-height:90vh;overflow-y:auto;background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:22px 24px 20px;display:flex;flex-direction:column;gap:14px;-webkit-backdrop-filter:none;backdrop-filter:none}
.modal-close{position:absolute;top:12px;right:12px;z-index:10;text-decoration:none}
.preview{max-width:100%;border-radius:var(--radius)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;cursor:pointer}
.swatch span{width:16px;height:16px;border-radius:50%}
.swatch:has(input:checked){border-color:var(--acc);background:var(--tint)}
.swatches.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;width:100%}
.theme-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 10px;display:flex;align-items:center;gap:8px;min-height:42px;cursor:pointer;user-select:none;position:relative;overflow:hidden}
.theme-card.active,.theme-card:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--card))}
.theme-dot{width:16px;height:16px;border-radius:50%;flex:none}
.theme-name{font-size:var(--fs-md);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-modes{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.theme-mode-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:calc(var(--radius) - 3px);border:1px solid var(--line);background:var(--card-solid);color:var(--mute);cursor:pointer;padding:0;flex:none}
.theme-mode-btn:hover{background:var(--tint);color:var(--ink)}
.theme-mode-btn input[type=radio]{display:none}
.theme-mode-btn.on,.theme-mode-btn:has(input:checked){background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.theme-mode-btn .icon{width:14px;height:14px}
.mark{border-left:3px solid color-mix(in srgb,var(--tc,transparent) var(--p,100%),transparent);padding-left:10px}
.t1{--p:100%}
.t2{--p:60%}
.t3{--p:30%}
.is-hidden{opacity:.5}

/* hover feedback on clickable and card-like elements */
.navitem,.iconbtn,.pills>*,.entry,.card,.fin-stock,.fin-acc,.glasses-card,.folder,.tag,.widget,input,textarea,select{transition:background-color .15s,border-color .15s}
.entry:hover,.card:hover,.fin-stock:hover,.glasses-card:hover,.folder:hover{background:color-mix(in srgb,var(--acc) 6%,var(--card))}
/* hover: background +6 % of the item's color (or the theme color), border 30 % */
.widget:hover{border-color:color-mix(in srgb,var(--acc) 30%,var(--line))}
.widget:not(.plain):hover{background:color-mix(in srgb,var(--acc) 6%,var(--card))}
.tag:hover{background:var(--tint-3)}
:is(input,textarea,select):hover:not(:focus){border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}

/* 7. Home */
.date{margin:0;color:var(--mute);font-size:var(--fs-sm)}
.sleepq{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;color:var(--mute);font-size:var(--fs-sm);font-style:italic}
.sleepq .moon{margin-right:-7px}
.hnum{display:inline-flex;margin:0}
.hnum input{width:6em;padding:0 2px;border:0;border-bottom:1px dashed var(--acc);border-radius:0;background:none;color:var(--acc);font:inherit} /* health questions on Home: one menu (or number field) each */
.listhead form.autosave{margin-left:auto}
.listhead .check{font-size:var(--fs-sm);color:var(--mute);gap:5px}
.listhead>form>input.short{width:4.5em;height:24px;padding:0 8px;font-size:var(--fs-sm)} /* a number field in a heading line (Health "New"): as small as the words next to it */
.hpick{position:relative;display:inline-block;color:var(--acc);border-bottom:1px dashed;cursor:pointer}
.moon{width:1.15em;height:1.15em;margin-right:7px;vertical-align:-.22em;overflow:visible;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--ink) 45%,transparent))}
.moon circle{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-dasharray:44;animation:moondraw .9s ease-out both}
.moon path{fill:currentColor;transform-box:view-box;transform-origin:50% 50%;animation:moonfill .7s .45s ease-out both}
@keyframes moondraw{from{stroke-dashoffset:44}}
@keyframes moonfill{from{opacity:0;transform:scale(.3)}} /* the moon: outline drawn, then the lit part grows in */
.dayline{width:100%;height:2px;margin:10px 0 4px;background:var(--line);border-radius:2px;overflow:hidden}
.dayline i{display:block;width:var(--d,0);height:100%;background:var(--acc);opacity:.6;transition:width .6s} /* part of the day passed */
.focus{margin:6px 0 0;font-size:var(--fs-md);font-weight:600}
.focus .ttl:empty::before{content:"Today's focus…";color:var(--mute);font-weight:400}
.focus .ttl:empty{display:inline-block;padding:2px 10px;border:1px solid var(--acc);border-radius:var(--radius);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 35%,transparent);animation:focusfade 4s ease-in forwards}
.focus:hover .ttl:empty{animation:none;opacity:.8}
@keyframes focusfade{0%,35%{opacity:1}to{opacity:0}} /* empty: glows on load, then fades (hover brings it back) */
.focus .nedit{max-width:420px} /* focus line (empty: a placeholder to click) */ /* moon phase (moon_icon()) */
.cropper{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:rgba(0,0,0,.8)}
.cropstage{position:relative;overflow:hidden;line-height:0;user-select:none;touch-action:none}
.cropstage img{display:block;max-width:min(92vw,1100px);max-height:75vh}
.croprect{position:absolute;box-shadow:0 0 0 9999px rgba(0,0,0,.55);outline:2px solid #fff;cursor:move;touch-action:none}
.croprect.round{border-radius:50%}
.croprect i{position:absolute;width:14px;height:14px;background:#fff;border-radius:3px}
.croprect [data-h=nw]{left:0;top:0;cursor:nwse-resize}
.croprect [data-h=ne]{right:0;top:0;cursor:nesw-resize}
.croprect [data-h=sw]{left:0;bottom:0;cursor:nesw-resize}
.croprect [data-h=se]{right:0;bottom:0;cursor:nwse-resize}
.cropper .row{margin:0}
.cropper .ghost{color:#fff} /* crop tool (app.js 27): the photo darkened outside the frame; corners size it */
.upbar{position:relative;height:22px;margin:8px 0;border-radius:var(--radius);background:var(--tint);overflow:hidden;font-size:var(--fs-xs)}
.upbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--tint-3);transition:width .2s}
.upbar span{position:relative;display:block;padding:0 8px;line-height:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.upbar.err{height:auto;background:none}
.upbar.err span{color:var(--red);line-height:1.4;padding:0} /* file uploads: progress under the form (app.js 26) */
.saved{margin-left:8px;color:var(--mute);font-size:var(--fs-sm);animation:fadeout 2.5s forwards}
@keyframes fadeout{70%{opacity:1}to{opacity:0}} /* "Saved" next to the button */
.aclock .tick{fill:var(--ink);opacity:.8}
.sicon{position:relative;top:-2px;display:inline-flex;width:1.15em;height:1.15em;color:var(--acc)}
.sicon:not(.new){filter:grayscale(1);opacity:.45;transition:filter .2s,opacity .2s}
.sicon:not(.new):hover{filter:none;opacity:1} /* nothing new: faded grey */
.sicon.new{animation:shake 6s ease-in-out .8s infinite}
@keyframes shake{0%,12%,100%{transform:none}2%,6%,10%{transform:rotate(-12deg)}4%,8%{transform:rotate(12deg)}} /* something new: a short shake, again every 6 s */
@media(prefers-reduced-motion:reduce){.sicon.new{animation:none}}
.sicon img,.sicon span{width:100%;height:100%;object-fit:contain;display:grid;place-items:center;font-size:.8em;font-weight:700}
.sicon .dot{top:-3px;right:-5px} /* Smoothie next to your name: site icon while its status answers, dot = something new */
.htop{display:contents} /* its parts sit directly in the top row */
.sstat{display:inline-flex;align-items:center;gap:4px;margin-left:10px;vertical-align:middle}
.sstat .tedit{opacity:0;transition:opacity .15s;font-size:var(--fs-md);font-weight:400}
.sstat .tedit .panel{left:0;right:auto}
:is(.hello,.date):is(:hover,:focus-within) .sstat .tedit{opacity:1} /* Smoothie's ✎ on hover of the greeting (phones: of the date line) */
.date .sstat{margin-left:6px;font-size:var(--fs-lg)}
/* Moments: Polaroids on grainy paper (SVG noise), slightly tilted, straight on hover;
   photos black and white until hovered (touch: while pressed) */
.polaroid{position:relative;margin:0;padding:10px 10px 12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),linear-gradient(165deg,#fcfaf5,#f0eadf);color:#2b2b2b;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.08),var(--shadow-pop);transform:rotate(var(--r,0deg));transition:transform .2s}
.polaroid.small{padding:7px 7px 9px}
.polaroid.small .hand{font-size:1.2rem}
.polaroid.small figcaption{padding-top:5px}
a:hover>.polaroid,.wpola .polaroid:hover,.moment-pic .polaroid:hover{transform:rotate(0) translateY(-3px)}
.pola-pic{position:relative}
.pola-pic>a{display:block}
.polaroid img,.polaroid .ph{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#e7e2d8;filter:grayscale(1);transition:filter .4s;user-select:none}
.polaroid:is(:hover,:active,:focus-within) img{filter:none}
.polaroid figcaption{display:flex;flex-direction:column;align-items:center;padding-top:8px;text-align:center}
.polaroid .hand{font-family:var(--font-hand);font-size:1.5rem;line-height:1.1}
.polaroid small{color:#7a7a7a;font-size:var(--fs-xs)}
.pola-nav,.tnav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;opacity:0;cursor:pointer;transition:opacity .15s,background-color .15s}
:is(.pola-nav,.tnav).prev{left:6px}
:is(.pola-nav,.tnav).next{right:6px}
:is(.pola-nav,.tnav):hover{background:rgba(0,0,0,.7);filter:none}
:is(.pola-nav,.tnav) .icon{width:18px;height:18px}
.pola-count{position:absolute;right:8px;bottom:6px;padding:0 7px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:var(--fs-xs);opacity:0;pointer-events:none;transition:opacity .15s}
.polaroid:is(:hover,:focus-within) :is(.pola-nav,.pola-count),.tscroll:is(:hover,:focus-within) .tnav{opacity:1}
/* timeline: one column per moment (widths inline), rows: Polaroids above, year line, one lane per overlapping bar, Polaroids below */
.timeline{overflow-x:auto;padding:6px 4px 12px}
.tl{display:grid;column-gap:22px;min-width:max-content;padding:0 6px}
.tl-col{display:contents}
.tl-year{grid-column:var(--c);grid-row:2;position:relative;display:flex;align-items:center;justify-content:center}
.tl-year::before{content:"";position:absolute;left:-11px;right:-11px;top:50%;height:2px;background:var(--line);z-index:-1}
.tl-year span{padding:1px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--mute);font-size:var(--fs-sm)}
.tl-card{grid-column:var(--c);color:inherit;text-decoration:none}
.tl-card.up{grid-row:1;align-self:end}
.tl-card.down{grid-row:-2;align-self:start}
.tl-bar{grid-column:var(--c) / span var(--span);grid-row:var(--row);align-self:center;display:block;height:28px;padding:0 12px;line-height:28px;border-left:3px solid var(--acc);border-radius:0 999px 999px 0;background:var(--tint-2);color:var(--ink);text-decoration:none;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-bar small{color:var(--mute)}
.tl-bar:hover{background:var(--tint-3);color:var(--ink)}
.tl-bar.open{background:linear-gradient(90deg,var(--tint-2) 65%,transparent)}
.tl-bar.open:hover{background:linear-gradient(90deg,var(--tint-3) 65%,transparent)} /* ongoing: fades out */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,170px);gap:22px;align-items:start}
.mcards a{color:inherit;text-decoration:none}
.mcards .polaroid.small{width:124px}
/* one moment: Polaroid left, form right (Save comes first so Enter saves, shown last) */
.moment{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:28px;align-items:start}
.moment .panel{max-width:none}
.moment-form{display:flex;flex-direction:column;gap:10px}
.moment-form .row{margin:0}
.moment-form .hint{margin:0}
.msave{order:9;align-self:flex-start}
.mdates{display:flex;flex-direction:column;gap:6px}
.mdate{display:grid;grid-template-columns:minmax(0,1.2fr) 150px 150px minmax(0,1fr) 30px;gap:6px;align-items:center}
.mdate input{width:100%;min-width:0}
.mdate.hint{font-size:var(--fs-xs)}
.mphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.mphoto{position:relative}
.mthumb{display:block;width:100%;padding:0;border:0;border-radius:var(--radius);background:none;overflow:hidden;cursor:pointer}
.mthumb.on{box-shadow:0 0 0 2px var(--acc)}
.mthumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1);transition:filter .3s}
.mthumb:is(:hover,.on) img{filter:none}
.mphoto .mdel{position:absolute;top:3px;right:3px;padding:1px 6px;background:var(--card-solid);opacity:0;transition:opacity .15s}
.mphoto:hover .mdel{opacity:1}
.listhead .tedit .panel{left:0;right:auto} /* world clock: 5-minute marks */
.hpick.done{border:0;cursor:default;color:color-mix(in srgb,var(--mute) 60%,var(--ink))} /* answered: a little brighter */ /* sleep question: answers on hover */
.hpick form{position:absolute;left:-6px;top:100%;z-index:30;display:none;flex-direction:column;min-width:120px;padding:4px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.hpick:hover form,.hpick:focus-within form{display:flex}
.hpick button{background:none;color:var(--ink);text-align:left;padding:5px 10px;font-size:var(--fs-sm);font-weight:400}
.hpick button:hover{background:var(--tint)}
.hello{margin:2px 0 0}
#dateline{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1} #dateline time{display:inline-flex;align-items:center;line-height:1} #hiddenEye{display:inline-flex;align-items:center;line-height:1;vertical-align:middle} #hiddenEye .iconbtn{margin:0;padding:0;width:18px;height:18px;min-width:18px;min-height:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle} #hiddenEye .icon{display:block;width:14px;height:14px;margin:auto} /* eye after the date: show or hide hidden items */
/* small tool icons share one size */
.whead .icon,.fin-tools .icon,.date .icon,.ghost.iconbtn .icon{width:var(--icon);height:var(--icon)}
.fin-tools .tedit summary{font-size:calc(var(--icon) + 1px);line-height:1;padding:0}
.homehead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.homeside{display:flex;align-items:center;gap:10px}
.avwrap{position:relative;display:inline-flex}
.avwrap .dot{top:0;right:0;width:12px;height:12px}
/* top row: countdown and world clock circles */
.hcircle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--acc);background:none;color:var(--acc);font-weight:700;font-size:var(--fs-lg);transition:background-color .15s} .hcircle .icon{width:20px;height:20px;stroke-width:2.5}
.hcircle.alarm{padding:0;cursor:pointer;background:var(--red);border-color:var(--red);color:#fff;animation:alarm 1.4s ease-in-out infinite}
@keyframes alarm{50%{box-shadow:0 0 0 2px var(--red),0 0 16px color-mix(in srgb,var(--red) 60%,transparent)}} /* countdown reached: red, pulses until clicked */
.homeside .tedit summary{padding:0;display:flex} /* flex, also on touch screens: countdown and clock circles on one line */
.homeside .tedit summary:hover .hcircle{background:var(--tint)}
.aclocks summary,.cdown summary{display:flex;gap:10px}
.hitem{position:relative}
.hlabel{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);font-size:var(--fs-xs);line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.hlabel.up{top:auto;bottom:calc(100% + 3px)}
.hitem:hover .hlabel{opacity:1} /* names on hover, without moving the circles */
.aclock line{stroke:currentColor;stroke-linecap:round;transform-origin:20px 20px}
.aclock .hh{stroke-width:2.6}
.aclock .mh{stroke-width:1.8}
.aclock circle{fill:currentColor}
.aclocks .panel{width:min(320px,80vw)}
.cdown .panel{width:min(300px,80vw)}
.avatar.home{width:58px;height:58px;border-width:2px;margin:0;cursor:pointer}
.hand{font-family:var(--font-hand);font-weight:600;font-size:1.45em;line-height:1;letter-spacing:.01em;color:var(--acc)}
/* greeting written by hand (app.js): letters drawn, then filled */
.js .hello .hand{position:relative;color:transparent;animation:reveal 0s 5s forwards}
@keyframes reveal{to{color:var(--acc)}} /* shown after 5 s anyway */
.js .hello .hand.written{color:var(--acc)}
.handsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;font:inherit;letter-spacing:inherit}
.handsvg tspan{fill:var(--acc);fill-opacity:0;stroke:var(--acc);stroke-width:1.2;stroke-dasharray:400;stroke-dashoffset:400;animation:write .7s ease-in forwards}
@keyframes write{75%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1}100%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}}
.restore{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:28px;font-size:var(--fs-sm)}

.restore button{background:none;border:1px dashed var(--line);border-radius:var(--radius);color:var(--mute);font-size:var(--fs-sm);padding:5px 12px;cursor:pointer;user-select:none;transition:opacity .15s,color .15s,border-color .15s}
.restore button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 40%,var(--line))} .restore button:not(.on){opacity:.32} .restore button:not(.on):hover{opacity:.75} .restore button.on{opacity:1;background:none;border:1px dashed var(--line);color:var(--mute);font-weight:400;box-shadow:none} .restore button.on:hover{background:none;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}
.arrange-btn{display:none;margin-top:20px} /* touch screens only (section 10) */
.arrange-btn.on{color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.masonry-on{grid-auto-rows:4px;align-items:start} /* data-masonry grids: app.js places every item */
.widget{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.widget p{margin:5px 0}
/* widget header, fixed height: title (+ ✎ Edit) left, controls right */
.whead{display:flex;align-items:center;height:24px;margin-bottom:10px}
.whead .handle,.size,.close{order:1}
.whead :is(.size,.handle){margin-left:auto} .whead .size+.handle{margin-left:0}
.dbtn{margin-left:6px;padding:0 4px;font-size:calc(var(--icon) + 1px);line-height:1}
.plain :is(.wadd,.tadd,.ttool){display:none!important} /* plain style: only the content */
.wtitle{font-size:var(--fs-lg);font-weight:600;color:var(--acc);cursor:pointer;user-select:none;touch-action:none}
.wtitle:hover{opacity:.75}
.whead .handle,.close,.size{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:none;color:var(--mute)}
.close:hover,.size:hover{color:var(--ink)}
.overlay .icon{width:var(--icon-s);height:var(--icon-s);vertical-align:-2px}
.quote{font-size:var(--fs-lg);line-height:1.45;font-style:italic}
.quote .mute{font-style:normal;font-size:var(--fs-md);white-space:nowrap} /* author right after the quote */
.artfacts{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:12px 0 8px;font-size:var(--fs-md)}
.artfacts dt{color:var(--mute)}
.artfacts dd{margin:0}
.artabout{font-size:var(--fs-md);line-height:1.5;margin:0 0 8px;max-width:640px}
.mail .when{float:right;font-size:var(--fs-sm);margin-left:8px}
.wbody{flex:1;display:flex;flex-direction:column}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photos.n1{display:flex;flex:1;margin:0 -18px -16px;gap:0}
.photos.n1 a{flex:1;display:flex}
.photos.n1 img{flex:1;width:100%;aspect-ratio:3/2;border-radius:0}
.photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);display:block}

/* Weather */
.wnow{display:flex;align-items:center;gap:14px}
.wico{font-size:2.6rem;line-height:1}
.wtemp{font-family:var(--font-title);font-size:var(--fs-huge);font-weight:600;line-height:1.1}
.wtemp small{font-size:var(--fs-md);color:var(--mute);margin-left:2px}
.wplace-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 3px;font-size:var(--fs-sm)}
.wplace-head.mt{margin-top:8px}
.wdays{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px;text-align:center;font-size:var(--fs-sm)}
.wdays.multi{margin-top:0}
.wdays>div{display:flex;flex-direction:column;gap:2px;padding:6px 2px;border-radius:var(--radius);background:var(--tint)}
.wdico{font-size:var(--fs-xl)}
.ctime{font-family:var(--font-title);font-size:var(--fs-title);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
/* ✎ Edit in a widget: a small form at the bottom */
.wedit{margin-top:auto;padding-top:10px}
.wedit .row{margin:8px 0 0}
.wedit .check{display:inline-flex;align-items:center;gap:8px;margin:6px 0 8px;font-size:var(--fs-sm);cursor:pointer;width:fit-content}
.wedit .check input{flex:none;width:auto;margin:0}
.photos.n1~.wedit{padding-top:28px} /* the photo reaches the box's edge, so its form starts below it */
.wedit>label:not(.check){display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--fs-sm)}
.wedit>label:not(.check) :is(select,input){flex:1;min-width:0}
/* News */
.news p{margin:0 0 9px;line-height:1.35}
.news a{color:var(--ink);text-decoration:none}
.news a:hover{color:var(--acc);text-decoration:underline}

/* plain style (click the widget title): no box and no controls; the title stays */
.widget.plain{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible} /* same padding as the box: content keeps its place */
/* a widget's tools (drag, width, close, ✎, Aa) appear after hovering it for a second, in the plain style too; hidden ones can't be clicked */
.whead :is(.handle,.size,.close,.dbtn){opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.widget:is(:hover,:focus-within) .whead :is(.handle,.size,.close,.dbtn){opacity:1;visibility:visible;transition:opacity .2s 1s,visibility 0s 1s}
.wpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:260px;overflow:auto;padding:3px}
.wpick label{position:relative;cursor:pointer}
.wpick input{position:absolute;opacity:0}
.wpick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);display:block}
.wpick input:checked+img{outline:3px solid var(--acc);outline-offset:1px} /* Gallery widget: pick a photo */
.widget.plain .photos.n1{margin:0}
.widget.plain .photos img{border-radius:var(--radius)}
.photos img{transition:filter .3s}
.photos.bw img{filter:grayscale(1)}
.photos.bw a:hover img{filter:none} /* black and white: color on hover */


/* bare widget (Moments): no box, no title; its tools show on hover (touch: always) */
.widget.bare{position:relative;padding:8px;background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.widget.bare:hover{background:none;border-color:transparent}
.widget.bare .whead{position:absolute;top:0;right:0;z-index:3;height:auto;margin:0;padding:3px 5px;gap:2px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);opacity:0;transition:opacity .15s}
.widget.bare:is(:hover,:focus-within) .whead{opacity:1;transition:opacity .2s 1s}
.widget.bare .wtitle{display:none}
.widget.bare .dbtn{margin:0}
.wpola{display:flex;flex-direction:column;align-items:center;padding:6px 4px}
.wpola .polaroid{width:min(100%,320px)}
.wpola .empty{margin-top:8px}
/* Links / Shorts: square tiles (--tile = smallest width) */
.dview{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--tile),100%),1fr));gap:8px}
.w3 .dview:not(.fav){grid-template-columns:repeat(4,1fr)} /* Shorts, widest: 4 a row */
/* Shorts, narrower: one row of 1 (w1) or 3 (w2), ‹ › and swiping go through the rest (app.js 9b) */
.tscroll{position:relative}
:is(.w1,.w2) .tscroll .dview{--k:1;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--k) - 1) * 8px) / var(--k));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.w2 .tscroll .dview{--k:3}
:is(.w1,.w2) .tscroll .dview::-webkit-scrollbar{display:none}
.tscroll .dtile{scroll-snap-align:start}
.w3 .tnav,.tscroll.fits .tnav{display:none}
.dview p{grid-column:1/-1}
.dtile{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;overflow:hidden;border-radius:var(--radius);background:var(--tint);color:var(--ink);font-size:var(--fs-sm);transition:background .12s,transform .12s}
a.dtile:hover{background:var(--tint-2);transform:translateY(-1px)}
.dicon{position:relative;width:46px;height:46px;border-radius:var(--radius);display:grid;place-items:center;font-weight:700;font-size:var(--fs-lg);color:var(--acc);background:var(--tint-2);overflow:hidden}
.dicon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9px;background:var(--card-solid)}
/* every tile is a square; a preview image fills it; the name shows on hover */
.thumb .dicon{position:absolute;inset:0;width:auto;height:auto;border-radius:0}
.thumb .dicon img{object-fit:cover;padding:0}
.thumb .dicon video{display:block;width:100%;height:100%;object-fit:cover}
.dname{position:absolute;inset:auto 0 0;padding:3px 6px;background:rgba(0,0,0,.55);color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s}
.dtile:hover .dname{opacity:1}
.fav{grid-template-columns:repeat(auto-fill,64px);gap:2px}
.fav.bare{grid-template-columns:repeat(auto-fill,44px)}
.fav .dtile{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;background:none} /* compact, like a start menu */
.fav a.dtile:hover{background:var(--tint)}
.fav .dicon{width:36px;height:36px}
.fav .dicon img{padding:6px}
.fav .dname{position:static;max-width:100%;padding:0;background:none;color:var(--ink);font-size:var(--fs-xs);opacity:1} /* Links: site icon, name below */
.daily .dview a.dtile{cursor:pointer}
.daily .dview:not(.fav) .dtile{-webkit-user-drag:none;user-select:none} /* tiles are dragged by app.js, not by the browser */
/* tile editing (app.js section 9): + tile like an empty photo, ✎ on a tile on hover, the pop-up */
.tadd{border:2px dashed var(--line);background:none;color:var(--mute);cursor:pointer;padding:0}
.tadd .dicon{background:none;color:inherit;display:grid;place-items:center}
.tadd .icon{width:22px;height:22px}
.fav .tadd .icon{width:18px;height:18px} /* drawn, so exactly in the middle */
.tadd:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line));color:var(--acc)}
.fav .tadd{border:0;padding:4px 2px;background:none}
.fav .tadd .dicon{border:1.5px dashed var(--line);border-radius:var(--radius)}
.fav .tadd:hover .dicon{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))} /* Links: the + is a tile like the others, dashed where the icon would be */
.ttool{position:absolute;top:3px;right:3px;z-index:2;display:grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;background:var(--card-solid);color:var(--mute);box-shadow:var(--shadow);font-size:12px;line-height:1;opacity:0;transition:opacity .15s;cursor:pointer}
.dtile:hover .ttool,.ttool:focus{opacity:1}
.ttool:hover{color:var(--ink)}
.fav .ttool{top:0;right:4px;width:18px;height:18px;font-size:10px}
.tpop{position:fixed;z-index:60;width:min(320px,calc(100vw - 16px));margin:0;display:flex;flex-direction:column;gap:8px;background:var(--pop-bg);box-shadow:var(--shadow-pop)}
.tpop .row{margin:0;flex-wrap:nowrap}
.tpop .row>button:first-child{margin-right:auto}
:is(.tpop,.tedit .panel) .row{align-items:center}
:is(.tpop,.tedit .panel) .row>button{height:34px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center} /* pop-up buttons in a row: one height, one line */
[data-hide] .i-eye-off,[data-hide].off .i-eye{display:none}
[data-hide].off .i-eye-off{display:block} /* eye = shown, crossed = hidden */
.tnames{font-size:var(--fs-sm);font-weight:600;color:var(--mute)}
.tnames.on{color:var(--acc)} /* Links: names on or off */

/* celebration: fullscreen with falling confetti */
.celebrate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--bg) 75%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadein .4s}
.celebrate-box{text-align:center;padding:20px;animation:pop .7s cubic-bezier(.2,1.5,.4,1)}
.celebrate .hand{margin:0;font-size:clamp(48px,9vw,110px)}
.celebrate h2{margin:8px 0 0;font-family:var(--font);font-weight:500;font-size:clamp(24px,4vw,44px)}
.celebrate i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(calc(100vh + 40px)) rotate(720deg)}}
@keyframes pop{from{transform:scale(.5);opacity:0}}
@keyframes fadein{from{opacity:0}}

/* 8. Modules */
/* Diary > Events: post-its (color --pc), slightly tilted, straight on hover */
.fridge{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:24px;margin-top:20px}
.postit{position:relative;display:flex;flex-direction:column;min-height:170px;padding:18px 16px 8px;background:color-mix(in srgb,var(--pc) 32%,#fffdf3);color:#2b2b2b;box-shadow:0 12px 18px -10px rgba(0,0,0,.4);rotate:-1.5deg;transition:rotate .15s,scale .15s}
.postit:nth-child(2n){rotate:1.2deg}
.postit:nth-child(3n){rotate:-.4deg}
.postit:hover,.postit:focus-within{rotate:0deg;scale:1.03;z-index:2}
.postit::before{content:"";position:absolute;top:-7px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:var(--pc);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.postit p{margin:0}
.postit .date{color:#6b6b6b}
.postit p+p{flex:1;margin:6px 0;font-family:var(--font-hand);font-size:var(--fs-xl);line-height:1.15;white-space:pre-line;overflow-wrap:anywhere}
.postit>.row{margin:0;justify-content:flex-end;gap:0;opacity:0;transition:opacity .15s}
.postit:hover>.row,.postit:focus-within>.row{opacity:1}
.postit .panel{color:var(--ink)}

.listday{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin:10px 10px 2px}
.split{display:flex;gap:28px}
.list{width:210px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-md)}
.list a{padding:6px 10px;border-radius:var(--radius);color:inherit;text-decoration:none}
.list a.on,.list a:hover{background:var(--tint-2)}
.editor{flex:1;display:flex;flex-direction:column;gap:10px}
.editor .rich{min-height:55vh} /* Diary: as tall as a text area */
.big{font-size:var(--fs-title);border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.richtext{max-width:70ch;line-height:1.55;overflow-wrap:anywhere} /* saved rich text, rich_show() */

/* Diary modern styling */
.diary-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.diary-topbar .pills{margin:0}
.diary-new-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;padding:7px 16px;border-radius:var(--radius);text-decoration:none}
.diary-new-btn .icon{width:16px;height:16px}
.diary-list{width:230px}
.diary-list a{display:flex;align-items:center;gap:8px;padding:7px 10px}
.diary-in-cal-icon{display:inline-flex;align-items:center;color:var(--mute);flex:none}
.diary-in-cal-icon .icon{width:14px;height:14px}
.diary-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diary-card,.diary-editor-card{margin:0;padding:16px 20px}
.diary-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.diary-card-head h3{margin:0}
.diary-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.diary-date-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--mute);padding:3px 8px;background:var(--tint);border-radius:var(--radius)}
.diary-date-badge .icon{width:14px;height:14px}
.diary-cal-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;color:var(--acc);background:var(--tint-2);padding:3px 8px;border-radius:var(--radius);text-decoration:none}
.diary-cal-chip:hover{text-decoration:underline}
.diary-entry-title{margin:0 0 12px;font-family:var(--font-title);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;line-height:1.25}
.diary-body-content{max-width:72ch;font-size:var(--fs-lg);line-height:1.65}
.diary-edit-row{display:flex;align-items:center;gap:10px;width:100%;flex-wrap:nowrap}
.diary-edit-row .w-date{flex:none}
.diary-title-input{flex:1;min-width:0;font-family:var(--font-title);font-size:1.35rem;font-weight:600}
.diary-btn-row{display:flex;align-items:center;gap:10px;margin-top:8px}
@media(max-width:760px){
    .diary-split{flex-direction:column;gap:14px}
    .diary-list{width:100%;max-height:180px;overflow-y:auto}
    .diary-edit-row{flex-wrap:wrap}
    .diary-edit-row .w-date{width:100%}
}
.todo{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid color-mix(in srgb,var(--tc,transparent) var(--p,100%),transparent);border-radius:var(--radius);padding:7px 10px;margin:0 0 6px}
.todo>form,.wtodo>form{display:flex;align-items:center}
.todo .txt{flex:1;min-width:0}
.todo.done .ttl{text-decoration:line-through;color:var(--mute)}
.todo.done{opacity:.6}
/* Todos: explanation under the title (3 lines, click for all), edit, add form */
.tsub{font-size:var(--fs-sm);color:var(--mute);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;margin-top:1px}
.tsub.open{display:block}
.tedit{position:relative}
.tedit summary:not(.btn){color:var(--mute);padding:2px 6px;border-radius:var(--radius)}
.tedit summary:not(.btn):hover{color:var(--ink)}
/* item tools: ✎, eye and ✕ share one size and spacing */
.tbtn,form.hd>button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;padding:0!important;line-height:1;font-size:var(--fs-md);border-radius:var(--radius);color:var(--mute);background:none;border:none}
.tbtn .icon,form.hd>button .icon{width:15px;height:15px}
.tbtn.on,form.hd>button.on{color:var(--acc)}
.tbtn:hover,form.hd>button:hover{background:var(--tint-2);color:var(--ink)}
form.hd{display:inline-flex;align-items:center;gap:2px}
:is(.entry,.tools,.dtools,.listhead,.row)>form.hd{display:contents}
.tools{display:flex;align-items:center;gap:2px}
:is(.fin-acc,.fin-stock,.fin-month .entry,.tx tbody tr,.glasses-card,.contacts-row,.prof-field-item) .tools{opacity:0;transition:opacity .15s}
:is(.fin-acc,.fin-stock,.fin-month .entry,.tx tbody tr,.glasses-card,.contacts-row,.prof-field-item):is(:hover,:focus-within,:has(details[open])) .tools{opacity:1}
@media(hover:none){:is(.fin-acc,.fin-stock,.fin-month .entry,.tx tbody tr,.glasses-card,.contacts-row,.prof-field-item) .tools{opacity:1}}
.remind summary.on .icon{fill:currentColor} /* reminder set: a filled bell */
/* pop-ups (✎ edit, share): open below their button */
:is(.tedit,.sharebox) .panel{position:absolute;z-index:30;top:calc(100% + 4px);right:0;width:min(420px,80vw);background:var(--pop-bg);box-shadow:var(--shadow-pop)}
:is(.tedit,.sharebox) .panel.up{top:auto;bottom:calc(100% + 4px)} /* app.js 12: no room below */
.tedit textarea{min-height:0}
.addtodo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:16px}
.addtodo>[name=text]{flex:1 1 0;min-width:0}
.addtodo textarea{flex-basis:100%;min-height:0;font-size:var(--fs-md);resize:vertical}
.nedit{display:flex;flex-direction:column;gap:6px}
.editing>:not(.nedit){display:none!important}
.nedit textarea{min-height:0;resize:vertical} /* edit in place */
.due{margin-left:8px;font-size:var(--fs-xs);color:var(--mute)}
.late .ttl,.late .due{color:var(--red);font-weight:700} /* due date; open past it = .late */
/* Todos and List widgets */
.wtodo{display:flex;gap:8px;align-items:flex-start;padding:0 0 0 10px;margin:5px 0 3px} /* starts like the first line of other widgets */
.wtodo .txt{min-width:0}
.wtodo .chk{flex:none;width:18px;height:18px;font-size:var(--fs-xs);margin-top:2px}
.wadd{align-items:center}
.row.wadd{margin:4px 0 0}
:is(.wadd,.addtodo) .chk{opacity:.4;margin:0;flex:none}
.wadd input,.wtodo .txt input{flex:1;min-width:0;width:100%}
.wadd button{padding:2px 10px;font-size:var(--fs-sm)}
.wadd .pmenu{left:auto;right:-6px}
.ttl{cursor:text}
.wadd input,.wtodo .txt input,.nedit :is(input,textarea){padding:3px 8px} /* compact fields */
.mark .chk{border-color:var(--tc,var(--acc));color:var(--tc,var(--acc))} /* circles in the todo's color */
.wtodo .tsub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;font-size:var(--fs-sm)}
.wtodo.done .txt{text-decoration:line-through;color:var(--mute)}
.chk{width:22px;height:22px;padding:0;background:none;border:1.5px solid var(--acc);color:var(--acc);border-radius:50%}

/* Lists */
.entry{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin-bottom:8px}
/* Ideas */
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:12px;margin-bottom:12px}
.col{background:var(--side);border-radius:var(--radius);padding:12px;min-width:250px;width:250px;display:flex;flex-direction:column;gap:8px}
.col h3{display:flex;justify-content:space-between;align-items:center}
.col input{font-size:var(--fs-md)}
.col .row{margin:4px 0 0;flex-wrap:nowrap}
.col .row input{min-width:0}
.col h3 .nedit{flex:1}
.col.new{background:none;border:1px dashed var(--line)}
.cards{display:flex;flex-direction:column;gap:6px;min-height:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;cursor:grab;display:flex;justify-content:space-between;gap:6px}
.card button{padding:0 4px}
/* Map */
.mapwrap{display:flex;flex-direction:column;gap:12px}
.map-topbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.map-search{position:relative;display:flex;gap:8px;flex:1 1 320px;max-width:520px;margin:0}
.map-search input{flex:1;min-width:0}
.map-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.map-toolbar{position:absolute;top:10px;left:10px;z-index:10;display:inline-flex;align-items:center;gap:3px;margin:0;padding:3px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.map-toolbar button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:calc(var(--radius) - 2px);background:none;color:var(--mute);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.map-toolbar button:hover{background:var(--tint);color:var(--ink)}
.map-toolbar button.on{background:var(--tint-2);border-color:transparent;color:var(--ink)}
[data-theme-style="colorful"] .map-toolbar button.on{background:var(--acc);color:var(--acc-ink)}
.map-toolbar button .icon{width:16px;height:16px}
.map-text-label{background:rgba(255,255,255,0.92);color:#111;padding:2px 7px;border-radius:4px;font-weight:600;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,0.22);border:1px solid rgba(0,0,0,0.1);white-space:nowrap;user-select:none;pointer-events:none}
[data-mode="dark"] .map-text-label{background:rgba(30,30,32,0.92);color:#eee;border-color:rgba(255,255,255,0.15);box-shadow:0 1px 4px rgba(0,0,0,0.5)}
.map-floating-text{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:20;box-shadow:var(--shadow-pop);background:var(--pop-bg);padding:6px 10px;border-radius:var(--radius);border:1px solid var(--line);display:flex;align-items:center;gap:6px;width:min(340px,90%)}
.map-floating-text input{flex:1;min-width:0;height:32px;padding:0 8px;font-size:var(--fs-sm)}
.map-floating-text button{flex:none;height:32px}
.map-box{position:relative;display:flex;flex-direction:column}
#map{width:100%;height:var(--map-h,500px);min-height:280px;border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--line);border-bottom:0}
.map-resize{height:12px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);cursor:ns-resize;user-select:none;touch-action:none}
.map-resize i{width:42px;height:4px;border-radius:999px;background:var(--line);transition:background-color .15s}
.map-resize:hover i{background:var(--acc)}
.map-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.map-meta .legend,.map-meta .hint,.map-meta .pills{margin:0} .map-meta-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .map-modal-top{display:flex;align-items:center;gap:8px} .map-modal-top input{flex:1;min-width:0}
.panel.map-places-box{position:relative;max-width:none;padding:14px 18px 18px;margin-top:6px;min-height:76px}
.panel.map-places-box.collapsed{padding:14px 18px;min-height:0}
.map-places-box.collapsed .map-places-pills{display:none}
.map-status-pills{margin:0;display:inline-flex;align-items:center;gap:6px}
.map-status-pills button{height:28px;padding:0 10px;font-size:var(--fs-xs);cursor:pointer}
.map-places-pills{margin:0;display:inline-flex;align-items:center;gap:6px}
.map-places-pills button{height:28px;padding:0 10px;font-size:var(--fs-xs);cursor:pointer}
.map-places-content{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;max-height:45vh;overflow-y:auto;padding:4px 0}
.map-country-group{display:contents}
.map-places{display:contents}
.map-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius);border:none;background:color-mix(in srgb,var(--pc,var(--acc)) 14%,var(--card-solid));color:var(--ink);font-size:var(--fs-xs);line-height:1.2;cursor:pointer;transition:background-color .15s,border-color .15s,transform .1s,box-shadow .15s}
.map-chip:hover{background:color-mix(in srgb,var(--pc,var(--acc)) 22%,var(--card-solid));transform:translateY(-1px)}
.map-chip:hover .map-chip-name{text-decoration:underline}
.map-chip.want{opacity:.85;background:color-mix(in srgb,var(--pc,var(--acc)) 9%,var(--card-solid))}
.map-chip.is-country{font-weight:600;font-size:var(--fs-sm);padding:5px 11px;gap:6px;border:1.5px solid var(--pc,var(--line));background:color-mix(in srgb,var(--pc,var(--card)) 10%,var(--card))}
.map-chip.is-country:hover{background:color-mix(in srgb,var(--pc,var(--acc)) 18%,var(--card))}
.map-chip.is-country.want{border-style:dashed;opacity:1}
.map-chip.map-chip-hover{box-shadow:0 0 0 2px var(--acc);transform:translateY(-1px)}
#pinTypeSwitchRow{margin:0 0 6px}
#pinTypeSwitch button{font-size:var(--fs-sm);padding:4px 10px}
.map-chip-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pc,var(--ink));cursor:pointer;flex:none}
.map-chip-icon .icon{width:13px;height:13px;stroke:currentColor}
.map-chip.is-country .map-chip-icon .icon{width:15px;height:15px}
.map-chip-icon:hover{transform:scale(1.25)}
.map-chip-name{color:inherit;text-decoration:none;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.map-chip-name:hover{text-decoration:underline}
.map-chip-date{color:var(--mute);font-size:var(--fs-xs);margin-left:2px}
#addForm,#tripForm{display:flex;flex-direction:column;gap:10px} #addForm>:is(.row,.map-icon-grid),#tripForm>.row,#addForm .pills,#addForm .hint{margin:0} #addForm textarea{min-height:76px} .map-icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0} .map-date-row{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:nowrap!important} .map-date-row>input[type=date]{flex:1 1 0;min-width:0;width:100%} .map-foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap} .map-foot-row select{width:auto;max-width:210px;flex:none;margin-left:auto}
.map-icon-opt{cursor:pointer;margin:0}
.map-icon-opt input{display:none}
.map-icon-opt span{display:flex;align-items:center;justify-content:center;height:36px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--mute);transition:background-color .15s,border-color .15s,color .15s}
.map-icon-opt:hover span{background:var(--tint);color:var(--ink)}
.map-icon-opt input:checked+span{background:var(--tint-2);border-color:var(--acc);color:var(--acc)}
.map-icon-opt .icon{width:18px;height:18px}
.trip-place-wrap{position:relative;width:100%}
.trip-place-wrap .suggest{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:50}
.map-tabs{margin-bottom:4px}
.map-tabs .folder:not(.on){opacity:.7;background:var(--card);border:1px solid var(--line)!important}
.map-tabs .folder:not(.on) :is(.icon,.ficon){opacity:.45;filter:grayscale(100%);color:var(--mute)}
.map-tabs .folder:not(.on):hover{opacity:1;background:var(--tint);border:1px solid var(--line)!important}
.map-tabs .folder:not(.on):hover :is(.icon,.ficon){opacity:.9;filter:none;color:var(--ink)}
.map-tabs .folder.on{opacity:1;background:color-mix(in srgb,var(--fc,var(--acc)) 12%,var(--card));border-color:var(--fc,var(--acc));border-left:4px solid var(--fc,var(--acc))!important;box-shadow:none;font-weight:600}
.map-tabs button.folder.new{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--mute);font-weight:400;cursor:pointer}
.map-tabs button.folder.new:hover{color:var(--ink);border-color:var(--acc)}
.map-trip-bar{max-width:none;padding:14px 16px;gap:14px}
.map-trip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.map-trip-info h3{margin:0;display:flex;align-items:center;gap:8px}
.map-trip-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;font-size:var(--fs-sm)}
.map-trip-meta .icon{width:13px;height:13px;vertical-align:-2px}
.map-trip-meta a{color:inherit;text-decoration:none}
.map-trip-meta a:hover{color:var(--acc)}
.map-trip-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.map-trip-actions .soft.small{padding:4px 10px;font-size:var(--fs-sm)}
.map-trip-actions .soft.small .icon{width:14px;height:14px}
.map-trip-sec{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.map-trip-sec h4.sub{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.map-day-pills{flex-wrap:wrap;gap:4px}
.map-itin-list,.map-todo-list{display:flex;flex-direction:column;gap:6px}
.map-day-form{display:flex;flex-direction:column;gap:8px}
.map-day-form .short{width:76px;flex:none}
.map-day-form input[type=date]{width:145px;flex:none}
.map-day-form :is(input[type=time],select){width:115px;flex:none}
.map-todo-add{margin:0}
.side{display:flex;flex-direction:column;gap:8px}
.side form{display:flex;flex-direction:column;gap:6px}
.side form.row{flex-direction:row}
.side textarea{min-height:64px}
.side .list{width:auto;max-height:30vh;overflow:auto}
.side .list div{display:flex;justify-content:space-between;align-items:center;gap:4px}
.side .list form{flex-direction:row}
/* map legend */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-md);margin:10px 0}
.legend label{display:flex;align-items:center;gap:6px;cursor:pointer}
.legend input{width:auto}
.dotc{width:10px;height:10px;border-radius:50%;display:inline-block;vertical-align:-1px;flex-shrink:0}
details.cats summary{color:var(--mute);font-size:var(--fs-md);margin-bottom:8px}
.ficon{display:inline-flex;align-items:center;justify-content:center;color:var(--mute);flex-shrink:0}
.ficon .icon{width:14px;height:14px}
:is(.catrow,.palrow){position:relative}
.catrow{display:flex;gap:8px;align-items:center} .cal-sub-form{display:flex;flex-direction:column;gap:8px}
details .catrow{margin-top:8px}
.catrow input[type=color]{width:42px;height:36px;padding:2px;flex:none}
.catrow input:not([type=color]){flex:1;min-width:90px}
.catrow select{width:125px;max-width:35%;flex:none;padding:5px 7px;font-size:var(--fs-sm)}
.catrow button{align-self:center;flex:none}
:is(.catrow,.palrow) .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-size:var(--fs-md);line-height:1;border-radius:var(--radius)}
.catrow .uses{font-size:var(--fs-sm);white-space:nowrap}
:is(.catrow,.palrow) .saved{position:absolute;right:42px;top:50%;transform:translateY(-50%);margin:0;padding:2px 8px;border-radius:var(--radius);background:var(--card-solid);color:var(--green);font-size:var(--fs-xs);font-weight:600;box-shadow:var(--shadow-pop);pointer-events:none;white-space:nowrap;z-index:10;animation:savedpill 2.2s forwards}
@keyframes savedpill{0%{opacity:0;transform:translateY(-50%) scale(.85)}15%,70%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(.9)}}
.side .list div a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .list select{max-width:108px;padding:4px 6px;font-size:var(--fs-sm)}
/* Inspiration */
blockquote{font-size:var(--fs-title);line-height:1.4;margin:0 0 28px;max-width:640px;font-style:italic}
blockquote footer{font-style:normal;font-size:var(--fs-md);color:var(--mute);margin-top:8px}
figure{margin:0 0 20px;max-width:640px}
figure img{width:100%;border-radius:var(--radius);display:block}
figcaption{margin-top:8px}
.art{position:relative}
.savebtn{position:absolute;top:10px;right:10px}
.savebtn button{background:rgba(0,0,0,.6);color:#fff;border-radius:var(--radius);padding:6px 14px}
.savebtn:not(.on) button:hover{background:rgba(0,0,0,.8)}
.savebtn.on button{background:var(--acc);color:var(--acc-ink)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.gallery figure{max-width:none;margin:0}
.gallery figcaption{font-size:var(--fs-sm);line-height:1.35}
/* Gallery; tags share one look everywhere (.tag) */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal figure{margin:0;max-width:none}
.gal img{display:block;width:100%;height:auto;background:var(--tint)} /* its size is known (photo_size()): a calm placeholder until it loads */ /* natural shape (masonry) */
.gal figcaption{font-size:var(--fs-md);margin-top:6px}
/* tag chips to tick */
.tagpick{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.overlay .tagpick{flex:1 1 100%}
.tagchk{cursor:pointer;margin:0}
.tagchk input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tagchk span{display:inline-block;padding:2px 11px;border-radius:var(--radius);font-size:var(--fs-sm);border:1px solid var(--line);background:var(--card);color:var(--ink)}
.tagchk input:checked+span{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.tagchk input:focus-visible+span{outline:2px solid var(--acc)}
.overlay .tagchk span{background:rgba(255,255,255,.88);color:#222;border-color:transparent}
.overlay .tagchk input:checked+span{background:var(--acc);color:var(--acc-ink)}
.pic{position:relative}
.nameform input{border:0;background:none;padding:4px 6px;margin:0 -6px;font-weight:600;width:calc(100% + 12px)}
.nameform input:hover{background:var(--tint)}
.nameform input:focus{background:var(--card-solid)}
.overlay{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;align-items:center;margin:0;padding:26px 8px 8px;border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transition:opacity .15s;flex-wrap:wrap;max-height:85%;overflow:auto}
.pic:hover .overlay,.pic:focus-within .overlay{opacity:1}
.overlay button{padding:5px 10px}
.overlay button.ghost{color:#fff}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;cursor:zoom-out}
.lightbox img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:var(--radius)}
.lightbox p{color:#fff;margin:0}
.tag{display:inline-block;background:var(--tint-2);color:var(--ink);border-radius:var(--radius);padding:1px 10px;font-size:var(--fs-sm);text-decoration:none;margin:2px 4px 2px 0}
.note-cat{background:var(--card);border:1px solid var(--line)}
.dpromote{display:flex;justify-content:flex-end;margin-top:12px}
.dpromote button{width:auto!important;height:auto!important;font-size:var(--fs-sm);padding:5px 14px!important}
/* tag line under a photo, document or note: hovering it opens the picker */
.tagline{position:relative;display:flex;flex-wrap:wrap;align-items:center;min-height:24px;outline:0;cursor:default}
.note .tagline{margin:8px 0 12px}
.addtags{font-size:var(--fs-sm);color:var(--mute);border:1px dashed var(--line);border-radius:var(--radius);padding:0 9px;opacity:0;transition:opacity .15s}
.gal figure:hover .addtags,.docrow:hover .addtags,.note:hover .addtags,.tagline:focus-within .addtags{opacity:1}
.tagpop{display:none;position:absolute;z-index:30;top:100%;left:-8px;width:max(260px,100%);padding:10px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.tagline:hover .tagpop,.tagline:focus-within .tagpop{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tagpop button{padding:5px 12px}
.tagpop .tagpick a{font-size:var(--fs-sm)}
.gal figure,.docrow{position:relative}
.gal figure:hover,.gal figure:focus-within,.docrow:hover,.docrow:focus-within{z-index:5}
/* colored background behind a photo: --tint = its album color */
.gal figure.tinted{padding:10px 10px 8px;border-radius:calc(var(--radius) + 4px);isolation:isolate}
.gal figure.tinted::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--tint);opacity:.22;z-index:-1}
[data-mode="dark"] .gal figure.tinted::before{opacity:.3}
/* palette: the color choices of every picker (palette_pick()); --px moves the open menu back inside the window (app.js 12) */
.enterkey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.palrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.palrow input[type=color]{width:44px;height:34px;padding:2px;flex:none}
.palrow input:not([type]){flex:1;min-width:140px;width:auto}
.palrow .check{margin:0}
.modrow{display:flex;align-items:center;gap:16px}
.modrow>.check:first-child{flex:1} /* Settings > Modules: on, then "Dot" and "Work" */
.check:has(:disabled){opacity:.5;cursor:default} /* a tick that can't change (Work for work-only add-ons) */
.trow{display:flex;align-items:center;gap:10px;padding:3px 0}
.trow .iconbtn.on{color:var(--red)}
.tday{margin:14px 0 2px}
.track .ctime{font-size:var(--fs-xl)} /* Time add-on: projects, days, the running recording */
.palette{position:relative;display:inline-flex;align-items:center;flex:none;outline:0;vertical-align:middle}
.palette label{cursor:pointer;display:block}
.palette input{position:absolute;opacity:0;width:0;height:0}
.pnow{display:block;width:24px;height:24px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px var(--card-solid)}
.palette:focus-visible .pnow{outline:2px solid var(--acc);outline-offset:2px}
.pmenu{display:none;position:absolute;z-index:40;left:-6px;top:50%;transform:translate(var(--px,0px),-50%);gap:5px;padding:5px 7px;background:var(--pop-bg);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-pop)}
.palette:hover .pmenu,.palette:focus-within .pmenu{display:inline-flex}
.pmenu label span{display:block;width:20px;height:20px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px var(--card-solid)}
.pmenu label .nocolor,.pnow.nocolor{background:none;border:2px dashed var(--mute);box-shadow:none}
.palette input:checked+.nocolor{border:2px solid var(--ink)}
.palette input:checked+span{border-color:var(--ink)}
.palette input:focus-visible+span{outline:2px solid var(--acc)}

/* Gallery: share, tag filter, album menu under a photo */
.sharebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 0 auto;font-size:var(--fs-md)}
.sharebar .shared{display:inline-flex;align-items:center;gap:5px;color:var(--mute)}
.sharebar input{width:260px;font-size:var(--fs-sm);padding:5px 9px}
.sharebar button,.sharebar .btn{padding:5px 11px}
.sharebtn{display:inline-flex;align-items:center;gap:6px}
.sharebar .icon{width:var(--icon);height:var(--icon)}

.capline{display:flex;align-items:center;gap:8px}
.capline .nameform{flex:1;min-width:0}
.capline .nameform input{text-overflow:ellipsis} /* name + album in one line */
.catform select,.catsel{font-size:var(--fs-sm);padding:2px 8px 2px 6px;border-left:4px solid var(--cc,transparent);background:var(--card);max-width:150px}
/* Files */
.docrow{flex-wrap:nowrap;align-items:center;gap:8px}
.docrow .grow{min-width:0}
.docrow .btn{padding:6px 12px;font-size:var(--fs-sm)}
.docrow>form{white-space:nowrap} /* file type, name, Open, folder, share, eye, ✕: all centered on the row */
.ext{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius);background:var(--tint-2);color:var(--acc);font-weight:700;font-size:var(--fs-xs);text-decoration:none;letter-spacing:.02em}
.docmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:var(--fs-sm)}
/* list and folder headers */
.listhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ✎ next to a list or folder name: the fields in one row beside the icon */
.listedit{margin-bottom:18px;display:flex;align-items:center;gap:8px}
.listedit summary{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--mute);border-radius:var(--radius)}
.listedit summary:hover,.listedit[open] summary{color:var(--ink);background:var(--tint)}
.listedit .row{margin:0;flex-wrap:nowrap;align-items:center}
.listedit .row input:not([type=radio]){width:220px;min-width:0;flex:0 1 auto}
.listedit .row button{white-space:nowrap}

/* breadcrumb, folder tiles, move menu */
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--acc)}
.crumbs .mute{font-weight:400}
.folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:16px}
.folder{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);min-width:0}
.fcount{margin-left:auto;color:var(--mute);font-size:var(--fs-sm)} /* open entries */
.folder span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder .icon{color:var(--fc,var(--acc));flex:none}
.folder[style]{border-left:4px solid var(--fc)}
.folder:hover{background:color-mix(in srgb,var(--fc,var(--acc)) 6%,var(--card));border-color:color-mix(in srgb,var(--fc,var(--acc)) 30%,var(--line))}
.folder[style]:hover{border-left-color:var(--fc)}
.folder.on{background:color-mix(in srgb,var(--fc,var(--acc)) 12%,var(--card));border-color:var(--fc,var(--acc))} /* .on = chosen */
.folder.up{color:var(--mute)}
.folder.new{padding:0;border-style:dashed;background:none;margin:0}
.folder.new input{border:0;background:none;padding:10px 12px}
a.folder.new{padding:10px 12px;color:var(--mute)}
.folders .remind{align-self:center} /* + tile (Diary); reminder bell in a tile row */
.movesel{font-size:var(--fs-sm);padding:4px 6px;max-width:150px}
/* Sharing (share_ui()): Share button or link bar; marker on shared tiles */
.sharebox{position:relative;margin-bottom:14px}
.sharebox.small{margin:0}
.sharebox.small .panel{left:auto;right:0;width:min(360px,85vw)} /* opens leftward from the row's end */
.sharebox.small>summary{padding:0}
.sharebox.small>summary.on{color:var(--acc)} /* a file's share icon: accent color while shared */
.shareform{display:flex;flex-direction:column;gap:14px}
.sharebox.small .sharebar{margin:0}
.sharebox.small .sharebar input{width:100%}
.sharebox summary{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:var(--fs-md)}
.sharebox .panel{left:0;right:auto;width:300px}
.sharebox .icon{width:var(--icon);height:var(--icon)}
.listhead .sharebar{margin:0 0 18px}
.sharerow{display:flex;align-items:center;min-height:38px;margin:0 0 14px}
.sharerow :is(.sharebar,.sharebox){margin:0} /* share button or link bar below the upload, same height */
.remind{display:inline-flex;vertical-align:middle;font-weight:400}
.remind .icon{width:var(--icon);height:var(--icon)}
.remind .panel{width:min(260px,80vw);left:0;right:auto}
.folders .remind .panel{left:auto;right:0}
.listhead h3{margin:0}
.remind summary.on{color:var(--acc)}
.fshared{flex:none;color:var(--acc)}
.fshared .icon{width:var(--icon-s);height:var(--icon-s)}
/* Music */
.lfm-head{display:flex;align-items:center;gap:14px;margin:-6px 0 18px}
.lfm-head img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.lfm-head h3{font-size:var(--fs-lg);margin:0}
.lfm-head p{margin:2px 0 0}
.lfm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lfm{max-width:none;gap:6px}
.lfm h3{margin:0 0 4px}
.lfm-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:var(--fs-md);line-height:1.3}
.lfm-row .grow{min-width:0}
.cover{flex:none;width:40px;height:40px;border-radius:6px;background:var(--tint-2);display:grid;place-items:center;overflow:hidden;color:var(--mute)}
.cover img{width:100%;height:100%;object-fit:cover}
.nowplaying{color:var(--acc);font-weight:600}
.lfm-bar{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:6px;font-size:var(--fs-md);background:linear-gradient(90deg,var(--tint-2) var(--w),transparent var(--w))}
.lfm-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-bottom:10px}
.lfm-albums a{display:flex;flex-direction:column;gap:2px;color:var(--ink);min-width:0;line-height:1.3}
.lfm-albums .cover{width:100%;height:auto;aspect-ratio:1;font-size:var(--fs-huge);margin-bottom:4px}
.lfm-albums span.small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* public share page */
body.public main{margin:0 auto;width:100%}

/* Finances */
.up{color:var(--green)}
.down{color:var(--red)}
.spark{flex:none;overflow:visible}
.spark polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.spark.up polyline{stroke:var(--green)}
.spark.down polyline{stroke:var(--red)}
.fin-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 18px}
.fin-total strong{font-family:var(--font-title);font-size:var(--fs-huge);font-weight:600;margin-right:6px}
.fin-total .mute{width:100%}
.fin-part{font-size:var(--fs-md);color:var(--mute);display:inline-flex;align-items:center;gap:6px}
.fin-accounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));grid-auto-rows:1fr;gap:12px} /* every card as tall as the tallest */
.fin-acc{max-width:none;gap:4px;padding:14px 16px;background:color-mix(in srgb,var(--cc) 9%,var(--card));border-color:color-mix(in srgb,var(--cc) 25%,var(--line));border-left:4px solid var(--cc);display:flex;flex-direction:column}
.fin-acc .fin-info{margin-top:2px;line-height:1.45}
.fin-acc .fin-updated{margin-top:auto;text-align:right;padding-top:6px}
.fin-acc:hover{background:color-mix(in srgb,var(--cc) 15%,var(--card));border-color:color-mix(in srgb,var(--cc) 40%,var(--line));border-left-color:var(--cc)} /* tinted in the account's color */
.fin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fin-head h3{margin:0}
.fin-head-info{min-width:0}
.fin-head-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-cat-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--mute);line-height:1}
.fin-cat-badge .ficon{display:inline-flex;align-items:center;justify-content:center}
.fin-cat-badge .ficon .icon{width:13px;height:13px}
.fin-sub{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--fs-sm)}
.fin-desc em{font-style:italic}
:is(.fin-divs-box,.fin-new-box,.fin-addstock){position:relative;max-width:none;padding:14px 18px 18px}
.panel:is(.fin-divs-box,.fin-new-box,.fin-addstock).collapsed{padding:14px 18px}


.fin-divs-box.collapsed .fin-divs-actions{display:none}

.cbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;min-height:28px;user-select:none}
.cbox-head-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;cursor:pointer}
.cbox-head h3.sub{margin:0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;color:var(--mute);text-transform:uppercase;transition:color .15s}
.cbox-head-title:hover h3.sub{color:var(--ink)}
.cbox-head .fin-divs-sum{font-size:var(--fs-sm);color:var(--mute);font-weight:400}
.cbox-head-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.fin-divs-actions{display:flex;align-items:center;gap:8px}
.fin-divs-actions .pills{margin:0;display:flex;align-items:center}
.fin-divs-actions .pills button{height:28px;padding:0 10px;display:inline-flex;align-items:center;font-size:var(--fs-sm)}
.cbox-head .ctoggle{position:static;width:28px;height:28px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:none;color:var(--mute);border-radius:var(--radius);cursor:pointer}
.cbox-head .ctoggle .icon{width:20px;height:20px;stroke-width:2.2;transition:transform .2s ease}
.cbox-head:hover .ctoggle{color:var(--ink)}


.fin-bal{font-family:var(--font-title);font-size:var(--fs-xl);font-weight:600}
.fin-form .row{margin:0}
.fin-form input,:is(.fin-new,.fin-new-box) input{min-width:0}
.fin-new{max-width:none}
.fin-new h3.sub{margin:0 0 10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
:is(.fin-new,.fin-new-box,.fin-addstock,.glasses-form) .row{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:nowrap;width:100%}
:is(.fin-new,.fin-new-box,.fin-addstock,.glasses-form) .row>*{margin:0}
.fin-new .row>input[name=type],.fin-new .row>input[name=company]{flex:1;min-width:130px}
.fin-new .row>input.short{flex:none;width:120px}
.fin-new .row>select{flex:none}
.fin-new .row>button{flex:none}
:is(.fin-new,.fin-new-box,.fin-addstock,.glasses-form) .row>:is(input,select){height:38px;padding:0 11px;font-size:var(--fs-md)}
:is(.fin-new,.fin-new-box,.fin-addstock,.glasses-form) .row>button{flex:none;height:38px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;align-self:center}
@media(max-width:760px){:is(.fin-new,.fin-new-box,.fin-addstock,.glasses-form) .row{flex-wrap:wrap}}
.fin-new-body{display:flex;flex-direction:column;gap:10px}
.fin-bank{font-weight:400;font-size:var(--fs-sm)}
.fin-tools{display:flex;align-items:center}
.fin-acc:has(.tedit[open]){position:relative;z-index:31} /* the open edit box on top */
.fin-blur :is(.fin-dsum strong,.fin-dsum .hint,.ctime,.fin-total strong,.fin-part,.fin-bal,[data-proj-eur],[data-proj-own],.fin-info,.fin-own,.fin-stock .sl+.sl,.fin-examt,.fin-sum strong,.fin-sum .hint,.fin-chartbox,.fin-hrow span:not(.mute),.tax td.num){filter:blur(6px);user-select:none}
.fin-acc.excluded{opacity:.55}
.fin-acc.excluded .fin-bal{text-decoration:line-through;text-decoration-thickness:1px}
.fin-own{text-align:right;min-width:120px}
.inl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.inl input,.inl select{width:auto;white-space:nowrap}
.inl .short{width:7.5em} /* a short field stays short in an inline label */
.fin-info{line-height:1.5}
.projected{color:var(--acc);transition:color .2s}
.fin-proj{max-width:none;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.fin-proj label{font-weight:600;min-width:110px}
.fin-proj input[type=range]{width:100%;accent-color:var(--acc)}
.fin-proj :is(.mute,.err,.hint){grid-column:1/-1} /* notes span the whole box */
/* stocks: cards tinted in the stock's color (--sc), the account's color as left edge (--ac) */
.fin-addstock{gap:0}



.fin-addstock .cbox-body{display:flex;flex-direction:column;gap:8px}
.fin-addstock p{margin:0}


.fin-addstock .row>input[name=name]{flex:2;min-width:140px}
.fin-addstock .row>input:not([name=name],[type=date]){flex:1;min-width:55px}
.fin-addstock .row>input[type=date]{flex:none;width:130px}
.fin-addstock .row>select{flex:none}



.fin-results{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto}
.fin-res{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius);margin:0}
.fin-res:hover{background:var(--tint)}
.fin-res button{padding:4px 12px}
.fin-stocks{display:flex;flex-direction:column;gap:8px}
:is(.fin-divs,.fin-divs-box,.fin-new-box,.fin-sum,.fin-proj,.fin-accounts,.fin-stocks,.fin-addstock){margin:0 0 var(--gap)} .fin-stock-topbar .btnrow{margin:0} .fin-cur-switch,.fin-stock-filters>.pills:last-child{margin-left:auto}
.fin-accounts>.panel{margin:0} /* the same space below each block */
/* Stocks: compact list */
.fin-compact{margin-left:auto}
.fin-compact .icon{width:var(--icon-l);height:var(--icon-l)}
.fin-compact .icon:last-child,.fin-compact.on .icon:first-child{display:none}
.fin-compact.on .icon:last-child{display:inline}
#finDivs.together>[data-stock],#finDivs:not(.together)>.fin-dstocks{display:none} /* Dividends: each stock, or all of them in one box */
.fin-stocks.compact{gap:4px}
.fin-stocks.compact .fin-stock{padding:6px 12px;gap:10px}
.fin-stocks.compact .sl{display:inline;margin-right:12px}
.fin-stocks.compact .sdet,.fin-stocks.compact .spark,.fin-stocks.compact .fin-stock>form,.fin-stocks.compact [data-proj-eur],.fin-stocks.compact .fin-own br{display:none}
.fin-stocks.compact .fin-own{min-width:0;display:flex;gap:10px;align-items:baseline}
.fin-stock{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.fin-stock .grow{min-width:0}
.fin-stock>form{white-space:nowrap}
.fin-stock.colored{background:color-mix(in srgb,var(--sc) 16%,var(--card-solid));border-color:color-mix(in srgb,var(--sc) 40%,transparent)}
.fin-stock.highlighted{background:#fff;border-color:color-mix(in srgb,var(--acc) 50%,var(--line));box-shadow:0 2px 10px rgba(0,0,0,.08)}
.fin-stock.highlighted:hover{background:#fff;border-color:color-mix(in srgb,var(--acc) 70%,var(--line));box-shadow:0 4px 14px rgba(0,0,0,.12)}
[data-mode="dark"] .fin-stock.highlighted{background:color-mix(in srgb,var(--card) 78%,#fff);box-shadow:0 2px 10px rgba(0,0,0,.45)}
[data-mode="dark"] .fin-stock.highlighted:hover{background:color-mix(in srgb,var(--card) 68%,#fff);box-shadow:0 4px 14px rgba(0,0,0,.55)}
.fin-stock.linked{border-left:6px solid var(--ac);border-bottom-left-radius:0}
.fin-stock.highlighted.linked{border-left-color:var(--ac)}
.fin-stock:has(.fin-stock-bar){border-bottom-left-radius:0}
.fin-stock-bar{position:absolute;bottom:-1px;left:-1px;height:3px;background:var(--ac,var(--acc));border-radius:0 2px 2px 0;pointer-events:none;transition:width .3s ease,height .15s ease}
.fin-stock.linked .fin-stock-bar{left:-6px;border-radius:0 2px 2px 0}
.fin-stock:hover .fin-stock-bar{height:4px}
.fin-stock .tools{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.fin-stocks.compact .tools :is([value="stock_pin"],[value="stock_hide"]){display:none!important}

.tagmini{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-left:4px}
.strong{font-weight:600}
.fin-form{display:flex;flex-direction:column;gap:8px}
.tedit .panel.wide{width:min(480px,92vw)}
.fin-form .row.tight{gap:6px}
.fin-form .row.tight .fld{flex:1 1 0}
.fin-form .row.tight input,.fin-form .row.tight select{padding:6px 8px;font-size:var(--fs-md)}
.fld.grow2{flex:2}
.fin-acccol{align-items:flex-end}
.fin-acccol .palette{margin-bottom:6px}
.fin-form .row{margin:0;flex-wrap:nowrap}
.fld{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-sm);color:var(--mute);flex:1;min-width:0;margin:0}
.fld input,.fld select{color:var(--ink);font-size:var(--fs-md);width:100%}
/* Transactions: the form and the list as a table (cards on phones) */
.panel.tx-form{max-width:920px}
.tx-form .row.tight{flex-wrap:wrap}
.tx-form .fld{min-width:110px}
.tx-form .fld.grow2{min-width:220px}
.tx-form .listhead{justify-content:space-between}
.tx-form input[readonly]{background:var(--tint);color:var(--mute)}
.tx-recip{display:flex;align-items:center;gap:10px}
.tx-recip input{flex:1;min-width:0}
.tx-recip a{flex:none;white-space:nowrap} /* Recipient + Manage clients */
.tx-form .row.tx-actions{justify-content:flex-end} /* Add / Save on the right */
.tx-effort{display:flex;gap:6px}
.tx-effort input{flex:1;min-width:0}
.tx-effort select{flex:none;width:auto}
.tx{width:100%;margin-top:var(--gap);border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);font-size:var(--fs-sm)}
.tx th{padding:10px 10px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:var(--fs-xs);font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tx td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:middle}
.tx tbody tr:first-child td{border-top:0}
.tx tbody tr:hover{background:var(--tint)}
.tx .num{text-align:right;white-space:nowrap}
.tx-in .tx-gross{color:var(--green)}
.tx-out .tx-gross{color:var(--red)}
/* Transactions: income / expenses as a line on the left (like the account cards), drafts grey; hidden and drafts faded (not counted) */
.tx-in>td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.tx-out>td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tx tr.tx-draft>td:first-child{box-shadow:inset 3px 0 0 var(--grey)}
.tx :is(.tx-draft,.tx-hidden)>td:not(.tx-tools){color:color-mix(in srgb,var(--ink) 45%,transparent)}
.tx :is(.tx-draft,.tx-hidden) :is(.tx-gross,.hint){opacity:.6} /* faded text, the line keeps its color */
.thsort{padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.thsort:hover,.thsort.on{color:var(--ink)}
.thsort span{display:inline-block;min-width:.8em}
.tx-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:4px 0 12px;font-size:var(--fs-sm)}
.tx-filter .check{gap:5px}
.tx-filter .tx-in{color:var(--green)}
.tx-filter .tx-out{color:var(--red)}
/* Taxes: quarter and year rows stand out, empty months dimmed */
.tax .tax-sub td{background:var(--tint);font-weight:600}
.tax .tax-total td{background:var(--tint-2);font-weight:700}
.tax .dimrow td{color:var(--mute)}
.tax+.sub,.fin-sum+.sub{margin-top:28px}
.tax+.fin-sum{margin-top:var(--gap)}
.fin-refresh{margin:0 0 10px}
.fin-refresh .icon{width:var(--icon-s);height:var(--icon-s);margin-right:6px;vertical-align:-2px}
.tx tr:has(.tedit[open]){position:relative;z-index:31}
.tx .tools{justify-content:flex-end}
.fin-chartbox{max-width:none;padding:12px}
.chart{width:100%;height:auto;display:block}
.chart text{font-size:11px;fill:var(--mute)}
.chart .grid{stroke:var(--line);stroke-dasharray:3 4}
.chart .line{fill:none;stroke:var(--cc,var(--acc));stroke-width:2.2}
.chart .area{fill:color-mix(in srgb,var(--cc,var(--acc)) 12%,transparent)}
.chart circle{fill:var(--card-solid);stroke:var(--cc,var(--acc));stroke-width:2}
.fin-hist{display:flex;flex-direction:column;gap:2px;margin-top:12px;max-width:640px}
.fin-hrow{display:grid;grid-template-columns:160px 1fr 1fr auto;align-items:center;gap:10px;font-size:var(--fs-md);margin:0;padding:4px 8px;border-radius:var(--radius)}
.fin-hrow:hover{background:var(--tint)}
.fin-month .entry{align-items:center}
.fin-new+:is(.fin-month,.empty){margin-top:var(--gap)}
.entry:has(.tedit[open]){position:relative;z-index:31} /* Month: room under the form; an open edit box above the summary */
.fin-flow .in{color:var(--green)}
.fin-flow .out{color:var(--red)} /* Finance widget: in green, out red */
.fin-divs{--n:3;display:flex;flex-wrap:wrap;gap:8px}
.fin-divs>.entry{flex:0 0 calc((100% - (var(--n) - 1) * 8px) / var(--n));min-width:0}
.fin-divs>.fin-dsum{flex:1 1 calc((100% - (var(--n) - 1) * 8px) / var(--n));flex-direction:column;align-items:flex-start;justify-content:center;gap:0;background:color-mix(in srgb,var(--acc) 9%,var(--card));border-color:color-mix(in srgb,var(--acc) 25%,var(--line))}
.fin-dsum strong{font-size:var(--fs-md)} /* dividends: 3 a row (2, 1 on smaller screens); the total fills the rest of the last row */
.fin-divs .entry{margin:0;padding:8px 12px;font-size:var(--fs-sm);flex-wrap:nowrap}
.fin-divs .grow{min-width:0} /* dividends and interest: small cards in the item's color */
.fin-sum{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.fin-sum strong{font-family:var(--font-title);font-size:var(--fs-xl);font-weight:600}
.fin-sum .mute{width:100%}
.fin-examt{white-space:nowrap;font-weight:600}

/* 9. Login */
body.login{align-items:center;justify-content:center;background-size:cover;background-position:center;background-repeat:no-repeat}
.loginbox{width:min(340px,90vw);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:10px}
.checks{list-style:none;margin:6px 0 0;padding:0;font-size:var(--fs-sm)}
.checks li{margin:1px 0}
.login .mode{position:relative;height:5px;margin:4px 0;border-radius:var(--radius);background:var(--line);cursor:pointer;transition:background .15s}
.login .mode input{position:absolute;opacity:0;width:0} /* the clickable line "hide hidden items" */
.login .mode:hover{background:var(--tint-3)}
.login .mode:has(:checked){background:var(--acc)}
.login .mode:focus-within{outline:2px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.lrow{display:flex;align-items:center;gap:10px}
.lrow button{flex:1}
.lmode{display:flex;gap:2px}
.lmode label{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius);color:var(--mute);cursor:pointer}
.lmode input{position:absolute;opacity:0;width:0}
.lmode label:hover{color:var(--ink)}
.lmode label:has(:checked){background:var(--tint-2);color:var(--acc)}
.lmode label:has(:focus-visible){outline:2px solid var(--acc)}
.lmode .icon{width:var(--icon-l);height:var(--icon-l)} /* Home or Work, left of "Log in" */
.login h1{margin:0 0 6px;font-family:var(--font-title);font-size:var(--fs-xl)}
.login .err{margin:0}
/* login start page (pages/login_start.php): search bars, the login box, link tiles, like a browser's new tab page */
body.login.start{align-items:flex-start}
.startpage{flex:none;width:min(600px,92vw);max-width:none;padding:12vh 0 40px;display:flex;flex-direction:column;align-items:center;gap:28px}
.startsearch{width:min(340px,90vw);display:flex;flex-direction:column;gap:12px}
.sbar{position:relative;display:flex;align-items:center;gap:12px;height:50px;padding:0 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.sbar:focus-within{z-index:5;box-shadow:var(--shadow-pop);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))} /* its suggestions above the login box (backdrop-filter gives every box its own layer) */
.sbar .icon{flex:none;width:var(--icon-l);height:var(--icon-l);color:var(--mute)}
.sbar input,.sbar input:hover,.sbar input:focus{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;font-size:var(--fs-lg)}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;padding:6px 0;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.suggest li{padding:7px 20px;cursor:pointer}
.suggest li:hover,.suggest li.on{background:var(--tint)}
.starttiles{width:100%}
.starttiles .fav{grid-template-columns:repeat(auto-fit,92px);justify-content:center;gap:10px}
.starttiles .fav .dtile{padding:12px 4px 8px;gap:8px;background:color-mix(in srgb,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.starttiles .fav .dicon{width:48px;height:48px}
.starttiles .fav a.dtile:hover{background:var(--card)}
.starttiles .fav .dname{font-size:var(--fs-sm)}

/* 10. Small screens: 1240 px two columns, 900 px, 760 px phones */
@media(max-width:900px){
    .mapwrap,.lfm-grid{grid-template-columns:1fr}
}
/* phones: the sidebar's parts are placed into the page (display: contents): search, avatar and buttons at the top,
   the menu as a tab bar at the bottom */
@media(max-width:1240px){
    .fin-divs{--n:2}
    .grid,.gal{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .fin-divs{--n:1}
    .fin-own{min-width:0}
    .fin-stocks:not(.compact) .fin-stock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start}
    .fin-stocks:not(.compact) .fin-stock .grow{grid-column:1;grid-row:1}
    .fin-stocks:not(.compact) .fin-stock .fin-own{grid-column:2;grid-row:1}
    .fin-stocks:not(.compact) .fin-stock .spark{grid-column:1;grid-row:2;align-self:center}
    .fin-stocks:not(.compact) .fin-stock .tools{grid-column:2;grid-row:2;justify-self:end}
    .tx thead{display:none}
    .tx,.tx tbody,.tx td{display:block}
    .tx tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:10px 12px;border-top:1px solid var(--line)}
    .tx tbody tr:first-child{border-top:0}
    .tx tr.tx-in{box-shadow:inset 3px 0 0 var(--green)}
    .tx tr.tx-out{box-shadow:inset 3px 0 0 var(--red)}
    .tx tr.tx-draft{box-shadow:inset 3px 0 0 var(--grey)}
    .tx tr[class]>td:first-child{box-shadow:none}
    .tx td{padding:2px 0;border:0}
    .tx td[data-l]::before{content:attr(data-l);display:block;font-size:var(--fs-xs);color:var(--mute)}
    .tx td[data-l]:empty{display:none}
    .tx .num{text-align:left}
    .tx .tx-tools{grid-column:1 / -1} /* Transactions as cards */
    .navtoggle{display:none}
    .listedit .row{flex-wrap:wrap}
    .has-bg .dock,.has-bg #menu{background:color-mix(in srgb,var(--side) 78%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
    body{flex-direction:column}
    aside{display:contents}
    aside>#searchDock{display:none} aside>footer.dock,aside>.dock:first-child{padding-top:max(18px,env(safe-area-inset-top))} aside>.dock:first-child:has(#live:not([hidden])){z-index:42} /* live results open over the name bar */
    .dock{order:2;flex-direction:column-reverse;gap:8px;padding:0 max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));background:var(--side);position:relative;z-index:41}
    .me{padding:0}
    /* the menu as a tab bar at the bottom: the first 4 entries + More, which opens all of them as a sheet (app.js section 5) */
    #menu{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;overflow:visible;overscroll-behavior:contain;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:color-mix(in srgb,var(--side) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
    #menu:has(>.navitem:nth-of-type(6))>.navitem:nth-of-type(n+5){display:none}
    #menu:not(:has(>.navitem:nth-of-type(6))) .navmore{display:none} /* 5 entries or fewer: no More */
    #menu.more,.has-bg #menu.more{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:8px;max-height:80vh;overflow:auto;padding-top:14px;background:var(--pop-bg);box-shadow:var(--shadow-pop);border:0;border-radius:0}
    #menu.more:has(>.navitem:nth-of-type(6))>.navitem:nth-of-type(n+5){display:flex}
    #menu:not(.more) #searchDock{display:none}
    #menu.more #searchDock{display:block;grid-column:1 / -1;order:100;width:100%;box-sizing:border-box;margin:10px 0 6px;padding:0 4px;background:none}
    #menu.more #searchDock .search{opacity:1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2px 10px;width:100%;box-sizing:border-box}
    #menu.more #searchDock .search input{width:100%;padding:8px 0;font-size:var(--fs-md)}
    #menu.more #searchDock #live{top:auto;bottom:calc(100% + 6px);left:0;right:0;width:100%;max-height:50vh;box-sizing:border-box}
    .navitem{min-width:0}
    .navitem:hover{background:none} .navitem a:not(.on):hover,.navmore:hover{background:var(--tint)}
    .navitem .handle{display:none}
    .navitem a,.navmore{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;border-radius:var(--radius);font-size:var(--fs-xs);text-align:center}
    .navitem a .icon,.navmore .icon{order:0;width:22px;height:22px} /* icon above the name */
    .navitem a .label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .navmore{position:relative;background:none;border:0;color:var(--ink);font-weight:400}
    .navmore .icon{color:var(--acc)}
    .navmore .dot{display:none}
    #menu:not(.more):has(>.navitem:nth-of-type(n+5) .dot) .navmore .dot{display:block} /* a dot on a hidden entry shows on More */
    .navitem a.on,#menu:not(.more):has(>.navitem:nth-of-type(n+5) a.on) .navmore{background:var(--tint-2);color:var(--ink)} /* the current page (on More while it is behind it) */
    main{order:4;padding:20px max(20px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));max-width:none} /* room for the tab bar */
    .split{flex-direction:column}
    .list{width:auto}
    .docrow{flex-wrap:wrap}
    .docrow .grow{flex:1 1 60%}
    .homehead{position:relative;display:block;margin-bottom:18px} .homehead .date{margin:0 0 12px;padding-right:155px}
    .homeside{position:absolute;top:-13px;right:0;z-index:42;gap:8px} .homeside .hcircle,.homeside .aclock{width:38px;height:38px;font-size:var(--fs-md)} .homeside .avatar.home{width:50px;height:50px} /* circles + avatar top-right of date, avatar overlapping top bar */
    .grid,.gal{grid-template-columns:1fr}
    .whead .size{display:none} /* one column: no widths to choose */
    .moment{grid-template-columns:1fr}
    .mdate{grid-template-columns:1fr 1fr 30px}
    .mdate>input:first-child,.mdate>.hint{grid-column:1 / -1}
    .mdate.hint{display:none}
    .tl{display:flex;flex-direction:column;gap:22px;min-width:0}
    .tl-col{display:grid;grid-template-columns:64px minmax(0,200px);column-gap:14px;align-items:center} /* timeline goes down */
    .tl-year{grid-column:1;grid-row:1}
    .tl-card,.tl-bar{grid-column:2;grid-row:1}
    .tl-card .polaroid.small{width:75%}
    .tl-year::before{left:50%;right:auto;top:-12px;bottom:-12px;width:2px;height:auto}
}
/* phones: bigger text (rem sizes grow with html); fields at least 16 px, so iOS doesn't zoom in when one is tapped */
@media(max-width:760px){
    html{font-size:120%}
    body{font-size:18px}
    :is(input:not([type=checkbox],[type=radio]),select,textarea,.rich){font-size:max(16px,1em)!important} /* !important: also over the smaller fields of single forms */
}
/* phones: pop-ups open as sheets from the bottom, full width (✎ and share boxes, the tile box, pick menus, color pickers).
   A blurred box (backdrop-filter) would hold a fixed pop-up inside it, so a box with an open one is not blurred meanwhile. */
@media(max-width:760px){
    :is(.tedit,.sharebox) .panel,.tedit .panel.wide,.tpop,.hpick form,.pmenu{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;min-width:0;max-height:80vh;overflow:auto;overscroll-behavior:contain;z-index:60;margin:0;transform:none;padding:18px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;border-radius:0}
    .pmenu{flex-wrap:wrap;justify-content:center;gap:12px}
    .hpick form{gap:2px}
    .hpick button{padding:12px 14px;font-size:var(--fs-base)}
    :is(.widget,.panel,.entry,.loginbox,.sbar):has(details[open],.palette:focus-within,.hpick:focus-within){-webkit-backdrop-filter:none;backdrop-filter:none}
    .modal-backdrop{align-items:flex-end;padding:0} .modal-panel{width:100vw;max-width:100vw;border-radius:0;max-height:85vh;margin:0;border-bottom:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))} body:has(details.tedit[open],details.sharebox[open],.hpick:is(:hover,:focus-within),.palette:focus-within,.modal-backdrop:not([hidden])) #menu{visibility:hidden} /* the tab bar steps aside while a sheet is open, so its last item can be reached */
}
/* touch screens: everything you tap is at least 44 px */
@media(pointer:coarse){
    :is(.iconbtn,.tbtn,form.hd>button,.dtools .tbtn,.ctoggle,.tedit>summary){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    :is(.tbtn,form.hd>button,.dtools .tbtn){width:44px;height:44px}
    :is(.tpop,.tedit .panel) .row>button,button:not(.iconbtn,.tbtn,.copen,.ghost,.navmore,.chk),.btn{min-height:44px}
    .chk{position:relative}
    .chk::after{content:"";position:absolute;inset:-13px} /* round tick circles stay round: a bigger tap area around them instead */
    input:not([type=checkbox],[type=radio]),select{min-height:44px}
    input:is([type=checkbox],[type=radio]){width:22px;height:22px}
    .check{min-height:44px}
    .pills>a,.pills>button,.btnrow button{padding:10px 14px}
    .pnow{width:32px;height:32px}
    .croprect i{width:24px;height:24px}
    .pmenu label span{width:36px;height:36px}
    .lmode label{width:44px;height:44px}
    .navitem a{min-height:44px}
}
/* installed app and phones: no grey flash and no double-tap zoom on taps; the sidebar keeps out of a notch (landscape) */
html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(min-width:761px){
    aside{padding-left:max(12px,env(safe-area-inset-left))}
    main{padding-right:max(44px,env(safe-area-inset-right))}
}
/* Health > History: date and time field */
.hlog input[type=datetime-local]{flex:none;width:auto;padding:4px 6px;font-size:var(--fs-sm)}
/* Health > History: compact small list */
.hlog-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:220px;overflow-y:auto;padding-right:2px}
.hlog-item{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);padding:2px 6px;border-radius:calc(var(--radius) - 4px)}
.hlog-item:hover{background:var(--tint)}
.hlog-time{color:var(--mute);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.hlog-val{font-weight:500;font-variant-numeric:tabular-nums}
/* Profile General: added info plain text display (no boxes), edit mode toggle */
.prof-field-item{padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 40%,transparent)}
.prof-field-item:last-of-type{border-bottom:none}
.prof-field-view{display:flex;align-items:center;gap:12px;min-height:36px;padding:3px 6px;border-radius:var(--radius)}
.prof-field-view:hover{background:var(--tint)}
.prof-field-name{font-weight:600;min-width:120px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.prof-field-val{color:var(--ink);overflow-wrap:anywhere}
.prof-field-date{white-space:nowrap;color:var(--mute);font-size:var(--fs-xs);margin-left:auto;flex:none}
.prof-field-view .tools{margin-left:auto;flex:none}
.prof-field-edit{margin:2px 0}
.prof-field-edit .tools{opacity:1!important;margin-left:auto;flex:none}
.prof-field-item .w-date, form.catrow .w-date{flex:none;width:140px;max-width:140px}
/* touch screens: tools that appear on hover are always shown */
@media(hover:none){
    .pola-nav,.tnav,.mphoto .mdel,.overlay,.addtags{opacity:1}
    /* Home widgets: no hover, so their tools show only while "Arrange widgets" is on (below the grid); the title then isn't dragged or clicked */
    .arrange-btn{display:inline-flex}
    .grid:not(.arrange) .whead :is(.handle,.size,.close,.dbtn),.grid:not(.arrange) .widget.bare .whead{opacity:0;visibility:hidden}
    .grid.arrange .whead :is(.handle,.size,.close,.dbtn),.grid.arrange .widget.bare .whead{opacity:1;visibility:visible;transition:none}
    .grid:not(.arrange) .wtitle{pointer-events:none;touch-action:auto}
}
/* reduced motion: no moon drawing, no confetti */
@media(prefers-reduced-motion:reduce){
    .moon *{animation:none}
    .celebrate i{display:none}
    .celebrate,.celebrate-box{animation:none}
}

/* Drafts (Notes > Drafts, src/drafts.php): one line each (⠿, icon, title, pin, date, ✎); open: icon, title, color, the text, pin / hide / ✕ / minimize */
.drafts{display:flex;flex-direction:column;gap:6px}
.drafts>.panel{margin:0}
.panel.draft{padding:0;gap:0;max-width:none;border-left:4px solid var(--tc,transparent)}
.draft>summary{display:flex;align-items:center;gap:10px;min-height:46px;padding:7px 10px}
.draft>summary>.handle{display:inline-flex;align-items:center;justify-content:center;color:var(--mute);cursor:grab;padding:0!important;font-size:14px;line-height:1;flex:none}
.draft>summary>.handle:hover{color:var(--ink);background:none!important}

.dtools .handle{color:var(--mute);cursor:grab}
.dico{display:inline-flex;color:var(--tc,var(--acc))}
.dico:empty{display:none}
.dico .icon,.dpin .icon{width:var(--icon);height:var(--icon)}
.dpin{display:inline-flex;color:var(--mute)}
.draft[open] .dpin{display:none} /* pinned: the pin button shows it while open */
.dtitle{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtitle.mute{font-weight:400}
.dsaved{font-size:var(--fs-xs);opacity:0}
.dsaved.show{animation:savedflash 6s forwards}
@keyframes savedflash{0%,80%{opacity:1}to{opacity:0}}
.dsaved.ok{color:var(--green)}
.dsaved.fail{opacity:1} /* "Saved" flashes green next to the date; "Not saved" stays */
.dtools{display:flex;align-items:center;gap:2px}




.dtools .handle{padding:0!important;line-height:24px;font-size:14px}
.dtools .icon{width:15px;height:15px;display:block}


.draft[open] .dopen,.draft:not([open]) :is(.dclose,.dwhenopen){display:none} /* closed: only ✎; open: pin, hide, ✕, minimize */
.dbody{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.dhead{margin:0;flex-wrap:nowrap}
.dhead>input{flex:1;min-width:0;font-weight:600}
.wbody .draft>summary{min-height:0;padding:6px 8px}
.wbody .dbody{padding:0 10px 10px} /* Drafts widget: a little tighter */
:is(.todo,.panel.draft:not([open])):hover{background:color-mix(in srgb,var(--acc) 6%,var(--card))} /* the same subtle hover as other boxes */
/* Notes tabs (Drafts, Todos, Diary, Lists) look alike: under the tabs one bar (.nbar: new / add, or the pills), then the items as
   boxes of the same height, spacing and hover; item tools as icons (✎, eye, ✕ and the like) */
.nbar{margin:0 0 16px} form.nbar{justify-content:flex-end}
.litem{min-height:46px;padding:7px 10px;margin:0 0 6px;gap:8px}
.todo{min-height:46px}
.pills .tedit .panel{left:0;right:auto}
/* icon picker (icon_pick()): like the color picker, its icons in a small grid */
.ipick .pnow{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius);background:none;color:var(--acc);box-shadow:0 0 0 1px var(--line)}
.ipick .pnow.nocolor{border:1.5px dashed var(--mute);border-radius:var(--radius);box-shadow:none;color:var(--mute)}
.ipick .pnow.nocolor::before{content:"✦";font-size:10px;line-height:1;opacity:.45}
.ipick .pnow .icon{width:var(--icon);height:var(--icon)}
.ipick .pmenu{grid-template-columns:repeat(7,28px);gap:2px;padding:6px;top:calc(100% + 4px);left:-6px;transform:translateX(var(--px,0px));border-radius:var(--radius)} .ficonpick .pmenu{grid-template-columns:repeat(6,28px)}
.ipick:is(:hover,:focus-within) .pmenu{display:grid}
.ipick .pmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* bridges the gap, so moving the mouse down keeps it open */
.ipick .pmenu label span{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--radius);box-shadow:none;color:var(--ink)}
.ipick .pmenu label .nocolor{border:1.5px dashed var(--mute);width:22px;height:22px;margin:3px;border-radius:var(--radius);display:grid;place-items:center}
.ipick .pmenu label .nocolor::before{content:"✦";font-size:10px;line-height:1;opacity:.45}
.ipick .pmenu label span:hover{background:var(--tint)}
.ipick .pmenu input:checked+span{background:var(--tint-2);color:var(--acc)}
.ipick .pmenu .icon{width:var(--icon);height:var(--icon)}
/* rich text field (src/rich.php) and its toolbar on a selection (app.js 22) */
.rich{min-height:9em;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-solid);color:var(--ink);line-height:1.55;outline:none;overflow-wrap:anywhere;cursor:text}
.rich:focus{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
.rich:empty::before{content:attr(data-placeholder);color:var(--mute)}
:is(.rich,.richtext) :is(ul,ol){margin:4px 0;padding-left:1.4em}
:is(.rich,.richtext) p{margin:0 0 .6em}
.richbar{position:fixed;z-index:70;display:flex;gap:2px;padding:3px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.richbar button{min-width:30px;height:28px;padding:0 6px;background:none;color:var(--ink);font-weight:400}
.richbar button:hover{background:var(--tint)}
.richbar .rgroup{position:relative;display:flex}
.richbar .rfg{border-bottom:3px solid var(--acc);line-height:1}
.richbar .rhl{padding:0 3px;border-radius:3px;background:var(--tint-3)}
.richbar .rpop{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;padding:4px;gap:2px;background:var(--pop-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);white-space:nowrap}
.richbar .rpop::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px} /* keeps it open on the way down */
.richbar .rgroup:hover .rpop,.richbar .rgroup.open .rpop{display:flex} /* text color or background: its palette on hover (tap on touch) */
.richbar .rbg{min-width:0;width:18px;height:18px;margin:3px 2px;padding:0;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.richbar .rbg:hover{background:var(--bg);transform:scale(1.15)}
.richbar .rbg.none{background:none;border:2px dashed var(--mute);box-shadow:none} /* palette colors; dashed = none */
:is(.rich,.richtext) .t-s{font-size:.85rem}
:is(.rich,.richtext) .t-m{font-size:1rem}
:is(.rich,.richtext) .t-l{font-size:1.3rem} /* the 3 text sizes (rem, so nested ones don't add up) */
:is(.rich,.richtext) mark{color:#1f1f1f;padding:0 2px;border-radius:3px} /* text background: always dark text, readable in dark mode too */

/* Health: Eyeglasses lens specifications */
.tedit>summary.btn{display:inline-flex;align-items:center;justify-content:center}


.glasses-form{display:flex;flex-direction:column;gap:12px}
.glasses-form h4{margin:0}




.glasses-form .glasses-table{margin:0}
.glasses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:12px;margin-top:10px}
.glasses-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}

.glasses-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.glasses-head h4{margin:0;font-size:var(--fs-md);font-weight:600}
.glasses-head .hint{margin-top:2px}
.glasses-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);text-align:center}
.glasses-table th,.glasses-table td{padding:5px 6px;border:1px solid var(--line)}
.glasses-table th{background:var(--tint);font-weight:600;font-size:var(--fs-xs);color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.glasses-table tbody th{background:var(--tint);color:var(--ink);width:28px;font-weight:700}
.glasses-table td input{padding:4px 6px;text-align:center;font-size:var(--fs-sm);min-width:0;width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-solid);color:var(--ink)}




/* Contacts */
:is(.cal-page,.contacts-page){display:flex;flex-direction:column;gap:16px}
:is(.cal-topbar,.contacts-topbar){display:flex;flex-direction:column;gap:10px}
.contacts-topbar h2,.cal-title-row h2{margin:0}
.cal-title-row{display:flex;align-items:center;gap:8px}
body.standalone main{max-width:none;padding:24px 32px}
@media(max-width:760px){body.standalone main{padding:14px 14px calc(80px + env(safe-area-inset-bottom,0px))}}
:is(.cal-controls,.contacts-controls){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.contacts-header-actions{display:flex;align-items:center;gap:10px}

/* Full-width Contacts Table & Rows */
.contacts-main-pane{width:100%;padding:0!important;margin:0!important}
.contacts-table{display:flex;flex-direction:column;gap:6px;width:100%}
.contacts-group-header{font-size:var(--fs-xs);font-weight:700;color:var(--mute);text-transform:uppercase;padding:12px 0 4px;letter-spacing:.05em}
.contacts-group-header:first-child{padding-top:2px}
.contacts-group-list{display:flex;flex-direction:column;gap:2px}
.contacts-row{display:flex;align-items:center;border-radius:var(--radius);transition:background .12s;margin:0 -10px;padding:2px 10px;width:calc(100% + 20px);box-sizing:border-box}
.contacts-row:hover{background:var(--tint)}
.contacts-row-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:6px 0;color:var(--ink);text-decoration:none}
.contacts-avatar-col{flex:none;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;margin-right:4px}
.contacts-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--ac,#3b7ddd) 18%,var(--card-solid));color:var(--ac,#3b7ddd);display:grid;place-items:center;font-weight:600;font-size:var(--fs-xs);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,#3b7ddd) 30%,transparent)}
.contacts-avatar.big{width:68px;height:68px;font-size:var(--fs-xl);font-weight:700;box-shadow:0 0 0 2px color-mix(in srgb,var(--ac,#3b7ddd) 35%,transparent)}
.contacts-avatar-img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line);flex:none}
.contacts-name-col{flex:1.5;min-width:140px;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.contacts-row-name{display:flex;align-items:center;gap:6px;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contacts-row-name b{overflow:hidden;text-overflow:ellipsis}
.contacts-row-star-badge{color:var(--yellow);font-size:var(--fs-sm);flex:none}
.contacts-row-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contacts-phone-col{flex:1.2;min-width:130px;font-size:var(--fs-sm);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contacts-email-col{flex:1.5;min-width:160px;font-size:var(--fs-sm);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contacts-col-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contacts-row-actions{flex:none}




.contacts-row .contacts-star-btn{opacity:0;transition:opacity .12s}
.contacts-row:hover .contacts-star-btn,.contacts-row .contacts-star-btn.is-starred{opacity:1}
.contacts-empty-list{padding:36px 12px;text-align:center}

/* Modals: Card & Add/Edit */

.contacts-modal-panel{--modal-w:600px}


.contacts-star-btn{background:none!important;border:none!important;box-shadow:none!important;cursor:pointer;font-size:var(--fs-xl);line-height:1;color:var(--mute);transition:color .12s}
.contacts-star-btn:hover{background:none!important;color:var(--yellow)!important}
.contacts-star-btn.is-starred{color:var(--yellow)!important}

/* Popup Top Row: Avatar + Names in One Line */
.contacts-popup-top-row{display:flex;align-items:center;gap:16px;width:100%}
.contacts-popup-avatar-wrap{position:relative;flex:none;display:inline-flex;align-items:center}
.contacts-avatar-label{position:relative;cursor:pointer;display:inline-flex;border-radius:50%;overflow:hidden}
.contacts-avatar-hover-icon{position:absolute;inset:0;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;border-radius:50%}
.contacts-avatar-hover-icon .icon{width:22px;height:22px}
.contacts-avatar-label:hover .contacts-avatar-hover-icon{opacity:1}
.contacts-avatar-del-btn{position:absolute;top:-4px;right:-8px;width:22px;height:22px;min-width:22px;padding:0;border-radius:50%;background:var(--card-solid);box-shadow:var(--shadow);z-index:2;display:inline-flex;align-items:center;justify-content:center}
.contacts-avatar-del-btn .icon{width:12px;height:12px}
.contacts-names-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-width:0}

/* Flat Form Fields for Existing Contacts (Boxes only on hover / focus) */
.contacts-form-flat :is(input:not([type=checkbox],[type=radio]),select,textarea){background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;padding:5px 6px;margin:0 -7px;width:calc(100% + 14px);box-sizing:border-box;font-weight:600;transition:background .12s,border-color .12s}
.contacts-form-flat :is(input:not([type=checkbox],[type=radio]),select,textarea):hover{background:var(--card)!important;border-color:var(--line)!important}
.contacts-form-flat :is(input:not([type=checkbox],[type=radio]),select,textarea):focus{background:var(--card)!important;border-color:var(--acc)!important;outline:2px solid color-mix(in srgb,var(--acc) 40%,transparent)!important}

/* Add / Edit Form Modal */

.contacts-form{display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.contacts-form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.contacts-address-row{display:grid;grid-template-columns:2.2fr .8fr 1.5fr 1.5fr;gap:10px;width:100%}
.contacts-more-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.contacts-field{display:flex;flex-direction:column;gap:4px}
.contacts-field :is(input,select){width:100%;font-weight:600}
.contacts-field textarea{width:100%;min-height:75px;resize:vertical;font-weight:500}
.contacts-field :is(input,select,textarea)::placeholder{font-weight:400;opacity:.55}
.contacts-map-link{margin-left:4px;display:inline-flex;vertical-align:middle}
.contacts-cat-select{width:130px!important;max-width:130px!important;height:36px}
.contacts-color-wrap{height:36px;display:flex;align-items:center}
.contacts-more-details{margin-top:2px;border-top:none;padding-top:0}
.contacts-more-summary{color:var(--mute);font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:2px 0;display:inline-flex;align-items:center;user-select:none}
.contacts-more-summary:hover{color:var(--ink)}
.contacts-more-body{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.contacts-form-actions{margin-top:10px;margin-bottom:0;padding-top:0;border-top:none;display:flex;align-items:center;gap:10px}
.contacts-star-toggle{background:none!important;border:none!important;box-shadow:none!important;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xl);line-height:1;user-select:none;color:var(--mute);padding:2px 4px;transition:color .12s}
.contacts-star-toggle:hover{color:var(--yellow)}
.contacts-star-toggle.is-starred,.contacts-star-toggle:has(:checked){color:var(--yellow)}



/* Avatar Lightbox */
.con-avatar-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:210;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:16px;box-sizing:border-box}
.con-avatar-lightbox-card{background:var(--card-solid);border:1px solid var(--line);box-shadow:var(--shadow-pop);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(340px,90vw);cursor:default;position:relative}
.con-avatar-lightbox-img{width:220px;height:220px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--line)}
.con-avatar-lightbox-init{width:220px;height:220px;border-radius:50%;background:color-mix(in srgb,var(--ac,#3b7ddd) 20%,var(--card-solid));color:var(--ac,#3b7ddd);display:grid;place-items:center;font-weight:700;font-size:72px;box-shadow:0 0 0 2px color-mix(in srgb,var(--ac,#3b7ddd) 35%,transparent)}
.con-avatar-lightbox-title{font-size:var(--fs-lg);font-weight:600;text-align:center;margin:0}

@media(max-width:760px){
    .contacts-row-main{flex-wrap:wrap;gap:8px}
    .contacts-email-col,.contacts-phone-col{display:none}

    .contacts-popup-top-row{flex-direction:column;align-items:flex-start;gap:12px}
    .contacts-names-row{grid-template-columns:1fr;width:100%}
    .contacts-form-row-3{grid-template-columns:1fr}
    .contacts-address-row{grid-template-columns:1fr 1fr}
    .contacts-more-grid-2{grid-template-columns:1fr}
    .contacts-field-address{grid-column:1 / -1}
    .contacts-field-country{grid-column:1 / -1}


}


/* Calendar */



.cal-view-switch{display:flex;align-items:center;margin:0}
.cal-nav-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.cal-nav-buttons{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.cal-nav-buttons .cal-nav-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 15px;background:var(--acc);color:var(--acc-ink);border:0;border-radius:var(--radius);font-weight:550;font-size:var(--fs-md);text-decoration:none;cursor:pointer}
.cal-nav-buttons .cal-nav-btn:hover{filter:brightness(1.08)}
.cal-nav-buttons .cal-nav-arrow{width:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.cal-nav-buttons .cal-nav-arrow .icon{width:16px;height:16px;stroke-width:2.2;display:block;margin:auto}
.cal-page :is(.cal-cell,.cal-chip,.cal-title-btn,.pills>*,.iconbtn,.btn,button,.cal-jump-m,.cal-year-table td,.cal-timed-event,.cal-card-event,.cal-year-day,.cal-nav-btn){transition:none!important}
.cal-filter-details{position:relative;display:inline-flex;align-items:center}
.cal-filter-toggle{width:36px;height:36px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;color:var(--ink);border:1px solid var(--line);background:var(--card);position:relative}

.cal-filter-toggle:hover{background:var(--tint);color:var(--acc)}
.cal-filter-toggle.has-filter::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.cal-filter-panel{position:absolute;top:50%;right:calc(100% + 8px);transform:translateY(-50%);width:max-content;margin:0;display:none;flex-direction:row;align-items:center;gap:6px;z-index:40;background:none;box-shadow:none;border:none;padding:0;box-sizing:border-box} .cal-filter-details[open] .cal-filter-panel{display:flex}
.cal-filter-panel.pills{margin:0;padding:0;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:6px}
.cal-filter-panel.pills>button{white-space:nowrap}



.cal-filter-panel .dotc{width:8px;height:8px} .cal-filter-panel.pills>button:not(.on) .dotc{opacity:.4}


@media(hover:hover){.cal-filter-details:hover .cal-filter-panel{display:flex!important}}
@media(max-width:760px){
    .cal-filter-panel{top:calc(100% + 6px);right:0;transform:none;flex-wrap:wrap;max-width:calc(100vw - 32px);justify-content:flex-end}
    .cal-day-full{display:none}
    .cal-day-short{display:inline}
    .cal-nav-row{flex-wrap:nowrap;gap:6px}
    .cal-nav-buttons{gap:4px;flex:1;min-width:0}
    .cal-nav-buttons .cal-nav-btn{padding:0 8px;height:34px;font-size:var(--fs-sm)}
    .cal-nav-buttons .cal-nav-arrow{width:32px;height:34px;flex:none}
    .cal-title-btn{font-size:var(--fs-md);padding:4px 6px;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cal-filter-details{flex:none}
    .cal-filter-toggle{width:34px;height:34px}
}
.cal-more-wrap{display:inline-flex;margin-top:1px}
.cal-more-badge{font-size:.65rem;font-weight:600;padding:1px 6px;border-radius:10px;background:var(--tint-2);color:var(--mute);cursor:pointer;line-height:1.3;display:inline-block;user-select:none;border:none}
.cal-more-badge:hover{background:var(--tint);color:var(--acc)}
.cal-more-floater{position:fixed;min-width:210px;max-width:280px;background:var(--pop-bg);border:1px solid var(--line);box-shadow:var(--shadow-pop);border-radius:var(--radius);padding:10px;z-index:90;display:flex;flex-direction:column;gap:4px;box-sizing:border-box}
.cal-more-title{font-size:var(--fs-xs);font-weight:700;color:var(--mute);margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid var(--line)}

.cal-picker{position:relative;display:inline-flex;align-items:center}
.cal-title-btn{font-size:var(--fs-lg);font-family:var(--font-title);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--radius);white-space:nowrap;line-height:1.2;color:var(--ink);user-select:none}
.cal-day-full{display:inline}
.cal-day-short{display:none}
.cal-title-btn:hover{background:var(--tint)}
.cal-jump-panel{position:absolute;top:calc(100% + 4px);left:0;right:auto;width:240px;padding:12px;display:flex;flex-direction:column;gap:10px;z-index:40;background:var(--pop-bg);box-shadow:var(--shadow-pop);border-radius:var(--radius);border:1px solid var(--line)}
.cal-jump-year{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-jump-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.cal-jump-m{padding:6px 4px;border-radius:var(--radius);text-decoration:none;font-size:var(--fs-sm);color:inherit;position:relative}
.cal-jump-m:hover,.cal-jump-m.on{background:var(--tint-2);font-weight:600}
.cal-jump-m.has-ev::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--acc)}
:is(.cal-grid.cal-month-grid,.cal-week-view,.cal-day-view){height:728px;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;background:none;border:1px solid var(--line);border-left:none;border-radius:0 var(--radius) var(--radius) 0}
:is(.cal-weekdays,.cal-week-header,.cal-day-header){height:44px;min-height:44px;flex:none;box-sizing:border-box;overflow:hidden}
.cal-weekdays{display:grid;grid-template-columns:50px repeat(7,1fr);border-bottom:1px solid var(--line);text-align:center;font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:0}
.cal-cw-head{width:50px;height:100%;font-size:.7rem;color:var(--mute);display:flex;align-items:center;justify-content:center;background:none!important;border-left:none!important;border-right:1px solid var(--line);padding:0 5px 0 2px;box-sizing:border-box;line-height:1}
.cal-weekdays>span:not(.cal-cw-head){background:var(--tint);display:flex;align-items:center;justify-content:center;padding:0;height:100%}
.cal-days{flex:1;height:684px;min-height:0;display:grid;grid-template-rows:repeat(var(--cal-weeks,5),1fr);overflow:hidden;user-select:none}
.cal-month-row{height:100%;min-height:0;max-height:100%;overflow:hidden;display:grid;grid-template-columns:50px repeat(7,1fr);border-bottom:1px solid var(--line);box-sizing:border-box}
.cal-month-row:last-child{border-bottom:none}
.cal-cw-cell{width:50px;height:100%;min-height:0;border-right:1px solid var(--line);background:none!important;border-left:none!important;display:flex;align-items:flex-start;justify-content:center;padding:6px 5px 6px 2px;box-sizing:border-box}
.cal-cw-num{font-size:.7rem;font-weight:600;color:var(--mute);letter-spacing:.02em;line-height:1;margin:0}
.cal-cell{height:100%;min-height:0;max-height:100%;border-right:1px solid var(--line);padding:4px 6px;display:flex;flex-direction:column;gap:2px;cursor:pointer;position:relative;background:var(--card);overflow:hidden;box-sizing:border-box}
.cal-cell:last-child{border-right:none}
.cal-cell:hover{background:color-mix(in srgb,var(--acc) 4%,transparent)}
.cal-cell.other-month{opacity:.45}
.cal-cell.today{background:color-mix(in srgb,var(--acc) 9%,transparent)}
.cal-cell.cal-selecting{background:color-mix(in srgb,var(--acc) 22%,transparent)!important}
.cal-cell-header{height:24px;flex:none;display:flex;align-items:center;justify-content:flex-end;margin-bottom:2px}
.cal-day-num{font-size:var(--fs-sm);font-weight:600;width:24px;height:24px;min-width:24px;max-width:24px;border-radius:50%;color:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;line-height:1}
.cal-day-num:hover{background:var(--tint-2);color:var(--acc)}
.cal-cell.today .cal-day-num{background:var(--acc);color:var(--acc-ink)}
.cal-cell-events{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.cal-chip{height:20px;min-height:20px;max-height:20px;line-height:20px;flex:none;font-size:var(--fs-xs);padding:0 5px;border-radius:4px;background:color-mix(in srgb,var(--ec) 22%,var(--card-solid));color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;cursor:pointer;box-sizing:border-box}
.cal-chip:hover{filter:brightness(0.96)}
.cal-chip-time{font-weight:600;font-size:.7rem;opacity:.85}
.cal-chip-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.cal-chip-icon .icon{width:12px;height:12px;stroke-width:2;vertical-align:middle;display:inline-block}
.cal-chip-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
:is(.cal-chip,.cal-timed-event,.cal-card-event).is-past{opacity:.45!important;filter:grayscale(20%)}
:is(.cal-chip,.cal-timed-event,.cal-card-event).is-past:hover{opacity:.8!important;filter:none}
.cal-week-view{background:none;border:1px solid var(--line);border-left:none;border-radius:0 var(--radius) var(--radius) 0;overflow:hidden}
.cal-week-header{display:grid;grid-template-columns:50px repeat(7,1fr);border-bottom:1px solid var(--line);text-align:center;padding:0;height:44px;min-height:44px;flex:none;box-sizing:border-box;overflow:hidden}
.cal-week-corner{width:50px;height:100%;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);background:none!important;border-left:none!important;padding:0;box-sizing:border-box}
.cal-col-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--tint);padding:0;color:inherit;text-decoration:none;cursor:pointer;height:100%;box-sizing:border-box}
.cal-col-header:hover{background:var(--tint-2)}
.cal-col-header.today{color:var(--acc);font-weight:700}
.cal-col-name{font-size:var(--fs-xs);text-transform:uppercase;color:var(--mute);line-height:1.1}
.cal-col-date{width:26px;height:26px;min-width:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:600;line-height:1;box-sizing:border-box} :is(.cal-col-header.today,.cal-day-col-header.today) .cal-col-date{background:var(--acc);color:var(--acc-ink)}
:is(.cal-allday-row,.cal-day-allday-row){height:38px;min-height:38px;max-height:38px;flex:none;box-sizing:border-box;overflow:hidden}
.cal-allday-row{display:grid;grid-template-columns:50px repeat(7,1fr);border-bottom:1px solid var(--line);padding:0}
:is(.cal-time-label,.cal-allday-label-col){width:50px;text-align:center;font-size:var(--fs-xs);font-weight:400;color:var(--mute);border-right:1px solid var(--line);background:none!important;border-left:none!important;display:flex;align-items:center;justify-content:center;padding:4px 0;box-sizing:border-box}
.cal-allday-cols{display:contents}
.cal-allday-cell{padding:2px 6px;border-right:1px solid var(--line);display:flex;flex-direction:row;align-items:center;gap:4px;background:var(--card);overflow:hidden;box-sizing:border-box;height:100%} .cal-allday-cell>.cal-chip{flex:1;min-width:0}
.cal-allday-cell .cal-more-wrap{flex:none;margin:0;display:flex;align-items:center}
.cal-allday-cell:last-child{border-right:none}
.cal-time-grid{flex:1;height:646px;min-height:0;display:grid;grid-template-columns:50px 1fr;position:relative;overflow:hidden;box-sizing:border-box}
.cal-time-sidebar{width:50px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:none!important;border-left:none!important}
.cal-hour-label{width:50px;height:var(--slot-h,38px);font-size:.7rem;font-weight:600;color:var(--mute);display:flex;align-items:center;justify-content:center;text-align:center;padding:0;line-height:var(--slot-h,38px);background:none!important;border-left:none!important;box-sizing:border-box;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.cal-week-cols{display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.cal-day-col{border-right:1px solid var(--line);position:relative;background:var(--card)}
.cal-day-col:last-child{border-right:none}
.cal-hour-slot{height:var(--slot-h,38px);border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);box-sizing:border-box}
.cal-hour-slot:hover{background:color-mix(in srgb,var(--acc) 3%,var(--card));cursor:pointer}
.cal-timed-event{position:absolute;left:6px;right:6px;background:color-mix(in srgb,var(--ec) 25%,var(--card-solid));border-radius:4px;padding:2px 5px;font-size:var(--fs-xs);overflow:hidden;z-index:2;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start}
.cal-timed-event:hover{filter:brightness(0.95);z-index:3}
.cal-timed-time{font-weight:600;font-size:.7rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.cal-timed-title{font-size:var(--fs-xs);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-timed-event.cal-short-ev{flex-direction:row;align-items:center;gap:4px;padding:1px 5px}
.cal-timed-event.cal-short-ev .cal-timed-title{flex:1}
.cal-day-view{background:none;border:1px solid var(--line);border-left:none;border-radius:0 var(--radius) var(--radius) 0;overflow:hidden;padding:0}
.cal-day-header{display:grid;grid-template-columns:50px 1fr;border-bottom:1px solid var(--line);text-align:center;padding:0;height:44px;min-height:44px;flex:none;box-sizing:border-box;overflow:hidden}
.cal-day-corner{width:50px;height:100%;border-right:1px solid var(--line);background:none!important;border-left:none!important;padding:0;box-sizing:border-box}
.cal-day-col-header{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;background:var(--tint);padding:0;height:100%;box-sizing:border-box}
.cal-day-col-header.today{color:var(--acc);font-weight:700}
.cal-day-allday-row{display:grid;grid-template-columns:50px 1fr;border-bottom:1px solid var(--line);padding:0;background:none;align-items:stretch;cursor:pointer}
.cal-day-allday-cell{padding:2px 6px;background:var(--card);display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow:hidden;box-sizing:border-box} .cal-day-allday-cell>.cal-chip{flex:1 1 0;min-width:0;box-sizing:border-box} .cal-day-allday-cell.is-single>.cal-chip,.cal-day-allday-cell:has(>.cal-chip:only-child)>.cal-chip{flex:1 1 100%;width:100%;max-width:100%;box-sizing:border-box}

.cal-day-schedule{flex:1;height:646px;max-height:646px;min-height:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
.cal-day-time-grid .cal-timed-event{padding:3px 8px;gap:2px}
.cal-day-time-grid .cal-timed-desc{font-size:var(--fs-xs);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-day-hour-row{display:grid;grid-template-columns:50px 1fr;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);padding:0;min-height:38px;background:none;box-sizing:border-box}
.cal-day-hour-row:hover .cal-hour-events{background:color-mix(in srgb,var(--acc) 3%,var(--card))}
.cal-hour-time{width:50px;min-height:38px;font-size:.7rem;color:var(--mute);font-weight:600;display:flex;align-items:center;justify-content:center;text-align:center;border-right:1px solid var(--line);background:none!important;border-left:none!important;padding:4px 0;box-sizing:border-box}
.cal-hour-events{padding:6px 10px;background:var(--card);display:flex;flex-direction:column;gap:6px;cursor:pointer}
.cal-card-event{padding:8px 12px;border-radius:var(--radius);background:color-mix(in srgb,var(--ec) 20%,var(--card-solid));display:flex;flex-direction:column;gap:3px;cursor:pointer}
.cal-card-top{display:flex;justify-content:space-between;align-items:center}
.cal-card-desc{font-size:var(--fs-sm);color:var(--mute)}
.cal-year-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cal-year-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.cal-year-title{font-weight:600;font-size:var(--fs-md);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.cal-year-title a{color:inherit;text-decoration:none}
.cal-year-title a:hover{color:var(--acc)}
.cal-year-table{width:100%;border-collapse:collapse;text-align:center;font-size:var(--fs-xs);line-height:1.4}
.cal-year-table th{color:var(--mute);padding:3px 0;font-weight:600}
.cal-year-table td{padding:0;position:relative;cursor:pointer;border-radius:3px}
.cal-year-day{display:block;width:100%;height:100%;padding:3px 0;color:inherit;text-decoration:none}
.cal-year-table td:hover{background:var(--tint)}
.cal-year-table td.today{font-weight:700;color:var(--acc);background:var(--tint-2)}
.cal-year-table td.has-ev::after{content:"";position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--ec,var(--acc))}
.cal-year-table td.other-m{opacity:.2;cursor:default}
.cal-year-table td.is-past{opacity:.55}

.cal-modal-panel{overflow:visible}
.cal-title-box{position:relative;display:flex;align-items:center;width:100%;margin-bottom:8px}
.cal-title-box input{padding-right:38px;font-size:var(--fs-lg);font-weight:600}
.cal-title-box .palette{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.cal-title-box .palette .pmenu{right:0;left:auto;top:calc(100% + 6px);transform:none;z-index:60;box-shadow:var(--shadow-pop);background:var(--pop-bg);border-radius:999px}
.cal-title-box .palette .pmenu::before{content:"";position:absolute;inset:-8px;z-index:-1}
.cal-datetime-row{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;flex-wrap:nowrap!important}
.cal-datetime-row>#ev_start_date{flex:1;min-width:0;width:auto}
.cal-date-wrap{flex:1;display:flex;min-width:0}
.cal-date-wrap>input{width:100%;min-width:0}
.cal-times-wrap{flex:2;display:flex;align-items:center;gap:6px;min-width:0}
.cal-times-wrap :is(input[type=time],select){flex:1;min-width:0;width:100%;padding:8px 8px;cursor:pointer}
.cal-times-wrap .mute{flex:none;color:var(--mute)}


.cal-options-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;width:100%;flex-wrap:wrap}
.cal-allday-box{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 11px;font-size:var(--fs-sm);cursor:pointer;user-select:none;height:38px;box-sizing:border-box;white-space:nowrap;flex:none}
.cal-allday-box input[type=checkbox]{margin:0;width:15px;height:15px;cursor:pointer}
.cal-options-row select{flex:1;min-width:0;height:38px;padding:8px 10px;font-size:var(--fs-sm);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-sizing:border-box}
#ev_rrule{min-width:140px;white-space:nowrap}
#ev_notify{min-width:120px;white-space:nowrap}
#ev_cat_id{min-width:100px;white-space:nowrap}
.cal-modal-actions{margin-top:10px;display:flex;align-items:center;gap:8px}

.cal-drop-target{outline:2px dashed var(--acc)!important;background:color-mix(in srgb,var(--acc) 12%,transparent)!important}
.cal-dragging{opacity:.4}
.cal-todo-chip{opacity:.92;background:color-mix(in srgb,var(--ec) 16%,var(--card-solid))}
.cal-diary-chip{opacity:.92;background:color-mix(in srgb,var(--accent,#8b5cf6) 16%,var(--card-solid));text-decoration:none!important;color:inherit!important}
.cal-diary-chip:hover{background:color-mix(in srgb,var(--accent,#8b5cf6) 26%,var(--card-solid))}
.cal-diary-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);font-size:var(--fs-xs);font-weight:600;text-decoration:none;margin-left:8px}
.cal-diary-badge:hover{background:color-mix(in srgb,var(--acc) 24%,transparent)}
.cal-diary-check{display:inline-flex;align-items:center;gap:6px;margin:4px 0 12px;font-size:var(--fs-sm);cursor:pointer}
.cal-fin-chip{opacity:.92;background:color-mix(in srgb,#10b981 16%,var(--card-solid));text-decoration:none!important;color:inherit!important}
.cal-fin-chip:hover{background:color-mix(in srgb,#10b981 26%,var(--card-solid))}
.cal-bday-chip{opacity:.92;background:color-mix(in srgb,#ec4899 16%,var(--card-solid));text-decoration:none!important;color:inherit!important}
.cal-bday-chip:hover{background:color-mix(in srgb,#ec4899 26%,var(--card-solid))}
.cal-trip-chip{opacity:.95;background:color-mix(in srgb,var(--ec,var(--acc)) 22%,var(--card-solid));text-decoration:none!important;color:inherit!important}
.cal-trip-chip:hover{background:color-mix(in srgb,var(--ec,var(--acc)) 32%,var(--card-solid))}
[data-theme-style="colorful"] .cal-trip-chip{background:var(--ec,var(--acc))!important;color:#fff!important}
[data-theme-style="colorful"] .cal-trip-chip .cal-chip-icon .icon{stroke:#fff}
.cal-chip-amt{opacity:.75;font-weight:400;margin-left:3px}

.cal-sub-item{border-bottom:1px solid var(--line);padding:10px 0}
.cal-sub-item:last-of-type{border-bottom:0}
.cal-sub-info{min-width:0;overflow:hidden}
.cal-sub-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}

/* Colorful theme: saturated, vibrant calendar events & chips */
[data-theme-style="colorful"] .cal-chip{background:var(--ec);color:#fff;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.12)}
[data-theme-style="colorful"] .cal-chip .cal-chip-time{color:rgba(255,255,255,.9)}
[data-theme-style="colorful"] .cal-chip .cal-chip-icon{color:#fff}
[data-theme-style="colorful"] .cal-chip .cal-chip-icon .icon{stroke:#fff}
[data-theme-style="colorful"] .cal-todo-chip{background:var(--ec);color:#fff}
[data-theme-style="colorful"] .cal-diary-chip{background:var(--accent,#8b5cf6)!important;color:#fff!important}
[data-theme-style="colorful"] .cal-diary-chip .cal-chip-icon .icon{stroke:#fff}
[data-theme-style="colorful"] .cal-fin-chip{background:#10b981!important;color:#fff!important}
[data-theme-style="colorful"] .cal-fin-chip .cal-chip-icon .icon{stroke:#fff}
[data-theme-style="colorful"] .cal-bday-chip{background:#ec4899!important;color:#fff!important}
[data-theme-style="colorful"] .cal-bday-chip .cal-chip-icon .icon{stroke:#fff}
[data-theme-style="colorful"] .cal-timed-event{background:var(--ec);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
[data-theme-style="colorful"] .cal-timed-event .cal-timed-time{color:rgba(255,255,255,.9)}
[data-theme-style="colorful"] .cal-timed-event .cal-timed-title{color:#fff;font-weight:600}
[data-theme-style="colorful"] .cal-card-event{background:color-mix(in srgb,var(--ec) 18%,var(--card-solid));border-left:4px solid var(--ec)}
[data-theme-style="colorful"] :is(.cal-chip,.cal-timed-event,.cal-card-event).is-past{opacity:.45!important;filter:grayscale(25%)}
[data-theme-style="colorful"] :is(.cal-chip,.cal-timed-event,.cal-card-event).is-past:hover{opacity:.8!important;filter:none}

/* Mobile Calendar Optimizations */
@media(max-width:760px){
    .cal-page{gap:12px}
    :is(.cal-grid.cal-month-grid,.cal-week-view,.cal-day-view){height:728px}
    .cal-topbar{gap:8px}
    .cal-controls{gap:8px;justify-content:space-between}
    .cal-view-switch{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .cal-view-switch .pills{gap:4px}
    .cal-view-switch .pills a{padding:6px 10px;font-size:var(--fs-sm)}
    .cal-add-btn{height:34px;padding:0 12px;font-size:var(--fs-sm);white-space:nowrap}

    /* Navigation & filter rows */
    .cal-nav-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
    .cal-filter-panel{left:auto;right:0;width:max-content;max-width:200px;padding:6px}
    .cal-nav-buttons{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
    .cal-nav-buttons .cal-nav-btn{height:32px;padding:0 10px;font-size:var(--fs-sm)}
    .cal-nav-buttons .cal-nav-arrow{width:32px;padding:0}
    .cal-title-btn{font-size:var(--fs-md);padding:3px 6px}
    .cal-jump-panel{left:0;right:auto;width:min(260px,92vw);padding:10px}

    /* Swipeable single-row pill bar for categories and overlays */
    .cal-filters{display:flex;flex-wrap:wrap;padding:2px 0;gap:6px}
    .cal-filters::-webkit-scrollbar{display:none}
    .cal-filter-btn{flex:none;white-space:nowrap;padding:5px 9px;font-size:var(--fs-xs)}

    /* Month View Mobile */
    .cal-weekdays{grid-template-columns:42px repeat(7,1fr);font-size:.66rem;letter-spacing:0;height:44px;min-height:44px}
    .cal-cw-head{width:42px;font-size:.62rem;padding-right:4px}
    .cal-month-row{grid-template-columns:42px repeat(7,1fr)}
    .cal-cw-cell{width:42px;padding:3px 4px 3px 0}
    .cal-cw-num{font-size:.62rem}
    .cal-cell{height:100%;min-height:0;max-height:100%;overflow:hidden;padding:3px 2px 2px;gap:1px;box-sizing:border-box}
    .cal-cell-events{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px}
    .cal-cell-header{height:22px;margin-bottom:1px;display:flex;align-items:center;justify-content:center}
    .cal-day-num{width:20px;height:20px;min-width:20px;max-width:20px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;line-height:1;margin:0 auto}
    .cal-chip{height:17px;min-height:17px;max-height:17px;line-height:17px;flex:none;font-size:.62rem;padding:0 3px;border-radius:3px;gap:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
    .cal-chip-icon .icon{width:10px;height:10px}
    .cal-month-grid .cal-chip-time{display:none}

    /* Week View Mobile: Same clean transparent sidebar style as Day view */
    .cal-week-view{position:relative}
    .cal-week-header{grid-template-columns:42px repeat(7,1fr);height:44px;min-height:44px}
    .cal-week-corner{width:42px;background:none!important}
    .cal-allday-row{grid-template-columns:42px repeat(7,1fr)}
    .cal-time-label{width:42px;background:none!important;font-size:.65rem}
    .cal-time-grid{grid-template-columns:42px 1fr}
    .cal-time-sidebar{width:42px;background:none!important}
    .cal-hour-label{width:42px;background:none!important;font-size:.65rem}
    .cal-timed-event{left:2px;right:2px}
    .cal-timed-event.cal-short-ev{flex-direction:column;align-items:flex-start;gap:0;padding:1px 4px}
    .cal-timed-event.cal-short-ev .cal-timed-time{font-size:.62rem;line-height:1.1}
    .cal-timed-event.cal-short-ev .cal-timed-title{font-size:.68rem;line-height:1.1}

    /* Day View Mobile */
    .cal-day-header{grid-template-columns:42px 1fr;height:44px;min-height:44px}
    .cal-day-corner{width:42px}
    .cal-day-allday-row{grid-template-columns:42px 1fr}
    :is(.cal-allday-cell,.cal-day-allday-cell){padding:2px 2px}
    .cal-allday-label-col{width:42px;font-size:.65rem}
    .cal-day-hour-row{grid-template-columns:42px 1fr}
    .cal-hour-time{width:42px;font-size:.65rem}
    .cal-hour-events{padding:4px 6px}
    .cal-card-event{padding:6px 10px}

    /* Event Modal Bottom Sheet */

    .cal-modal-panel{overflow-y:auto;-webkit-overflow-scrolling:touch}
    .cal-datetime-row{flex-wrap:wrap!important;gap:8px}
    .cal-datetime-row>#ev_start_date{flex:1 1 calc(50% - 4px);min-width:120px}
    .cal-date-wrap{flex:1 1 calc(50% - 4px);min-width:120px}
    .cal-times-wrap{flex:1 1 100%;width:100%}
    .cal-options-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .cal-allday-box{grid-column:1 / -1;width:100%;justify-content:flex-start}
    #ev_rrule,#ev_notify,#ev_cat_id{min-width:0!important;width:100%!important}
    #ev_until_wrap{grid-column:1 / -1;width:100%}
    #ev_until_wrap input{width:100%;max-width:none}
}

/* Very Small Phones (<=480px): Space for calendar week in month view */
@media(max-width:480px){
    .cal-weekdays{grid-template-columns:42px repeat(7,1fr)}
    .cal-cw-head{width:42px;padding-right:3px;font-size:.56rem}
    .cal-month-row{grid-template-columns:42px repeat(7,1fr)}
    .cal-cw-cell{width:42px;padding:2px 3px 2px 0}
    .cal-cw-num{font-size:.56rem}
    .cal-cell{height:100%;min-height:0;max-height:100%;overflow:hidden;padding:1px 1px;box-sizing:border-box}
    .cal-day-num{font-size:.7rem;padding:1px 2px}
    .cal-chip{height:16px;min-height:16px;max-height:16px;line-height:16px;flex:none;font-size:.58rem;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
}