*,*::before,*::after{box-sizing:border-box} :root{ --bg:#181A1F; --surf:#202329; --txt:#F3F1EB; --txt2:#9A988F; --txt3:#6E6C65; --hair:rgba(243,241,235,.09); --hair2:rgba(243,241,235,.05); --amber:#F2A338; --amber-d:#C9801A; --ink:#181A1F; --accent:#F2A338; --danger:#C0564B; --radius:16px; --success:#6FCB97; --warning:#E0A24A; --surface:var(--surf); --surface2:var(--hair2); --border:var(--hair); --text:var(--txt); --muted:var(--txt2); --brand:var(--amber); --brand-ink:var(--ink); } html{color-scheme:dark} /* v146: Light theme overrides. Paper ground, charcoal ink — inverse of the * brand-book dark palette but identical amber accent (brand contrast keeps * working on both grounds). Applied when the user explicitly picks light, * OR when their preference is 'system' AND the OS reports light scheme. */ html[data-theme="light"]{ --bg:#F3F1EB; --surf:#FBFAF6; --txt:#181A1F; --txt2:#6F6E68; --txt3:#9A988F; --hair:#E7E3DA; --hair2:#EEEBE3; --success:#1F9D63; --warning:#B5781F; color-scheme:light; } @media (prefers-color-scheme: light){ html[data-theme="system"]{ --bg:#F3F1EB; --surf:#FBFAF6; --txt:#181A1F; --txt2:#6F6E68; --txt3:#9A988F; --hair:#E7E3DA; --hair2:#EEEBE3; --success:#1F9D63; --warning:#B5781F; color-scheme:light; } } /* Spots with hardcoded charcoal-rgba backgrounds (appbar, tabbar, cookiebar, * version-chip) need a light counterpart so they don't render as dark bands * on the paper ground. We override the bg only; the var()-driven text + border * already adapt. Cookiebar uses higher alpha than appbar so the legal copy * stays legible against page content scrolling underneath. */ html[data-theme="light"] .appbar, html[data-theme="light"] .tabbar{background:rgba(250,248,242,.88)} html[data-theme="light"] .cookiebar{background:rgba(250,248,242,.97)} html[data-theme="light"] .version-chip{background:rgba(255,255,255,.92)} @media (prefers-color-scheme: light){ html[data-theme="system"] .appbar, html[data-theme="system"] .tabbar{background:rgba(250,248,242,.88)} html[data-theme="system"] .cookiebar{background:rgba(250,248,242,.97)} html[data-theme="system"] .version-chip{background:rgba(255,255,255,.92)} } /* Brand Book v1.0: Hanken Grotesk is the working typeface. Line-height * lifted from 1.5 → 1.6 to match the body spec on the Type page. */ body{margin:0 auto;max-width:640px;padding:0 16px;background:var(--bg);color:var(--text); font-family:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01"} /* Admin pages (renderAdmin + admin/whatsapp + admin/support) opt out of * the 640px mobile-cap so they get a desktop-bruikbare layout. Up to * 1023px the mobile single-column flow stays identical to non-admin * pages; from 1024px+ the canvas verbreedt en de TOC-sidebar wordt * geactiveerd. Renderers stempelen `class="adminbody"` op via * de bodyClass-optie van page(). */ body.adminbody{max-width:min(1400px, 96vw)} @media (min-width:1024px){ body.adminbody{padding-left:240px} body.adminbody h1{font-size:1.85rem;margin:1.2rem 0 .25rem} body.adminbody h2{font-size:1.25rem;margin:1.4rem 0 .5rem} } /* Sticky table-of-contents — desktop only. Lives left of the main * content; intersection-observer in renderAdmin updates the .active * class so the user always knows where they are. */ .admin-toc{display:none} @media (min-width:1024px){ .admin-toc{display:block;position:fixed; top:calc(78px + env(safe-area-inset-top,0)); left:max(12px, calc((100vw - 1400px) / 2 + 12px)); width:210px;max-height:calc(100vh - 110px); overflow-y:auto;padding:8px 6px 12px; font-size:.85rem;border-right:1px solid var(--border); scrollbar-width:thin} .admin-toc h3{font-size:.66rem;color:var(--muted); text-transform:uppercase;letter-spacing:.08em; margin:.4rem .5rem .35rem;font-weight:700} .admin-toc a{display:block;padding:.32rem .55rem;margin:1px 0; color:var(--muted);text-decoration:none;font-size:.82rem; border-left:2px solid transparent;border-radius:0 4px 4px 0; line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; transition:color .15s, background .15s, border-color .15s} .admin-toc a:hover{color:var(--text);background:var(--surface)} .admin-toc a.active{color:var(--brand);border-left-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, transparent)} /* v260: categorie-links (Overzicht/Communicatie/…) zwaarder dan de * sectie-ankers; sub-pagina's en sectie-ankers springen in. */ .admin-toc .aview{font-weight:700;color:var(--text);font-size:.86rem;margin-top:3px} .admin-toc .aview.active{color:var(--brand);border-left-color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, transparent)} .admin-toc .asub{padding-left:1.15rem;font-size:.78rem} .admin-toc .admin-toc-sections a{padding-left:1.15rem;font-size:.78rem} } /* v260: mobiele admin-navigatie — horizontale pill-row boven de pagina. * Desktop (>=1024) gebruikt de sidebar, dus daar verdwijnt de row. */ .admin-subnav{display:flex;gap:.45rem;overflow-x:auto;padding:.55rem 0 .25rem; -webkit-overflow-scrolling:touch;scrollbar-width:none} .admin-subnav::-webkit-scrollbar{display:none} .admin-subnav a{flex:0 0 auto;padding:.3rem .85rem;border-radius:999px; border:1px solid var(--border);color:var(--muted);text-decoration:none; font-size:.82rem;font-weight:600;white-space:nowrap} .admin-subnav a.active{color:var(--brand);border-color:rgba(242,163,56,.55); background:rgba(242,163,56,.10)} @media (min-width:1024px){.admin-subnav{display:none}} /* v269: groepskoppen tussen de admin-accordions ("Actie nodig", "Inzicht", * "Configuratie", …) — visuele clustering op taakfrequentie. */ .agroup{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em; color:var(--muted);font-weight:700;margin:1.5rem 0 .45rem;line-height:1} .agroup:first-of-type{margin-top:.8rem} /* Quick-link knoppen (Support/WhatsApp/Backups) alleen op mobiel — * desktop heeft dezelfde links al in de sidebar. */ @media (min-width:1024px){.admin-quicklinks{display:none}} /* v278: Cmd-K globale zoek-overlay (admin). De [hidden]-regel wint van de * flex-display zodat het attribuut blijft werken. */ .cmdk{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90; display:flex;align-items:flex-start;justify-content:center;padding:10vh 1rem 0} .cmdk[hidden]{display:none} .cmdk-box{width:min(560px,100%);background:var(--surface);border:1px solid var(--border); border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .cmdk-box input{width:100%;border:none;background:transparent;color:var(--text); padding:.85rem 1rem;font-size:1rem;outline:none;border-bottom:1px solid var(--border)} .cmdk-results{max-height:50vh;overflow-y:auto} .cmdk-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em; color:var(--muted);font-weight:700;padding:.55rem .9rem .2rem} .cmdk-results a{display:block;padding:.45rem .9rem;color:var(--text); text-decoration:none;font-size:.9rem} .cmdk-results a span{display:block;font-size:.75rem;color:var(--muted)} .cmdk-results a:hover{background:color-mix(in srgb, var(--brand) 9%, transparent)} .cmdk-hint{padding:.7rem .9rem;font-size:.85rem;color:var(--muted);margin:0} /* Zoek-trigger: knop bovenin de sidebar (desktop); op mobiel een 🔎-pill * in de subnav (erft .admin-subnav a-styling). */ .cmdk-trigger{display:none} @media (min-width:1024px){ .cmdk-trigger{display:block;width:calc(100% - 12px);margin:0 6px 8px; text-align:left;font-size:.8rem;padding:.4rem .55rem;border-radius:8px; background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer} .cmdk-trigger:hover{color:var(--text)} .cmdk-trigger kbd{float:right;font-size:.68rem;border:1px solid var(--border); border-radius:4px;padding:0 .3rem;color:var(--muted);font-family:inherit} } /* Headlines — weight 800, tight tracking -2.5%, line-height 1.02 per the * brand book Type spec. Punctuation amber-ification happens server-side * via a tiny helper (see amberHead in renderer). */ h1,h2{font-weight:800;letter-spacing:-0.025em;line-height:1.02} h1{font-size:1.75rem;margin:1rem 0 .75rem} h2{font-size:1.35rem;margin:1.2rem 0 .6rem} /* Wordmark — only EVER used for the BeepSweep logotype. Space Grotesk is * the display cut; Beep is bold, Sweep is regular, kerning is tight. */ .wm{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:400; letter-spacing:-0.035em;line-height:1} .wm b{font-weight:700} /* Reserve room for the fixed appbar + iOS safe-area notch. No bottom * tabbar anymore — primary nav lives in the appbar's gear dropdown. */ body:has(.appbar){ padding-top:calc(62px + env(safe-area-inset-top,0)); padding-bottom:env(safe-area-inset-bottom,0); } h1{font-size:1.35rem;margin:1rem 0 .15rem} h2{font-size:1.05rem;margin:1.6rem 0 .5rem} p{margin:.4rem 0} a{color:var(--brand)} .muted,.hint{color:var(--muted)} .hint{font-size:.85rem} .empty{color:var(--muted);text-align:center;padding:2.5rem 0} .appbar{position:fixed;top:0;left:0;right:0;height:54px;display:flex;align-items:center; justify-content:space-between;padding:0 16px;background:rgba(22,27,34,.85); backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:20; /* Promote to its own GPU layer + extra padding-top for the iOS safe-area * (notch / Dynamic Island). Without translateZ(0) iOS Safari sometimes * "slides" the fixed bar a few pixels during a fast scroll because it's * still on the main paint thread. With it the bar is composited and * stays put while the content scrolls under it. */ transform:translateZ(0);-webkit-transform:translateZ(0); will-change:transform;-webkit-backface-visibility:hidden; padding-top:env(safe-area-inset-top,0)} /* Brand: Embrace mark (two rounded arms cradling an amber dot) + * BeepSweep wordmark in Space Grotesk. Replaces the legacy green square. * The mark form inherits currentColor (paper on dark / ink on light), * the held dot is locked to --brand (amber). Single-colour, no shadows. */ .brand{display:flex;align-items:center;gap:.55rem;color:var(--text);text-decoration:none} .brand .dot,.authbrand .dot{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0} .brand .dot{width:22px;height:22px} .brand .dot svg,.authbrand .dot svg{width:100%;height:100%;display:block} .brand .dot svg .form,.authbrand .dot svg .form{stroke:currentColor;fill:none;stroke-width:9.5;stroke-linecap:round;stroke-linejoin:round} .brand .dot svg .held,.authbrand .dot svg .held{fill:var(--brand);stroke:none} /* The appbar wordmark — locked to Space Grotesk, Beep bold, Sweep regular. * Scoped to .appbar so the .wm class in the larger .authbrand lockup * inherits its parent's font-size (1.85rem) instead of being shrunk to 1.1. */ .appbar .brand .wm{font-size:1.1rem} /* Pulse on the appbar held-dot only — the embrace stays still, only the * caught dot pulses in NL beltoon cadans ("brrr-brrr" + 4s pause). Animating * the SVG circle's r/opacity instead of the whole container, so the glow * follows the round dot, not the square box. */ .appbar .brand .dot svg .held{animation:beltoonPulse 5s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box;will-change:transform,opacity} @keyframes beltoonPulse{ 0% {transform:scale(1); opacity:.9} 4% {transform:scale(1.22);opacity:1} 10% {transform:scale(1); opacity:.9} 14% {transform:scale(1.22);opacity:1} 20% {transform:scale(1); opacity:.9} 100%{transform:scale(1); opacity:.9} } @media (prefers-reduced-motion:reduce){ .appbar .brand .dot svg .held{animation:none} } .appbar .logout{font-size:.85rem;color:var(--muted);text-decoration:none} .appbar .brand{color:var(--text);text-decoration:none} /* Right-side appbar group — admin shortcut (admins only) sits left of the * gear so both are reachable with one tap. Flex + gap keeps them aligned. */ .appbar-right{display:flex;align-items:center;gap:.25rem} .appbar-iconbtn{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;color:var(--muted);border-radius:8px; text-decoration:none;line-height:0;transition:background .15s,color .15s} .appbar-iconbtn:hover{background:var(--surface2);color:var(--brand)} .appbar-iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* v158: appbar-iconbtn variant met overlay-badge (zwart vierkant met * unread-count). position:relative op de knop zelf zodat het vierkant * absolute-positioneerbaar wordt; eigen min-width zodat 1- en 2-cijferige * counts beide netjes uitlijnen. White-on-black, 0px border-radius * letterlijk vierkant zoals Bas vroeg. */ .appbar-iconbtn-relative{position:relative} .appbar-square-badge{position:absolute;top:-2px;right:-2px; min-width:16px;height:16px;padding:0 3px;line-height:16px; background:#000;color:#fff;font-size:.62rem;font-weight:700; text-align:center;border-radius:2px;font-variant-numeric:tabular-nums; pointer-events:none;box-shadow:0 0 0 1.5px var(--bg)} /* Licht thema: dezelfde zwarte tile, witte ring eromheen voor contrast * tegen de paper-ground appbar. */ html[data-theme="light"] .appbar-square-badge{box-shadow:0 0 0 1.5px #FFFFFF} @media (prefers-color-scheme: light){ html[data-theme="system"] .appbar-square-badge{box-shadow:0 0 0 1.5px #FFFFFF} } /* Logout in Settings → Account is a neutral action, not a CTA — use the * bigbtn shape but strip the brand-green fill so it doesn't compete with * the "Doorschakelen activeren" green button at the top of the section. */ .settings-logout{background:var(--surface2);color:var(--text); border:1px solid var(--border)} .settings-logout:hover{background:var(--surface)} /* TEMP version chip — pinned to bottom-right above the iOS home-bar safe * area. Lets the user verify at a glance which build they're actually * looking at (catches "I deployed but my browser shows the old version"). * Click-through so it never blocks UI underneath. Will be hidden once we * trust the deploy loop — see CLAUDE.md "Version chip" section. */ .version-chip{position:fixed;right:14px; bottom:calc(env(safe-area-inset-bottom,0) + 14px); padding:.45rem .85rem;border-radius:999px; background:rgba(22,27,34,.92);border:1px solid rgba(242,163,56,.45); color:var(--text);font-size:.95rem;font-weight:700;letter-spacing:.02em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; pointer-events:none;z-index:40;backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.35)} /* Unread-count badge in the appbar wordmark. Brand Book: amber marks * meaning, never red unless destructive — an unread count is exactly * "the call we caught and held, the thing that doesn't slip away." * Amber pill, charcoal text, tabular numerals so 9 → 99 → 99+ stays * crisply aligned. Subtle outer ring picks up the dark background. * The numeral itself is sized up (.9rem) for readability without * inflating the pill — line-height:1 keeps the chip compact. */ .brand-badge{display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 7px;margin-left:.5rem; background:var(--brand);color:var(--brand-ink);border-radius:999px; font-family:'Space Grotesk',system-ui,sans-serif; font-size:.9rem;font-weight:700;letter-spacing:-0.02em;line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px rgba(24,26,31,.65), 0 2px 6px rgba(242,163,56,.25)} /* (Pre-v3 .appmenu dropdown CSS removed in v40.5 cleanup. The gear in * the appbar is a direct link to /settings now — no dropdown markup * anywhere, so .appmenu / .appmenu-pop / .appmenu-item / .appmenu-logout * rules were dead code. .appbar-iconbtn handles the gear + admin shortcut.) */ .impbanner{position:fixed;top:0;left:0;right:0;background:#7a3a00;color:#ffe6c2; display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.45rem .8rem;font-size:.78rem;z-index:25;border-bottom:1px solid #a35200} .impbanner .btn{background:#ffe6c2;color:#3a1d00;border:none;padding:.25rem .6rem; border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer} body:has(.impbanner){padding-top:96px} body:has(.impbanner) .appbar{top:32px} .fixcmd{display:inline-block;margin-top:.25rem;padding:.18rem .4rem;background:#1d2026; border:1px solid var(--border);border-radius:4px;color:#a8b3c7;font-size:.7rem; word-break:break-all;user-select:all;cursor:text} /* Cookie banner — single-tap dismissable informational disclosure. We only * use one functional cookie (JWT session) so no consent is required under * ePrivacy, but a one-time notice is good practice. The banner sits at * the bottom on top of the tabbar with a higher z-index. */ .cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:30; background:rgba(22,27,34,.97);backdrop-filter:blur(10px); border-top:1px solid var(--border); padding:.7rem 1rem;display:flex;align-items:center;gap:.8rem; font-size:.8rem;color:var(--text)} .cookiebar p{margin:0;flex:1;line-height:1.35} .cookiebar a{color:var(--brand)} .cookiebar button{margin:0;padding:.45rem 1rem;font-size:.82rem; background:var(--brand);color:var(--brand-ink);border:none; border-radius:999px;font-weight:700;cursor:pointer;flex:none} /* Legal pages (Privacy / Terms) — readable typography on a single column. */ .legal{max-width:720px;margin:0 auto;padding:1rem 1.2rem 4rem} .legal-brand{display:flex;align-items:center;justify-content:center;gap:.55rem; font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.35rem;font-weight:400; letter-spacing:-0.035em;line-height:1;color:var(--text);text-decoration:none; margin:1.4rem 0 1rem} .legal-brand .dot{width:28px;height:28px} .legal-brand b{font-weight:700} .legal-back{font-size:.85rem;color:var(--muted);text-decoration:none} .legal-back:hover{color:var(--brand)} .legal h1{font-size:1.6rem;margin:.6rem 0 1rem} .legal h2{font-size:1.1rem;margin:1.4rem 0 .4rem;color:var(--brand)} .legal p,.legal li{font-size:.95rem;line-height:1.55} .legal table{margin:.6rem 0 1rem;table-layout:fixed;width:100%} .legal table th,.legal table td{padding:.4rem .6rem;font-size:.88rem;overflow-wrap:anywhere;word-break:break-word;vertical-align:top} .legal ul{padding-left:1.3rem} .danger-text{color:var(--danger)} /* Swipeable list items — LinkedIn / iOS-Mail pattern: drag reveals fixed- * width action panels (~84px each) that STAY visible until tapped. Long * drag (>50% of card width) auto-commits. Three states per row: * neutral → translateX(0) * .revealed-left → translateX(84px) (right-swipe completed) * .revealed-right → translateX(-84px) (left-swipe completed) * touch-action: pan-y on the li lets vertical scroll still work; the JS * lock decides h vs v at 8px drag-distance. */ .vm[data-swipeable]{position:relative;overflow:hidden;touch-action:pan-y;padding:0} .vm[data-swipeable] .swipe-card{transition:transform .22s cubic-bezier(.2,.6,.2,1); background:var(--surface);position:relative;z-index:2;padding:.7rem .85rem; will-change:transform} .vm[data-swipeable].swiping .swipe-card{transition:none} .vm[data-swipeable].revealed-left .swipe-card{transform:translateX(84px)} .vm[data-swipeable].revealed-right .swipe-card{transform:translateX(-84px)} .vm[data-swipeable] .swipe-action{position:absolute;top:0;bottom:0;width:84px; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.2rem;font-size:.7rem;font-weight:700;z-index:1;padding:0;cursor:pointer; letter-spacing:.01em;text-align:center;line-height:1.1; /* Border-radius matched to .vm so the panel doesn't bulge past the card edge. */ border-radius:0} .vm[data-swipeable] .swipe-action .ic{font-size:1.3rem;line-height:1;display:inline-flex} .vm[data-swipeable] .swipe-action .ic svg{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .vm[data-swipeable] .swipe-action .lbl{padding:0 .3rem;hyphens:auto} .vm[data-swipeable] .swipe-left{left:0;background:var(--brand);color:var(--brand-ink)} /* Right panel = delete (destructive). Brand-danger red signals the * irreversible action — matches iOS Mail / LinkedIn delete-on-swipe red. */ .vm[data-swipeable] .swipe-right{right:0;background:var(--danger);color:#fff} /* When a panel is "armed" via revealed-state, give it a subtle inset * shadow so the user knows it's tappable. */ .vm.revealed-left .swipe-left,.vm.revealed-right .swipe-right{box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)} /* Open voicemails — branded full border to signal "needs attention". This * replaces the previous inset stripe + 'unread' state. */ .vm.open{border:2px solid var(--brand)} /* Handled voicemails — no brand border + dim direct children of .swipe-card * so the action-panel underneath stays solid. Card background stays opaque. */ .vm.handled{border-color:var(--border)} .vm.handled .swipe-card > *{opacity:.55} /* ===== Admin support inbox (v160) — herbruikt .vm[data-swipeable] structure. Eigen layout per rij: afzender + tijd op een regel, onderwerp dik, snippet grijs eronder. dekt de hele klik-area zodat een tap op willekeurig stuk van de rij de mail opent; touch-action:manipulation voorkomt de iOS double-tap-zoom delay. */ .support-list{list-style:none;padding:0;margin:.5rem 0 1rem} .vm.support-row{padding:0;margin-bottom:.5rem;border-radius:12px; background:var(--surface);border:1px solid var(--border)} .vm.support-row.open{border-color:rgba(242,163,56,.35)} .support-row-link{display:block;padding:.75rem .85rem;color:var(--text); text-decoration:none;touch-action:manipulation} .support-row-top{display:flex;justify-content:space-between;align-items:baseline; gap:.5rem;margin-bottom:.2rem;font-size:.82rem;color:var(--muted)} .support-row-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .support-row-time{flex:none;font-variant-numeric:tabular-nums} .support-row-subject{font-size:.95rem;line-height:1.3;color:var(--text)} .support-row-subject.unread{font-weight:700} .support-row-snippet{font-size:.82rem;color:var(--muted);margin-top:.15rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .support-row-replied{font-size:.74rem;color:var(--brand);margin-top:.3rem; font-weight:600;letter-spacing:.01em} /* v164: ticket tabs + sub-filter chips */ .support-tabs{display:flex;gap:.3rem;align-items:center;margin:1rem 0 .3rem; border-bottom:1px solid var(--border);padding-bottom:.5rem;flex-wrap:wrap} .support-tab{padding:.45rem .85rem;border-radius:8px;text-decoration:none; font-size:.88rem;font-weight:500;color:var(--muted); background:transparent;border:1px solid transparent} .support-tab.active{font-weight:600;color:var(--text); background:var(--surface2);border-color:var(--border)} .support-chips{display:flex;gap:.3rem;flex-wrap:wrap;margin:.5rem 0 0} .support-chip{padding:.25rem .65rem;border-radius:999px;text-decoration:none; font-size:.78rem;font-weight:500;color:var(--muted); background:var(--surface);border:1px solid var(--border)} .support-chip.active{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)} /* Assignee initialen badge — kleine cirkel naast de afzender. Voor 2 admins * (B, N) per design genoeg om te onderscheiden zonder kleur-coding. */ .support-assignee{display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%; background:var(--brand);color:var(--brand-ink); font-size:.62rem;font-weight:700;margin-left:.4rem;flex:none; font-variant-numeric:tabular-nums;letter-spacing:0} /* v167: vlag-icoon + per-rij actiemenu (⋯ top-right). Menu sluit zelf * via native

or cross-origin prefetch can't force-logout the user; * styling has to cover both the form-button shape and the legacy . */ details.category > .inner > a.settings-logout, details.category > .inner > form.settings-logout-form > button.settings-logout{ display:block;text-align:center;width:100%; background:transparent;border:none;padding:.55rem;margin:.1rem 0 .35rem; color:var(--muted);font-size:.85rem;font-weight:500;text-decoration:none; border-radius:8px;cursor:pointer; transition:color .15s,background .15s} details.category > .inner > form.settings-logout-form{margin:.1rem 0 .35rem} details.category > .inner > a.settings-logout:hover, details.category > .inner > form.settings-logout-form > button.settings-logout:hover{ color:var(--text);background:var(--surface2);filter:none} /* ---------- Integraties — grouped + collapsible-per-row ---------- */ /* Small uppercase group title — provides scanability at the section level. */ .integ-group-title{font-size:.7rem;font-weight:700;color:var(--muted); letter-spacing:.06em;text-transform:uppercase;margin:1.1rem 0 .4rem; display:flex;align-items:center;gap:.4rem} .integ-group-title:first-child{margin-top:.2rem} .integ-count{font-weight:600;color:var(--brand)} /* Group container — visually clusters its rows with shared rounded edges. */ .integ-group{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--surface2);border-radius:12px;overflow:hidden} /* Each row: