/* pinn. – Mobile mode (narrow screens) (css/mobil.css)
   Part of the styles that used to be inline in index.html (step 3 of splitting index.html). Plain CSS, no build
   step: linked in the head of index.html at exactly the place where the <style> block stood, so the order of
   the rules - and with it the look of the app - is unchanged.
   Contents: body.mobile-mode rules - app frame and sidebar on the iPhone, calendar on the phone (switch,
   week/month view, school holidays and waste collection, own calendars, calendar settings), tasks/household
   switch, smart home buttons, child lock, GitHub & support, cash boxes, finance notice box, shopping lists as
   single sheets and planned shopping, the date heading on small screens.
   Utility classes (Tailwind) live in vendor/pinn.css, not here. */

/* ---------- Mobile mode (narrow screens, e.g. iPhone) ---------- */
body.mobile-mode #clock { display: none !important; }
/* As an installed PWA, iOS sometimes calculates "100dvh" wrongly without the bottom
   safe area (home indicator) - #appRoot was then too short by exactly that height
   and the background of <html> showed through as a bar at the bottom. Fixed positioning
   straight at the real screen edges ("inset: 0") bypasses this vh/dvh calculation completely
   and is therefore more reliable than any vh/dvh unit. */
#appRoot {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto;
  height: 100%;
}
/* Sidebar: move menu items below the status bar (clock), footer above the
   home indicator. */
#sidebar > nav {
  padding-top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* When opening, the sidebar pushes the page out of the screen to the right instead of squeezing it:
   #appShell always keeps the full screen width and does not shrink.
   #appRoot (overflow: hidden) simply clips the part sticking out on the right. */
#appShell {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}
/* Calendar on the phone: instead of ‹ › at the top a day/week/month/year switch in its own row; back/forward by swiping */
body.mobile-mode #prevPeriod, body.mobile-mode #nextPeriod { display: none !important; }
body.mobile-mode #calendarTopRow { flex-wrap: wrap; row-gap: 0.6rem; }
body.mobile-mode #calendarTopRight { display: contents; }
body.mobile-mode #calendarModeToggle { order: 10; flex: 1 0 100%; width: 100%; }
body.mobile-mode #calendarModeToggle .mode-btn { flex: 1 1 0; text-align: center; padding: 0.45rem 0; font-size: 0.8rem; }
@keyframes calSwipeL { from { opacity: .35; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes calSwipeR { from { opacity: .35; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
#calendarBody.cal-swipe-l { animation: calSwipeL .22s ease-out; }
#calendarBody.cal-swipe-r { animation: calSwipeR .22s ease-out; }
/* Week view on the phone: days below each other */
.cal-agenda { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 1rem 1.25rem; }
.cal-agenda-day { border-radius: 14px; background: rgba(255,255,255,0.75); border: 1px solid rgba(37,35,31,0.08); overflow: hidden; }
.cal-agenda-day.is-today { border-color: color-mix(in srgb, var(--c-pine) 40%, transparent); }
.cal-agenda-head { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; text-align: left; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cal-agenda-num { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; font-weight: 600; font-size: 0.95rem; background: rgba(37,35,31,0.06); flex-shrink: 0; }
.cal-agenda-day.is-today .cal-agenda-num { background: var(--c-pine); color: #fff; }
.cal-agenda-wd { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; line-height: 1.15; }
.cal-agenda-wd small { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.5; }
.cal-agenda-badge { font-size: 0.65rem; font-weight: 600; color: var(--c-pine); text-transform: uppercase; letter-spacing: 0.05em; }
.cal-agenda-items { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.75rem 0.65rem 3.35rem; }
.cal-agenda-ev { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 9px; border-left: 3px solid; font-size: 0.8rem; min-width: 0; -webkit-user-select: none; user-select: none; }
.cal-agenda-ev.is-dim { opacity: 0.3; }
.cal-agenda-time { flex-shrink: 0; font-size: 0.68rem; opacity: 0.6; min-width: 4.6rem; }
.cal-agenda-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cal-agenda-meal { font-size: 0.75rem; padding: 0.3rem 0.55rem; border-radius: 9px; background: color-mix(in srgb, var(--c-mustard) 16%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agenda-empty { font-size: 0.72rem; font-style: italic; opacity: 0.35; }
html.dark .cal-agenda-day { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
html.dark .cal-agenda-num { background: rgba(255,255,255,0.1); }
/* Month view on the phone: coloured dots instead of titles */
.month-cell.cal-month-cell-m { min-height: 54px !important; padding: 0.3rem !important; }
.cal-month-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.cal-month-dots i { width: 7px; height: 7px; border-radius: 999px; display: block; }
.cal-month-dots em { font-style: normal; font-size: 9px; opacity: 0.5; line-height: 1; }
/* School holidays and waste collection: smaller than normal events and always behind them */
.cal-minor { font-size: 9px !important; line-height: 1.2 !important; padding-top: 1px !important; padding-bottom: 1px !important; border-radius: 5px !important; }
.cal-minor-row { font-size: 11px !important; line-height: 1.25 !important; padding: 2px 8px !important; border-radius: 7px !important; }
.cal-agenda-ev.cal-minor-ag { padding: 0.12rem 0.5rem; font-size: 0.68rem; border-left-width: 2px; border-radius: 7px; }
.cal-agenda-ev.cal-minor-ag .cal-agenda-time { font-size: 0.6rem; }
.cal-agenda-ev.cal-minor-ag .cal-agenda-title { font-weight: 400; }
.cal-minor-wl { padding-top: 1px !important; padding-bottom: 1px !important; border-radius: 6px !important; }
.cal-minor-wl > div:first-child { display: none; }
.cal-minor-wl > div:last-child { font-size: 9px !important; font-family: inherit !important; }
.cal-minor-card { border-radius: 9px !important; }
.cal-minor-card > div { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
.cal-minor-card .text-base { font-size: 0.75rem !important; line-height: 1.2 !important; font-family: inherit !important; }
.cal-minor-card .text-\[11px\] { font-size: 9px !important; }
.cal-month-dots i.minor { width: 4px; height: 4px; }
/* Own calendars (settings → calendar) */
.pinn-cal-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.25rem; }
.pinn-cal-list:empty { display: none; }
.pinn-cal-item { display: flex; align-items: center; gap: 0.6rem; border-radius: 12px; border: 1px solid rgba(37,35,31,0.1); background: #fff; padding: 0.5rem 0.7rem; }
.pinn-cal-item .pc-dot { width: 0.8rem; height: 0.8rem; border-radius: 999px; flex-shrink: 0; }
.pinn-cal-item .pc-txt { flex: 1; min-width: 0; font-size: 0.85rem; }
.pinn-cal-item .pc-txt b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinn-cal-item .pc-txt small { display: block; font-size: 0.7rem; opacity: 0.55; }
.pinn-cal-item .pc-edit { font-size: 0.75rem; color: var(--c-pine); font-weight: 500; flex-shrink: 0; padding: 0.25rem 0.4rem; }
.pinn-cal-colors { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pinn-cal-colors button { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(37,35,31,0.15); }
.pinn-cal-colors button.on { box-shadow: 0 0 0 2px var(--c-ink, #25231F); }
.pinn-cal-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; padding: 0.25rem; border-radius: 12px; background: rgba(37,35,31,0.06); }
.pinn-cal-seg button { padding: 0.5rem 0.4rem; border-radius: 9px; font-size: 0.8rem; color: rgba(37,35,31,0.65); }
.pinn-cal-seg button.on { background: #fff; color: var(--c-pine); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.pinn-cal-seg.locked { opacity: 0.55; pointer-events: none; }
.pinn-cal-seg.three { grid-template-columns: repeat(3, 1fr); }
.pinn-cal-seg button:disabled { opacity: 0.4; }
.pinn-cal-src { border-radius: 12px; border: 1px solid rgba(37,35,31,0.1); background: rgba(37,35,31,0.03); padding: 0.65rem 0.75rem; font-size: 0.8rem; }
.pinn-cal-src:empty { display: none; }
.pinn-cal-src p { margin: 0 0 0.45rem; line-height: 1.4; }
.pinn-cal-src p:last-child { margin-bottom: 0; }
.pinn-cal-src .pcs-acc { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pinn-cal-src .pcs-acc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pinn-cal-src .pcs-link { font-size: 0.75rem; color: var(--c-pine); font-weight: 500; flex-shrink: 0; }
.pinn-cal-src .pcs-link.red { color: #DC2626; }
.pinn-cal-src input, .pinn-cal-src select { width: 100%; border-radius: 9px; border: 1px solid rgba(37,35,31,0.15); padding: 0.45rem 0.6rem; font-size: 0.85rem; background: #fff; margin-bottom: 0.45rem; }
.pinn-cal-src .pcs-btn { width: 100%; padding: 0.5rem; border-radius: 9px; background: var(--c-pine); color: #fff; font-weight: 500; font-size: 0.8rem; }
.pinn-cal-src .pcs-btn:disabled { opacity: 0.6; }
.pinn-cal-src small { display: block; font-size: 0.7rem; opacity: 0.6; line-height: 1.35; }
.pinn-cal-src .pcs-err { color: #DC2626; font-size: 0.75rem; }
.pinn-cal-item .pc-txt small.err { color: #DC2626; opacity: 1; }
html.dark .pinn-cal-src { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
html.dark .pinn-cal-src input, html.dark .pinn-cal-src select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: inherit; }
html.dark .pinn-cal-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
html.dark .pinn-cal-seg { background: rgba(255,255,255,0.06); }
html.dark .pinn-cal-seg button { color: rgba(255,255,255,0.7); }
html.dark .pinn-cal-seg button.on { background: rgba(255,255,255,0.12); color: #fff; }
html.dark .pinn-cal-colors button { border-color: #222; }
html.dark .pinn-cal-colors button.on { box-shadow: 0 0 0 2px #fff; }
/* Calendar settings: accounts, checkboxes "for me" / "family", family calendar as a note */
.pinn-cal-accs { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.pinn-cal-accs:empty { display: none; }
.pca-row { display: flex; align-items: center; gap: 0.6rem; border-radius: 12px; background: rgba(37,35,31,0.04); padding: 0.45rem 0.7rem; }
.pca-row.err { background: rgba(220,38,38,0.06); }
.pca-ico { font-size: 1rem; flex-shrink: 0; }
.pca-txt { flex: 1; min-width: 0; font-size: 0.8rem; }
.pca-txt b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pca-txt small { display: block; font-size: 0.68rem; opacity: 0.55; }
.pca-row.err .pca-txt small { color: #DC2626; opacity: 1; }
.pca-row .pc-edit { font-size: 0.75rem; color: var(--c-pine); font-weight: 500; flex-shrink: 0; padding: 0.25rem 0.4rem; }
.pinn-cal-list:not(:empty) + .pinn-cal-fam, .pinn-cal-accs + .pinn-cal-list:not(:empty) { margin-top: 0.4rem; }
.pinn-cal-fam { border-radius: 12px; padding: 0.55rem 0.75rem; margin: 0.25rem 0 0.6rem; background: color-mix(in srgb, var(--c-pine) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-pine) 18%, transparent); }
.pinn-cal-fam .pcf-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; margin-bottom: 0.35rem; }
.pinn-cal-fam .pcf-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0; }
.pinn-cal-fam .pc-dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; flex-shrink: 0; }
.pinn-cal-fam .pcf-txt { flex: 1; min-width: 0; font-size: 0.78rem; }
.pinn-cal-fam .pcf-txt b { font-weight: 500; }
.pinn-cal-fam .pcf-txt small { display: block; font-size: 0.68rem; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcs-tbl { display: flex; flex-direction: column; }
.pcs-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; align-items: center; gap: 0.25rem; padding: 0.45rem 0; border-top: 1px solid rgba(37,35,31,0.07); }
.pcs-row.head { border-top: 0; padding: 0 0 0.3rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.5; }
.pcs-row.head span:not(:first-child) { text-align: center; }
.pcs-name { min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcs-name small { display: inline; margin-left: 0.35rem; font-size: 0.65rem; opacity: 0.5; }
.pcs-chk { justify-self: center; width: 1.45rem; height: 1.45rem; border-radius: 7px; border: 1.5px solid rgba(37,35,31,0.25); background: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.pcs-chk.on { background: var(--c-pine); border-color: var(--c-pine); }
.pcs-chk.on::after { content: ''; width: 0.38rem; height: 0.72rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.pcs-chk:disabled { opacity: 0.4; }
.pinn-cal-vis .pcs-row:not(.head) { border-top: 0; }
.pinn-cal-src .pcs-ok { color: var(--c-pine); font-size: 0.75rem; }
.pinn-cal-src .pcs-code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 0.68rem; word-break: break-all; -webkit-user-select: all; user-select: all; background: rgba(37,35,31,0.05); border-radius: 7px; padding: 0.35rem 0.5rem; margin-bottom: 0.4rem; }
html.dark .pca-row { background: rgba(255,255,255,0.05); }
html.dark .pinn-cal-fam { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
html.dark .pcs-row { border-top-color: rgba(255,255,255,0.08); }
html.dark .pcs-chk { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
html.dark .pcs-chk.on { background: var(--c-pine); border-color: var(--c-pine); }
html.dark .pinn-cal-src .pcs-code { background: rgba(255,255,255,0.06); }

/* Tasks | household switch */
.task-kind-tabs.is-off { display: none; }

/* Smart home (household): start buttons on tasks, selection chips, question after the shortcut */
.sh-run { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--c-pine); color: var(--c-pine); background: transparent; font-size: 0.75rem; font-weight: 500;
  line-height: 1.2; transition: background-color .15s; -webkit-tap-highlight-color: transparent; }
.sh-run:hover, .sh-run:active { background: color-mix(in srgb, var(--c-pine) 10%, transparent); }
.sh-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid rgba(127,127,127,0.35); font-size: 0.75rem; opacity: 0.6; transition: opacity .15s, background-color .15s; }
.sh-chip:hover { opacity: 1; }
.sh-chip.active { opacity: 1; background: var(--c-pine); border-color: var(--c-pine); color: #fff; }
.sh-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; border: 1px solid rgba(127,127,127,0.3); display: grid; place-items: center; font-size: 1.1rem; }
.sh-icon.active { border-color: var(--c-pine); background: color-mix(in srgb, var(--c-pine) 12%, transparent); }
.sh-action-row { border: 1px solid rgba(127,127,127,0.25); border-radius: 0.75rem; padding: 0.5rem; }
.sh-missing { color: #B45309; }
#smartDonePrompt { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); transform: translate(-50%, 16px); z-index: 9998;
  width: min(26rem, calc(100vw - 2rem)); background: #25231F; color: #fff; border-radius: 1rem; padding: 0.85rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity: 0; transition: opacity .2s, transform .2s; }
#smartDonePrompt.show { opacity: 1; transform: translate(-50%, 0); }
#smartDonePrompt .sdp-btns { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; }
#smartDonePrompt button { padding: 0.4rem 0.9rem; border-radius: 0.6rem; font-size: 0.8rem; }
#smartDonePrompt .sdp-yes { background: #fff; color: #25231F; font-weight: 600; }
#smartDonePrompt .sdp-no { color: rgba(255,255,255,0.7); }

/* Child lock: hide delete */
body.child-lock [id^="delete"], body.child-lock [id$="DeleteBtn"], body.child-lock #fzdDelete, body.child-lock #fzlDelete, body.child-lock #fzvDelete,
body.child-lock .del-meal, body.child-lock .del-planned-meal, body.child-lock .del-task, body.child-lock .del-settings-member, body.child-lock .rule-delete,
body.child-lock .kid-edit-del, body.child-lock .ma-del-family, body.child-lock .ma-del-user, body.child-lock .pw-opt-del, body.child-lock .pw-msg-del,
body.child-lock .ls-tpl-del, body.child-lock .doc-tile-del, body.child-lock [data-action="delete"], body.child-lock [data-pw-act="delete"],
body.child-lock [data-doc-del], body.child-lock [data-deltpl] { display: none !important; }
#childLockToast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); transform: translate(-50%, 12px); z-index: 9999;
  background: #25231F; color: #fff; font-size: 0.8rem; padding: 0.6rem 1rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 2rem); text-align: center; }
#childLockToast.show { opacity: 1; transform: translate(-50%, 0); }
/* Child lock: settings view-only (content visible, but without function) */
.child-lock-only { display: none; }
body.child-lock .child-lock-only { display: block; }
body.child-lock #settingsView .set-body { pointer-events: none; opacity: .5; user-select: none; -webkit-user-select: none; }
/* GitHub & support: subtle, hidden for child profiles */
body.child-lock #settingsGithubAccordion { display: none; }
.gh-heart { color: #db61a2; font-size: 0.95em; line-height: 1; }
.gh-ext { font-size: 0.75em; opacity: 0.5; }

.doc-vis-btn.active { background: var(--c-pine); color: #fff; }
/* Cash boxes (finance areas) */
.kasse-sub { display: flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 1px; padding: 1px 0; font-size: 12px; line-height: 1.3; color: rgba(37,35,31,0.55); transition: color .15s; }
.kasse-sub:hover { color: var(--c-pine); }
/* Finances without a cash box / without a depot: large notice box */
.fin-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; border-radius: 22px; border: 2px dashed rgba(37,35,31,0.15); background: rgba(255,255,255,0.75); min-height: 52vh; justify-content: center; }
.fin-empty-icon { font-size: 52px; line-height: 1; margin-bottom: 4px; }
.fin-empty-title { font-family: var(--font-serif, Georgia, serif); font-size: 22px; line-height: 1.25; }
.fin-empty-text { max-width: 26rem; font-size: 14px; line-height: 1.5; color: rgba(37,35,31,0.58); }
.fin-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.fin-empty-btn { padding: 11px 20px; border-radius: 14px; background: var(--c-pine); color: #fff; font-size: 14px; font-weight: 500; transition: opacity .15s; }
.fin-empty-btn:hover { opacity: .9; }
.fin-empty-hint { font-size: 11px; color: rgba(37,35,31,0.42); max-width: 24rem; line-height: 1.45; margin-top: 6px; }
.dark .fin-empty { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); }
.dark .fin-empty-text { color: rgba(255,255,255,0.6); }
.dark .fin-empty-hint { color: rgba(255,255,255,0.45); }
.fin-diag { width: 100%; max-width: 34rem; max-height: 40vh; overflow: auto; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(37,35,31,0.05); text-align: left; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; color: rgba(37,35,31,0.8); }
.dark .fin-diag { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.kasse-quick-btn { padding: 2px 9px; border-radius: 8px; border: 1px solid rgba(37,35,31,0.15); font-size: 11px; color: rgba(37,35,31,0.6); transition: color .15s, border-color .15s; }
.kasse-quick-btn:hover { color: var(--c-pine); border-color: var(--c-pine); }
.dark .kasse-quick-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.65); }
.kasse-sub .kasse-sub-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; background: var(--k, var(--c-pine)); }
.dark .kasse-sub { color: rgba(255,255,255,0.55); }
.kasse-dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; line-height: 1; background: color-mix(in srgb, var(--k, var(--c-pine)) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k, var(--c-pine)) 55%, transparent); }
.kasse-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1px solid rgba(37,35,31,0.1); background: #fff; transition: border-color .15s; }
.kasse-row.active { border-color: var(--c-pine); box-shadow: 0 0 0 1px var(--c-pine); }
.kasse-row .kasse-dot { width: 42px; height: 42px; font-size: 20px; }
.kasse-avs { display: flex; }
.kasse-avs > span { margin-left: -6px; border-color: #fff !important; }
.kasse-avs > span:first-child { margin-left: 0; }
.kasse-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; border: 1px solid rgba(37,35,31,0.15); font-size: 12px; opacity: .45; transition: opacity .15s, border-color .15s, background .15s; }
.kasse-chip.on { opacity: 1; border-color: var(--c-pine); background: color-mix(in srgb, var(--c-pine) 8%, transparent); }
.kasse-icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(37,35,31,0.12); display: grid; place-items: center; font-size: 18px; }
.kasse-icon-btn.active { border-color: var(--c-pine); box-shadow: 0 0 0 1px var(--c-pine); }
.kasse-color-btn { width: 28px; height: 28px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(37,35,31,0.15); }
.kasse-color-btn.active { box-shadow: 0 0 0 2px var(--c-pine); }
.dark .kasse-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.dark .kasse-avs > span { border-color: #1f1f1d !important; }
.member-lock-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.75rem; color: rgba(37,35,31,0.65); cursor: pointer; width: fit-content; }
.member-lock-row .ov-set-switch { transform: scale(0.8); transform-origin: left center; margin-right: -0.4rem; }
.member-lock-row.is-disabled { opacity: 0.45; cursor: default; }
html.dark .member-lock-row { color: rgba(237,234,226,0.7); }
/* Keep shopping lists on the phone visibly narrower than the screen instead of simply
   filling the whole available width - should look like a single sheet of paper. */
/* Planned shopping: several lists merged - each list as its own, colour-marked note */
.shopping-combined-section { position: relative; }
.shopping-combined-head { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem .55rem .9rem; border-radius: .9rem .9rem 0 0; background: color-mix(in srgb, var(--list-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--list-color) 35%, transparent); border-bottom: 0; }
.shopping-combined-paper { border-top: 4px solid var(--list-color) !important; border-left: 1px solid color-mix(in srgb, var(--list-color) 35%, transparent) !important; border-right: 1px solid color-mix(in srgb, var(--list-color) 35%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--list-color) 35%, transparent) !important; border-radius: 0 0 .9rem .9rem; background: color-mix(in srgb, var(--list-color) 4%, transparent); }
.shopping-combined-logos { display:flex; align-items:center; }
.shopping-combined-logos > * + * { margin-left: -10px; }
.shopping-combined-logos > * { box-shadow: 0 0 0 2px #fff; border-radius: 9px; }
html.dark .shopping-combined-logos > * { box-shadow: 0 0 0 2px #1f1e1b; }
.task-card-shopping { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.task-card-shopping:active { transform: scale(.995); }
.task-shopping-open { display:inline-flex; align-items:center; gap:2px; font-size:11px; line-height:1; padding:4px 8px; border-radius:999px; background: color-mix(in srgb, var(--c-pine) 12%, transparent); color: var(--c-pine); font-weight:600; white-space:nowrap; }
/* On the phone there is little room between the arrow/today buttons and clipboard/+ - the
   date heading stays bold (font-serif is already semi-bold), but gets smaller, so that it
   is not cut off with "...". */
body.mobile-mode #periodLabel { font-size: 0.9375rem; }