/* fronts.css · page layout for the search fronts (product). Components and tokens come from z.css; this file only
   places them: home column, answer grid (#stedentrips layout), states without a stream or without JS. */
/* DM Sans, self-hosted (OFL, fonts/OFL.txt; @fontsource-variable/dm-sans 5.2.5, latin): no request to Google, so no visitor IP leaves us */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
             src: url("/static/fonts/dm-sans-latin-wght.woff2") format("woff2"); }
body { min-height: 100%; display: flex; flex-direction: column; }

/* home */
.f-home { width: 100%; max-width: 680px; margin: 0 auto; padding: 18vh 20px 48px; flex: 1; }
.f-mark { display: flex; justify-content: center; margin: 0 0 36px; }
.f-mark .z-logo { font-size: 44px; letter-spacing: -.035em; color: var(--z-accent); }
.f-home .z-search { min-height: 58px; }
/* suggestions (Rene): the dropdown under the box, and the quiet list under the modes; both follow the chosen mode */
.f-boxwrap { position: relative; z-index: 5; }   /* the dropdown and the style picker open over the mode row */
.f-drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; padding: 6px 0; background: var(--z-surface); border: 1px solid var(--z-line);
          border-radius: var(--z-r-lg); box-shadow: var(--z-pop); }
.f-drop__group, .f-sugg { display: none; }
.f-drop__row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 18px; color: var(--z-ink-2); font-size: 15px; line-height: 1.4; text-decoration: none; }
.f-drop__row:hover, .f-drop__row[aria-selected="true"] { background: var(--z-hover); color: var(--z-ink); }
.f-drop__row .z-icon { width: 16px; height: 16px; flex: none; color: var(--z-faint); }
.f-drop__row b { font-weight: 400; color: var(--z-mute); }   /* the typed part, lighter (live completions) */
.f-sugg { flex-direction: column; align-items: flex-start; margin: 28px 0 0; padding-left: 22px; }
.f-sugg a { padding: 5px 0; color: var(--z-mute); font-size: 15px; line-height: 1.4; text-decoration: none; }
.f-sugg a:hover { color: var(--z-ink); text-decoration: underline; text-underline-offset: 3px; }
.f-sugg a:nth-child(n+4) { display: none; }   /* three under the modes; the dropdown may show more */
.f-home:has(input[name=mode][value=ai]:checked) [data-mode=ai], .f-home:has(input[name=mode][value=web]:checked) [data-mode=web],
.f-home:has(input[name=mode][value=images]:checked) [data-mode=images], .f-home:has(input[name=mode][value=chat]:checked) [data-mode=chat],
.f-home:has(input[name=mode][value=make]:checked) [data-mode=make] { display: flex; }
.f-drop__group { flex-direction: column; }
/* live suggestions replace the static rows and the quiet list while the visitor types */
.f-drop__live, .f-sugg--live { display: none; }
.f-drop.is-live .f-drop__group:not(.f-drop__live), .f-home.has-related .f-sugg:not(.f-sugg--live) { display: none !important; }
.f-drop.is-live .f-drop__live { display: flex; } .f-home.has-related .f-sugg--live { display: flex; }
/* stages: a thin moving line while a request runs, the kept rows dimmed until the new ones arrive, skeleton rows in the
   row's own shape; the quiet list steps back while the dropdown is open, so the two never stack */
.f-drop { overflow: hidden; }
.f-drop.is-loading::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 30%; border-radius: 2px; background: var(--z-accent); animation: f-load 1s ease-in-out infinite; }
@keyframes f-load { from { left: -30%; } to { left: 100%; } }
.f-drop.is-loading .f-drop__live .f-drop__row:not(.f-drop__skel) { opacity: .6; transition: opacity var(--z-t); }
.f-drop__skel { pointer-events: none; } .f-drop__skel .z-skel { height: 12px; }
.f-home:has(#f-drop:not([hidden])) .f-sugg { opacity: 0; visibility: hidden; }
.f-sugg { transition: opacity var(--z-t); }
@media (prefers-reduced-motion: reduce) { .f-drop.is-loading::before { animation: none; left: 0; width: 100%; opacity: .4; } }
@media (max-width: 760px) { .f-drop__row { min-height: 48px; } .f-sugg { padding-left: 16px; } .f-sugg a { padding: 8px 0; } }
.f-modes { justify-content: center; width: max-content; margin: 16px auto 0; }   /* a z-seg; layout only */
.f-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.f-ex { height: auto; min-height: 34px; padding: 7px 14px; line-height: 1.35; text-align: center; }

/* answer page */
.f-top { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: var(--z-surface); border-bottom: 1px solid var(--z-line); }
.f-top .z-logo { font-size: 22px; }
.f-logo__mark { display: none; border-radius: 7px; }
.f-top .z-search { flex: 1; min-width: 0; max-width: 640px; height: 46px; }
.f-top .z-search input { font-size: 16px; min-width: 0; }
.f-top .z-search button { width: 36px; height: 36px; }
.f-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 360px); gap: 20px; align-items: start; align-content: start; justify-content: center; padding: 20px 24px 64px; flex: 1; }
.f-grid > * > .z-card + .z-card { margin-top: 16px; }
.f-ans .z-answer p { margin: 0 0 12px; }
.f-ans .z-answer ul, .f-ans .z-answer ol { margin: 0 0 12px; padding-left: 22px; }
.f-ans .z-answer li { margin: 0 0 6px; }
.f-cites { white-space: nowrap; margin-left: 3px; } .f-cites .z-cite + .z-cite { margin-left: 2px; }
/* cite chip: favicon + site name; 22px tall in the text, the ::after makes the tap area 46px without moving lines */
.f-cite { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 5px;
          border-radius: 11px; background: var(--z-hover); color: var(--z-ink-2); font: 500 var(--z-fs-xs)/1 var(--z-sans); vertical-align: 1px; text-decoration: none; }
.f-cite::after { content: ""; position: absolute; inset: -12px -2px; }
.f-cite:hover { background: var(--z-accent-soft); color: var(--z-accent-ink); }
.f-cite + .f-cite { margin-left: 3px; }
.f-cite--more { padding: 0 8px; color: var(--z-mute); }
.f-cite__host { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.f-cite__fav { flex: none; width: 14px; height: 14px; border-radius: 3px; }
.f-wait { color: var(--z-mute); font-size: var(--z-fs-md); }
.f-fail { margin: 0; color: var(--z-mute); font-size: var(--z-fs-md); }
.f-h { font: 600 var(--z-fs-lg)/1.3 var(--z-sans); color: var(--z-ink); margin: 0 0 6px; }
.f-blk { margin-top: 24px; }
.f-blk .f-h { margin-bottom: 10px; }
.f-blk:has(> div:empty) { display: none; }          /* headings appear with their fragment */
.z-source > * { min-width: 0; overflow-wrap: anywhere; }
.f-web .z-result:first-of-type { border-top: 0; }
.f-notice { margin: 0 0 12px; color: var(--z-mute); font-size: var(--z-fs-sm); }
.f-foot { text-align: center; padding: 20px; font-size: var(--z-fs-xs); color: var(--z-faint); }

/* no stream (mode=web, cap, error) or no JS: the results take the full width */
.f-noanswer, .nojs .f-grid { grid-template-columns: minmax(0, 720px); }
.nojs .f-ans:not(.f-ans--off) { display: none; }

@media (max-width: 1000px) { .f-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .f-home { padding-top: 10vh; }
  .f-top { gap: 12px; padding: 10px 12px; } .f-top .f-logo__word { display: none; } .f-top .f-logo__mark { display: block; }
  .f-grid { padding: 12px 12px 48px; }
}

/* chat: one centred column, messages stacked, input pinned to the bottom */
.f-top__title { font-weight: 500; color: var(--z-ink); }
.f-new { margin-left: auto; height: 34px; font-size: var(--z-fs-sm); }
/* chat is one screen: the page never scrolls; the rail and the thread scroll on their own, the composer is pinned below
   the thread. --f-vvh is the visual viewport (set by the island), so the composer stays above a phone keyboard */
body:has(.f-chat) { height: var(--f-vvh, 100dvh); min-height: 0; overflow: hidden; }
.f-chat { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 0 max(8px, env(safe-area-inset-bottom)); }   /* pinned: the larger of a small gap and the home-indicator inset, never both */
.f-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.f-thread { position: relative; width: min(760px, 100%); min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; }
.f-chat > .f-notice, .f-chat > .f-save, .f-chat > .f-chatform, .f-chat > .f-chat__fine { flex: none; width: min(720px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.f-jump { position: relative; z-index: 4; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; margin: -48px 0 12px; border: 1px solid var(--z-line);
          border-radius: 50%; background: var(--z-surface); color: var(--z-ink-2); box-shadow: var(--z-pop); cursor: pointer; }
.f-jump[hidden] { display: none; } .f-jump:hover { color: var(--z-ink); } .f-jump .z-icon { width: 18px; height: 18px; }
.f-chat__hello { margin: 18vh 0 0; text-align: center; color: var(--z-mute); font-size: var(--z-fs-lg); }
.f-thread:has(.f-msg) .f-chat__hello { display: none; }
.f-msg { max-width: 88%; font-size: 16px; line-height: 1.6; color: var(--z-ink); }
.f-msg p { margin: 0 0 10px; } .f-msg p:last-child { margin-bottom: 0; }
.f-msg ul, .f-msg ol { margin: 0 0 10px; padding-left: 22px; } .f-msg li { margin: 0 0 4px; }
.f-msg--user { align-self: flex-end; padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--z-accent-soft); white-space: pre-wrap; }
.f-msg--ai { align-self: flex-start; padding: 2px 0; }
.f-chatform { position: relative; z-index: 3; }
/* the chat composer: one row (text · Snel · send) that grows with what is typed (z.js), up to 40% of the screen (Rene) */
.f-box.f-box--chat { align-items: flex-end; border-radius: 24px; padding: 6px 6px 6px 20px; }
.f-box.f-box--chat textarea { height: 36px; min-height: 0; max-height: 40vh; padding: 6px 8px 6px 0; font-size: 16px; line-height: 24px; overflow-y: auto; }
.f-box.f-box--chat .f-box__model { display: inline-block; }
.f-box.f-box--chat button { width: 36px; height: 36px; }
.f-chat__fine { margin: 8px 0 16px; text-align: center; font-size: var(--z-fs-xs); color: var(--z-faint); }
.nojs .f-chatform, .f-chatform.f-off { opacity: .5; pointer-events: none; }
.f-msg .f-fail__hint { display: none; }

/* account: top-right sign-in / initial, sign-in and account panels */
.f-bar { display: flex; justify-content: flex-end; padding: 14px 20px 0; }
.f-top__end { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.f-signin { font-size: var(--z-fs-md); font-weight: 500; color: var(--z-ink-2); padding: 6px 10px; border-radius: var(--z-r-sm); }
.f-signin:hover { background: var(--z-hover); color: var(--z-ink); }
.f-user { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--z-accent-soft); color: var(--z-accent-ink);
          font-weight: 600; font-size: var(--z-fs-sm); text-transform: uppercase; }
.f-acct { flex: 1; padding: 0 16px; }
.f-acct__form { margin-top: 18px; }
.f-acct__alert { margin: 16px 0 0; }
.f-acct__pk { margin-top: 10px; }
.f-acct__kv { margin-top: 18px; grid-template-columns: 110px minmax(0, 1fr); }
.f-acct__kv dd { overflow-wrap: anywhere; }
.f-acct__h { margin: 22px 0 10px; }
.f-acct__list .z-item__title { white-space: normal; }
.f-danger { color: var(--z-danger); } .f-danger:hover { color: var(--z-danger); text-decoration: underline; }
.nojs .f-js-only { display: none; }
.f-acct__note { margin: 14px 0 0; font-size: var(--z-fs-xs); color: var(--z-mute); line-height: 1.5; }

/* legal pages: one readable column */
.f-doc { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; }
.f-doc__body { font-size: 15px; line-height: 1.7; color: var(--z-ink-2); }
.f-doc__body h1 { font: 600 var(--z-fs-2xl)/1.2 var(--z-sans); letter-spacing: -.02em; color: var(--z-ink); margin: 0 0 18px; }
.f-doc__body h2 { font: 600 var(--z-fs-lg)/1.3 var(--z-sans); color: var(--z-ink); margin: 26px 0 8px; }
.f-doc__body p, .f-doc__body ul, .f-doc__body ol { margin: 0 0 12px; } .f-doc__body ul, .f-doc__body ol { padding-left: 22px; }
.f-doc__body strong { color: var(--z-ink); font-weight: 600; }
.f-doc__body table { width: 100%; border-collapse: collapse; font-size: var(--z-fs-sm); margin: 6px 0 16px; }
@media (max-width: 760px) { .f-doc__body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .f-doc__body td, .f-doc__body th { min-width: 140px; } .f-doc__body td:last-child, .f-doc__body th:last-child { min-width: 240px; } }   /* phones: a wide table scrolls inside the card instead of being cut off */
.f-doc__body th, .f-doc__body td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--z-line-soft); }
.f-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 6px; }
.f-legal a { color: var(--z-mute); } .f-legal a:hover { color: var(--z-ink); }
.f-doc__notice { margin: 0 0 14px; }
.f-model { margin: 0 6px 0 0; flex: none; }   /* a z-seg z-seg--sm; layout only */
@media (max-width: 820px) { .f-model { display: none; } }   /* below this the header search is too narrow for the toggle (it ran into Inloggen at 740) */
/* home box: one-line search box in AI-modus and Zoeken; an AI composer in AI-chat */
.f-box { height: auto; min-height: 58px; align-items: center; padding: 6px 6px 6px 22px; }
.f-box textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: 400 17px/1.5 var(--z-sans);
                  color: var(--z-ink); padding: 10px 0; height: 46px; max-height: 200px; overflow-y: auto; }
.f-box textarea::placeholder { color: var(--z-faint); }
.f-box textarea:focus-visible { box-shadow: none; }
.f-box__bar { display: flex; align-items: center; gap: 8px; flex: none; }
.f-box__model { display: none; appearance: none; border: 0; background: transparent; font: 500 var(--z-fs-sm)/1 var(--z-sans); color: var(--z-mute);
                padding: 6px 22px 6px 10px; border-radius: var(--z-r-full); cursor: pointer;
                background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
                background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.f-box__model:hover { background-color: var(--z-hover); color: var(--z-ink); }
.f-box__model:focus-visible { box-shadow: var(--z-ring); outline: none; }
.f-box__send { display: none; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 14px 10px 10px 20px; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box textarea { height: auto; min-height: 76px; padding: 4px 10px 0 0; font-size: 16px; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box__bar { justify-content: space-between; margin-top: 6px; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box__model { display: inline-block; margin-left: -10px; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box__find { display: none; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box__send { display: block; }
.f-homeform:has(input[name=mode][value=chat]:checked) .f-box button { width: 36px; height: 36px; }

/* polish pass: skeleton while waiting (no jump), cited result highlight, screen-reader text */
.f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-wait { display: grid; gap: 10px; padding: 6px 0 4px; } .f-wait .z-skel { height: 12px; } .f-skel--short { width: 60%; }
.f-msg--ai .f-wait { width: min(420px, 70vw); }
.z-result { scroll-margin-top: 90px; border-radius: var(--z-r-sm); transition: background-color .6s; }
.z-result:target { background: var(--z-accent-soft); box-shadow: 0 0 0 8px var(--z-accent-soft); }
.z-empty a { white-space: nowrap; }

/* 20 ms rule: every press shows at once; busy forms and buttons say so; results skeleton = five results */
.z-btn:active, .z-search button:active, .z-chip:active, .f-ex:active { transform: scale(.97); }
.z-btn, .z-search button, .z-chip { transition: transform 60ms ease-out, background-color var(--z-t), border-color var(--z-t), color var(--z-t); }
form[aria-busy="true"] button, .z-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
form[aria-busy="true"] .z-search, form[aria-busy="true"].z-search { border-color: var(--z-accent); }
/* skeleton rows: each bar fills one line box of the real row's type (1lh), drawn as a thinner bar inside it */
.f-rskel .z-skel { display: block; height: 1lh; padding: .25lh 0; background-clip: content-box; }   /* border-box: the bar is the middle half */
.f-rskel .z-result__crumb { display: block; min-height: 16px; } .f-rskel__crumb { width: 40%; } .f-rskel__title { width: 75%; }
.f-rskel .f-rskel__snip { display: block; -webkit-line-clamp: none; } .f-rskel__3 { display: none !important; }
/* web results (Zoeken): fixed row shapes, so the skeleton can match them: one crumb line, the snippet at 2 lines (3 on phones) */
.f-noanswer .f-web .z-result__crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-noanswer .f-web .z-result__title:not(:has(.z-skel)) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .f-rskel__2 { display: none !important; }
.f-noanswer .f-web .z-result__snippet:not(.f-rskel__snip) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {   /* phones: the title up to 2 lines, the snippet 3 */
  .f-noanswer .f-web .z-result__title:not(:has(.z-skel)) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .f-noanswer .f-web .z-result__snippet:not(.f-rskel__snip) { -webkit-line-clamp: 3; } .f-noanswer .f-rskel__3, .f-noanswer .f-rskel__2 { display: block !important; } }
.f-typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.f-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--z-faint); animation: f-dot 1s infinite ease-in-out; }
.f-typing i:nth-child(3) { animation-delay: .15s; } .f-typing i:nth-child(4) { animation-delay: .3s; }
@keyframes f-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
body:has(.f-results) .f-skel { display: none; }

/* feedback row at the bottom of the answer card; appears once the answer is complete */
.f-fb { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--z-line-soft); font-size: var(--z-fs-sm); color: var(--z-mute); }
.f-ans:not([data-done]) .f-fb, .f-ans:has(.f-fail) .f-fb { display: none; }   /* z.js sets data-done on the "done" event; never feedback under an error */
.f-fb__row { display: flex; align-items: center; gap: 6px; }
.f-fb__q { margin-right: 4px; }
.f-fb__row .z-btn { width: 32px; padding: 0; justify-content: center; }
.f-fb__row .z-icon { color: var(--z-mute); }
.f-fb__wrong { margin-top: 8px; } .f-fb__wrong summary { cursor: pointer; color: var(--z-mute); width: max-content; }
.f-fb__wrong summary:hover { color: var(--z-ink); }
.f-fb__wrong form { margin-top: 10px; }
.f-fb__thanks { margin: 0; color: var(--z-ok); }
.f-retry { margin-left: 8px; vertical-align: middle; }

/* chat history: rail on the left (only with saved conversations), save choice for guests */
.f-chatwrap { flex: 1; display: flex; min-height: 0; }
.f-chatwrap .f-chat { flex: 1; } .f-chatwrap:has(.f-chat) { min-height: 0; }
.f-rail { width: 248px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-right: 1px solid var(--z-line);
          background: var(--z-surface); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.f-rail__new { justify-content: center; margin-bottom: 10px; }
.f-rail__group { margin: 14px 10px 4px; font: 500 var(--z-fs-xs)/1 var(--z-sans); color: var(--z-mute); }   /* sentence case: no uppercase labels (Rene) */
.f-rail__item { position: relative; display: flex; align-items: center; border-radius: var(--z-r-sm); }
.f-rail__item > a { flex: 1; min-width: 0; padding: 7px 10px; font-size: var(--z-fs-sm); color: var(--z-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-rail__item:hover { background: var(--z-hover); } .f-rail__item.is-current { background: var(--z-accent-soft); }
.f-rail__item.is-current > a { color: var(--z-accent-ink); font-weight: 500; }
.f-rail__menu { flex: none; } .f-rail__menu summary { list-style: none; cursor: pointer; padding: 4px 8px; color: var(--z-faint); opacity: 0; }
.f-rail__menu summary::-webkit-details-marker { display: none; }
.f-rail__item:hover .f-rail__menu summary, .f-rail__menu[open] summary, .f-rail__menu summary:focus-visible { opacity: 1; }
.f-rail__pop { position: absolute; right: 4px; top: 34px; z-index: 5; display: grid; gap: 8px; padding: 10px; width: 220px; background: var(--z-surface);
               border: 1px solid var(--z-line); border-radius: var(--z-r-md); box-shadow: var(--z-shadow); }
.f-rail__pop form { display: flex; gap: 6px; margin: 0; } .f-rail__pop .z-input { height: 30px; font-size: var(--z-fs-sm); }
.f-rail__foot { margin-top: auto; padding: 12px 10px 0; font-size: var(--z-fs-xs); color: var(--z-mute); }
.f-rail__foot p { margin: 0 0 8px; } .f-rail__all { margin-top: 4px; }
.f-save { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 0 10px; font-size: var(--z-fs-sm); color: var(--z-ink-2); }
@media (max-width: 760px) { .f-rail { display: none; } }
body:has(.f-chatwrap.has-rail) .f-top .f-new { display: none; }
.f-modelinks { flex: none; } .f-modelinks a { height: 28px; padding: 0 12px; }
/* the mode switch (home and results), every width: the white pill sits visibly inside the track (Rene, 22-10: "padding
   boven en onder de pill"); the lift shadow filled the 3px, so the selected pill is flat and the inset is 4px */
.f-modes, .f-modelinks { padding: 4px; }
.f-modes input:checked:not(:focus-visible) + span, .f-modelinks a[aria-selected="true"]:not(:focus-visible) { box-shadow: none; }
@media (max-width: 1100px) { .f-top { flex-wrap: wrap; } .f-modelinks { order: 3; } }
@media (max-width: 600px) { .f-modelinks { width: 100%; justify-content: center; } }

/* source cards: top-aligned, compact, equal heights; site mark + domain + number, title on two lines */
.f-srcs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: stretch; }
.f-src { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 12px; }
.f-src__top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.f-src__fav, .f-fav { flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--z-hover); }
.f-fav { display: inline-block; vertical-align: -3px; margin-right: 7px; }
.f-src__host { flex: 1; min-width: 0; font-size: var(--z-fs-xs); color: var(--z-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-src .z-cite { flex: none; }
.f-src__title { font-size: var(--z-fs-sm); line-height: 1.4; color: var(--z-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-src:hover .f-src__title { color: var(--z-accent); }

/* chat: stop replaces send while a reply streams; the legal footer moves into the rail (or stays very quiet) */
.f-chatform .f-stop { display: none; } .f-chatform[aria-busy="true"] .f-send { display: none; } .f-chatform[aria-busy="true"] .f-stop { display: grid; background: var(--z-ink); }
.f-chatform[aria-busy="true"] { opacity: 1; }
.f-chatform[aria-busy="true"] button.f-stop { opacity: 1; cursor: pointer; }
body:has(.f-chatwrap) .f-foot { padding: 6px 20px 10px; font-size: 11px; }
body:has(.f-chatwrap) .f-legal { gap: 2px 12px; }
body:has(.f-chatwrap.has-rail) .f-foot { display: none; }
.f-rail__legal { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 8px; } .f-rail__legal a { color: var(--z-faint); } .f-rail__legal a:hover { color: var(--z-ink); }

/* page change: the logo and the search box glide (z-vt-* in z.css); results fade in where their skeleton was */
.f-results { animation: f-fade var(--z-dur-page) ease-out; }
@keyframes f-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Afbeeldingen ---------- */
.f-filters { position: relative; } .f-filters > summary { list-style: none; } .f-filters > summary::-webkit-details-marker { display: none; }
.f-filters__box { position: absolute; right: 0; top: 38px; z-index: 10; display: grid; gap: 10px; width: 280px; padding: 14px; background: var(--z-surface);
                  border: 1px solid var(--z-line); border-radius: var(--z-r-md); box-shadow: var(--z-shadow); font-size: var(--z-fs-sm); }
.f-filters__box label { display: grid; gap: 4px; color: var(--z-mute); } .f-filters__box .z-select { height: 32px; }
.f-filters__note { margin: 0; font-size: var(--z-fs-xs); color: var(--z-mute); }
.f-filters[open] > summary { border-color: var(--z-ink); }
@media (max-width: 600px) { .f-filters > summary { width: 32px; padding: 0; justify-content: center; } .f-filters > summary span { display: none; } }
.f-imgs { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 24px 48px; align-items: start; }
.f-imgs.has-panel { grid-template-columns: minmax(0, 1fr) 380px; }
.f-imgs__hello { margin: 18vh 0 0; text-align: center; color: var(--z-mute); font-size: var(--z-fs-lg); }

/* justified rows: DOM order, one row height (~180 px); each tile grows by its aspect ratio; the last row stays natural */
.f-jg { display: flex; flex-wrap: wrap; gap: 6px; }
.f-jg::after { content: ""; flex-grow: 999; }
.f-jg__i { position: relative; height: 180px; flex: 1 1 180px; border-radius: 8px; overflow: hidden; background: var(--z-line-soft); }
.f-jg__i img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease-out; }
.f-jg__i:hover img { transform: scale(1.02); }
.f-jg__i:focus-visible { box-shadow: var(--z-ring); }
.f-jg__i.r05 { flex: 0.55 1 99px; } .f-jg__i.r07 { flex: 0.75 1 135px; } .f-jg__i.r10 { flex: 1 1 180px; } .f-jg__i.r13 { flex: 1.3 1 234px; }
.f-jg__i.r16 { flex: 1.6 1 288px; } .f-jg__i.r20 { flex: 2 1 360px; } .f-jg__i.r25 { flex: 2.5 1 450px; }
.f-jg__i.is-open { box-shadow: 0 0 0 3px var(--z-accent); }
.f-jg__host { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 6px; background: var(--z-scrim);
              color: var(--z-on-dark); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--z-t); }
.f-jg__i:hover .f-jg__host, .f-jg__i:focus-visible .f-jg__host { opacity: 1; }
.f-more { text-align: center; margin: 20px 0 0; }
.f-bridge { text-align: center; margin: 14px 0 0; font-size: var(--z-fs-sm); color: var(--z-mute); }

/* side panel: sticky on wide screens, a sheet from the bottom on phones */
.f-panel { position: sticky; top: 16px; display: grid; gap: 10px; padding: 16px; background: var(--z-surface); border: 1px solid var(--z-line);
           border-radius: var(--z-r-lg); box-shadow: var(--z-shadow); max-height: calc(100vh - 32px); overflow-y: auto; }
.f-panel__close { justify-self: end; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--z-mute); font-size: 20px; line-height: 1; }
.f-panel__close:hover { background: var(--z-hover); color: var(--z-ink); }
.f-panel__img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: var(--z-r-md); background: var(--z-line-soft); }
.f-panel__title { margin: 0; font: 600 var(--z-fs-lg)/1.35 var(--z-sans); color: var(--z-ink); }
.f-panel__src { margin: 0; display: flex; align-items: center; gap: 0; font-size: var(--z-fs-sm); color: var(--z-mute); }
.f-panel__note { margin: 0; font-size: var(--z-fs-xs); color: var(--z-faint); }
.f-panel__act { display: flex; flex-wrap: wrap; gap: 8px; }

/* Maken: frames at the chosen ratio at once, calm shimmer + honest stage text, then the image with a visible AI label */
.f-make { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 24px 20px 0; display: flex; flex-direction: column; }
.f-batch__prompt { margin: 0 0 12px; font-size: var(--z-fs-lg); color: var(--z-ink); }
/* A batch page fits one screen (Rene, 19-10): the grid takes the height left between prompt and composer, and each
   frame is the largest box of its ratio that fits there (container units), so nothing scrolls at 1440×900 or 390. */
body:has(.f-batch) { height: 100dvh; } body:has(.f-batch) .f-chatwrap, body:has(.f-batch) .f-make { min-height: 0; }
.f-batch { flex: 1; min-height: 0; display: flex; flex-direction: column; }   /* the images stay small (Rene: "kleiner"); a click opens one large */
.f-batch__grid { flex: 0 1 clamp(160px, 40vh, 320px); min-height: 120px; container-type: size; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; --g: 10px; }
.a11 { --r: 1; } .a43 { --r: 1.3333; } .a169 { --r: 1.7778; } .a916 { --r: .5625; }
.n1 .f-gen { width: min(100cqw, 100cqh * var(--r)); }
.n2 .f-gen { width: min((100cqw - var(--g)) / 2, 100cqh * var(--r)); }
.n4 .f-gen { width: min((100cqw - var(--g)) / 2, (100cqh - var(--g)) / 2 * var(--r)); }
.a916.n4 .f-gen { width: min((100cqw - 3 * var(--g)) / 4, 100cqh * var(--r)); }
.n4:not(.a916)::before { content: ""; flex-basis: 100%; order: 1; } .n4:not(.a916) .f-gen:nth-child(n+3) { order: 2; }   /* always two rows of two */
@media (max-width: 760px) { body:has(.f-batch) { height: auto; } .f-batch__grid { flex: none; height: clamp(160px, 40vh, 320px); } }   /* phones: the page scrolls rather than squeezing the image */
.f-gen { position: relative; margin: 0; border-radius: var(--z-r-lg); overflow: hidden; background: var(--z-line-soft); }
.a11 .f-gen { aspect-ratio: 1 / 1; } .a43 .f-gen { aspect-ratio: 4 / 3; } .a169 .f-gen { aspect-ratio: 16 / 9; } .a916 .f-gen { aspect-ratio: 9 / 16; }
.f-gen__img, .f-gen__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .f-gen__img { cursor: zoom-in; }
.f-gen.is-done .f-gen__img img { animation: f-reveal .5s ease-out; }
@keyframes f-reveal { from { filter: blur(14px); opacity: .4; } to { filter: none; opacity: 1; } }
.f-gen__frame { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
                background: linear-gradient(110deg, var(--z-line-soft) 30%, var(--z-hover) 50%, var(--z-line-soft) 70%); background-size: 220% 100%; }
.f-gen.is-pending .f-gen__frame { animation: f-shimmer 1.6s linear infinite; }
@keyframes f-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.f-gen__stage { font-size: var(--z-fs-sm); color: var(--z-mute); }
.f-gen__ai { position: absolute; left: 10px; top: 10px; background: var(--z-glass); color: var(--z-ink); }
.f-gen__act { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
              background: linear-gradient(transparent, var(--z-scrim-soft)); opacity: 0; transition: opacity var(--z-t); }
.f-gen:hover .f-gen__act, .f-gen:focus-within .f-gen__act { opacity: 1; }
@media (hover: none) { .f-gen__act { opacity: 1; } }   /* touch: always there (Rene) */
/* image actions as round icons (Rene, 22-10): download, share, copy, real photos; a narrow tile keeps download + ⋯ */
.f-gen { container-type: inline-size; }
.f-gen__act { align-items: flex-end; gap: 4px; padding: 8px; }
.f-gen__btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--z-glass); color: var(--z-ink); cursor: pointer; list-style: none; }
.f-gen__btn::-webkit-details-marker { display: none; } .f-gen__btn:hover { background: var(--z-surface); } .f-gen__btn .z-icon { width: 16px; height: 16px; }
.f-gen__btn[data-msg]::after { content: attr(data-msg); position: absolute; bottom: 48px; left: 10px; padding: 4px 8px; border-radius: var(--z-r-sm); background: var(--z-ink); color: var(--z-surface); font-size: var(--z-fs-xs); white-space: nowrap; pointer-events: none; }
.f-gen__more { display: none; }
.f-gen__menu { position: absolute; left: 8px; bottom: 44px; z-index: 3; display: grid; gap: 4px; }   /* the hidden icons, stacked above ⋯: fits any narrow tile */
@container (max-width: 147px) {   /* 4 × 30 + gaps + padding = 148 */ .f-gen__wide { display: none; } .f-gen__more { display: block; } }
@media (hover: none) { .f-gen__btn { width: 36px; height: 36px; } }
@media (hover: none) { @container (max-width: 171px) { .f-gen__wide { display: none; } .f-gen__more { display: block; } } }
.f-batch__status { display: flex; align-items: center; gap: 12px; margin: -4px 0 12px; font-size: var(--z-fs-sm); color: var(--z-mute); }
.f-batch:not(:has(.is-pending)) .f-batch__status { display: none; }
.f-batch__busy::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--z-accent); animation: f-dot 1s infinite ease-in-out; vertical-align: 1px; }
.f-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--z-accent); cursor: pointer; } .f-linkbtn:hover { color: var(--z-accent-ink); text-decoration: underline; }
.f-linkbtn:disabled { color: var(--z-mute); cursor: default; text-decoration: none; font-variant-numeric: tabular-nums; } .z-btn[data-wait] { font-variant-numeric: tabular-nums; }
.f-nw { white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.f-acct__help { display: block; margin-top: 12px; text-align: center; } .ac-help { display: block; margin-top: 12px; }
.f-makeform { flex: none; margin-top: 16px; }   /* not sticky: the batch page no longer scrolls, so the fine print never slides under it */
.f-opts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
@media (max-width: 900px) {
  .f-imgs.has-panel { grid-template-columns: minmax(0, 1fr); }
  .f-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; border-radius: 16px 16px 0 0; max-height: 78vh; }
  .f-jg__i { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .f-gen.is-pending .f-gen__frame, .f-gen.is-done .f-gen__img img { animation: none; } }
/* stage text follows the slowest pending frame (data-stage set by the island; "busy" without JS) */
.f-batch__busy > span { display: none; } .f-batch__busy .st-busy { display: inline; }
.f-batch:has([data-stage="queue"]) .st-busy, .f-batch:has([data-stage="almost"]):not(:has([data-stage="queue"], [data-stage="busy"])) .st-busy { display: none; }
.f-batch:has([data-stage="queue"]) .st-queue { display: inline; }
.f-batch:has([data-stage="almost"]):not(:has([data-stage="queue"], [data-stage="busy"])) .st-almost { display: inline; }
.f-make .f-examples { margin-top: 18px; }
.f-make .f-sugg--make { display: flex; margin-top: 22px; padding-left: 22px; }   /* the same quiet list as the home */
.f-jg__i img, .f-panel__img { color: transparent; font-size: 0; }   /* a thumbnail that fails stays a quiet grey tile, no alt text spill */
.f-make:not(:has(.f-batch)) .f-makeform { position: static; margin-top: 20vh; }   /* empty Maken: the composer sits centred, like the home */

/* ---------- landing pages (pers, bedrijven, adverteren, …): one readable column, one action ---------- */
.f-land { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 40px 24px 64px; }
.f-land__sent { margin: 0 0 20px; }
.f-hero { padding: 24px 0 8px; }
.f-hero__title { margin: 0; font: 600 40px/1.15 var(--z-sans); letter-spacing: -.03em; color: var(--z-ink); max-width: 18ch; }
.f-hero__lede { margin: 16px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--z-ink-2); }
.f-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.f-sec { margin-top: 56px; }
.f-sec__title { margin: 0 0 16px; font: 600 22px/1.3 var(--z-sans); letter-spacing: -.015em; color: var(--z-ink); }
.f-sec p { max-width: 64ch; font-size: 16px; line-height: 1.65; }
.f-sec--note { padding: 22px 24px; border-radius: var(--z-r-lg); background: var(--z-accent-soft); }
.f-sec--note .f-sec__title { font-size: 18px; margin-bottom: 8px; } .f-sec--note p { margin: 0; }
.f-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.f-steps li { counter-increment: s; display: grid; gap: 6px; padding: 18px; border: 1px solid var(--z-line); border-radius: var(--z-r-lg); background: var(--z-surface); }
.f-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--z-accent-soft); color: var(--z-accent-ink); font-weight: 600; font-size: var(--z-fs-sm); }
.f-steps b { color: var(--z-ink); font-weight: 600; } .f-steps span { font-size: var(--z-fs-sm); color: var(--z-ink-2); line-height: 1.55; }
.f-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-plan h3 { margin: 10px 0 8px; font: 600 18px/1.3 var(--z-sans); color: var(--z-ink); }
.f-plan ul { margin: 0; padding-left: 18px; font-size: var(--z-fs-md); line-height: 1.7; }
.f-faq .z-item__body { font-size: var(--z-fs-md); }
.f-lead { display: grid; gap: 4px; } .f-lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-lead .z-btn { justify-self: start; margin-top: 8px; }
@media (max-width: 760px) { .f-hero__title { font-size: 30px; } .f-steps, .f-cards, .f-lead__row { grid-template-columns: 1fr; } }
.f-lead__news { margin: 6px 0 2px; font-size: var(--z-fs-sm); }
.f-steps--plain li { counter-increment: none; border: 0; background: none; padding: 0; } .f-steps--plain li::before { content: none; }
.f-land__foot { margin: 56px 0 0; text-align: center; font-size: var(--z-fs-sm); color: var(--z-mute); }
.f-home__notice { margin: -8vh auto 28px; width: max-content; max-width: 100%; }
/* chat on phones: the rail opens as a sheet from a "Gesprekken" button (CSS :target, no JS); Nieuw gesprek stays */
.f-railopen, .f-rail__close { display: none; }
@media (max-width: 760px) {
  body:has(.f-chatwrap.has-rail) .f-top .f-new { display: inline-flex; }
  .f-railopen { display: inline-flex; }
  .f-rail:target { display: flex; position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); height: auto; z-index: 40; box-shadow: var(--z-drawer); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .f-rail__close { display: grid; place-items: center; align-self: flex-end; width: 32px; height: 32px; border-radius: 50%; color: var(--z-mute); font-size: 22px; }
  .f-top .f-new { height: 30px; padding: 0 10px; font-size: var(--z-fs-sm); }
}
@media (max-width: 600px) { .f-top__title { display: none; } }
/* signed-in menu: the initial opens Account · Gesprekken · Uitloggen (details, no JS) */
.f-usermenu { position: relative; } .f-usermenu > summary { list-style: none; cursor: pointer; } .f-usermenu > summary::-webkit-details-marker { display: none; }
.f-usermenu__pop { position: absolute; right: 0; top: 40px; z-index: 30; display: grid; min-width: 220px; padding: 6px; background: var(--z-surface);
                   border: 1px solid var(--z-line); border-radius: var(--z-r-md); box-shadow: var(--z-pop); }
.f-usermenu__mail { padding: 8px 10px; font-size: var(--z-fs-xs); color: var(--z-mute); border-bottom: 1px solid var(--z-line-soft); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.f-usermenu__pop a, .f-usermenu__pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: var(--z-r-sm);
                   font: inherit; font-size: var(--z-fs-md); color: var(--z-ink-2); cursor: pointer; }
.f-usermenu__pop a:hover, .f-usermenu__pop button:hover { background: var(--z-hover); color: var(--z-ink); } .f-usermenu__pop form { margin: 0; }

/* "Van het web" next to an AI answer: a compact side column (the answer is the main thing). Zoeken mode keeps full size. */
.f-date::before { content: " · "; }
.f-grid:not(.f-noanswer) .f-web .z-card--pad { padding: 16px 18px; }
.f-grid:not(.f-noanswer) .f-web .f-h { font: 500 13px/1.4 var(--z-sans); color: var(--z-mute); margin: 0 0 4px; }   /* same quiet label as the answer card */
.f-grid:not(.f-noanswer) .f-web .z-result { padding: 12px 0; border-top-color: var(--z-line-soft); }
.f-grid:not(.f-noanswer) .f-web .z-result__crumb { display: flex; align-items: center; min-width: 0; white-space: nowrap; font-size: 12px; }
.f-grid:not(.f-noanswer) .f-web .z-result__crumb b { overflow: hidden; text-overflow: ellipsis; }
.f-grid:not(.f-noanswer) .f-web .f-path { display: none; }
.f-grid:not(.f-noanswer) .f-web .f-date { margin-left: auto; padding-left: 10px; color: var(--z-faint); } .f-grid:not(.f-noanswer) .f-web .f-date::before { content: none; }
.f-grid:not(.f-noanswer) .f-web .f-fav { margin-right: 7px; }
.f-grid:not(.f-noanswer) .f-web .z-result__title { margin: 4px 0 3px; font-size: 15px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-grid:not(.f-noanswer) .f-web .z-result__snippet { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* business entry points on the home (experiment): quiet, never competing with the search box */
.f-bar { gap: 6px; align-items: center; }
.f-biz { padding: 6px 10px; border-radius: var(--z-r-sm); font-size: var(--z-fs-md); font-weight: 500; color: var(--z-ink-2); } .f-biz:hover { background: var(--z-hover); color: var(--z-ink); }
.f-bizline { margin: 28px 0 0; text-align: center; font-size: var(--z-fs-sm); } .f-bizline a { color: var(--z-mute); } .f-bizline a:hover { color: var(--z-accent); }
.f-bizrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 0 20px 2px; font-size: var(--z-fs-sm); }
.f-bizrow a { color: var(--z-ink-2); } .f-bizrow a:hover { color: var(--z-accent); }
/* home in Maken mode: the box is the image composer (format and style chips), its button posts to /images/make */
.f-box__img, .f-homeform .f-box__make { display: none; }
.f-homeform:has(input[name=mode][value=make]:checked) .f-box { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 14px 10px 10px 20px; }
.f-homeform:has(input[name=mode][value=make]:checked) .f-box textarea { height: auto; min-height: 76px; padding: 4px 10px 0 0; font-size: 16px; }
.f-homeform:has(input[name=mode][value=make]:checked) .f-box__bar { justify-content: space-between; margin-top: 6px; }
.f-homeform:has(input[name=mode][value=make]:checked) .f-box__img { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-left: -6px; }
.f-homeform:has(input[name=mode][value=make]:checked) .f-box__go { display: none; }
.f-homeform:has(input[name=mode][value=make]:checked) .f-box__make { display: grid; width: 36px; height: 36px; }
/* phones: five mode pills don't fit 390 px; the row scrolls sideways inside the page (never the page itself) */
@media (max-width: 480px) {
  .f-modes, .f-modelinks { max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .f-modes::-webkit-scrollbar, .f-modelinks::-webkit-scrollbar { display: none; }
  .f-modelinks a { flex: none; } .f-modes span, .f-modelinks a { padding: 0 11px; font-size: 13px; white-space: nowrap; }
}

/* ---------- phones: no sideways scroll, 44px tap targets (Rene 21-10) ---------- */
@media (max-width: 760px) {
  .f-legal { gap: 0 14px; } .f-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .z-logo, .f-signin { min-height: 44px; align-items: center; } .f-signin { display: inline-flex; }
  .f-user { width: 44px; height: 44px; }
  .f-top .z-search { height: 50px; } .f-top .z-search button { width: 42px; height: 42px; }
  /* pills: a 44px tap height, the pill itself stays 36px (transparent top and bottom border, background on the padding box) */
  .f-modelinks { padding: 0 4px; }   /* the 4px above and below is the link's own transparent border: a 44px tap, a 36px pill */
  .f-modelinks a, .f-modelinks a[aria-selected="true"] { height: 44px; border-block: 4px solid transparent; background-clip: padding-box; }   /* z-pills' background shorthand reset the clip */
  /* on its own row the track runs the full width: the pills share it evenly (Rene, ~600px: "is this intended?"), and
     where they don't fit (phones) each keeps its text width and the row scrolls */
  .f-modelinks { width: 100%; } .f-modelinks a { flex: 1 1 0; min-width: max-content; justify-content: center; }
  .f-new { height: 44px; }
  .f-box__model { min-height: 44px; }
  .f-box.f-box--chat button, .f-homeform:has(input[name=mode][value=chat]:checked) .f-box button,
  .f-homeform:has(input[name=mode][value=make]:checked) .f-box__make { width: 44px; height: 44px; }
  /* the thread gets the height: one header row (non-prod links go), the legal footer and the fine print only before
     the first message, a lower composer */
  body:has(.f-chat) .f-adminlink { display: none; }
  body:has(.f-thread .f-msg) .f-foot, .f-chat:has(.f-thread .f-msg) > .f-chat__fine { display: none; }
  .f-box.f-box--chat { padding: 6px 6px 6px 16px; } .f-box.f-box--chat textarea { height: 44px; padding: 10px 4px 10px 0; }
  .f-thread { padding: 16px 16px 20px; } .f-chat > .f-chatform, .f-chat > .f-notice, .f-chat > .f-save, .f-chat > .f-chat__fine { width: calc(100% - 24px); }
  .f-top .f-new, .f-top .f-railopen { height: 44px; }
  .f-fb__row .z-btn { width: 44px; height: 44px; }
  .z-result__title { display: block; padding: 6px 0; }
  .f-top .z-search input { align-self: stretch; } .f-top .z-search button { width: 44px; height: 44px; }
  .f-top .z-search { padding-right: 3px; }
  .f-panel__close { display: grid; place-items: center; width: 44px; height: 44px; }
  .f-linkbtn { min-height: 44px; }
  .f-fb details > summary { display: inline-flex; align-items: center; min-height: 44px; }
}
.f-modes { position: relative; }   /* keeps the hidden radios inside the scrolling pill row (z-seg labels are relative too) */

/* ---------- Bedrijfsbeheer: page layout only; everything visible is a z-* component (docs/DESIGN.md) ---------- */
.b-page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 40px 20px 64px; }
.b-page--nav { max-width: 1010px; }
.b-meta { margin: 6px 0 0; }
.b-body { margin-top: 24px; } .b-page--nav .b-body { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 48px; align-items: start; }
.b-main > :first-child { margin-top: 0; }
.b-gap { margin-top: 24px; } .b-gap-sm { margin-top: 12px; } .b-text { color: var(--z-ink-2); } .b-back { margin: 0; font-size: var(--z-fs-sm); color: var(--z-mute); }
.b-back + .z-section__title { margin-top: 8px; } .b-status { margin-top: 6px; } .b-quiet { color: var(--z-mute); }
.b-sources { margin: 0 0 8px; } .z-list__empty--top { border-top: 1px solid var(--z-line); }
@media (max-width: 900px) { .b-page--nav .b-body { display: block; } .b-nav { margin: -8px 0 20px; } }
@media (max-width: 760px) { .b-page { padding: 20px 16px 48px; } .b-page .z-title { font-size: 24px; } }

/* ---------- opening hours (Bedrijfsbeheer → Gegevens): a week of z-row lines; this only says what shows when ---------- */
.b-hours { margin: 0 0 20px; padding: 0; border: 0; min-inline-size: 0; } .b-hours > legend { margin-bottom: 4px; padding: 0; }
.b-hours__raw { margin: 0 0 8px; } .b-hours__night { display: block; margin-top: 8px; }
.b-day__as { display: none; color: var(--z-mute); }
.b-day__more[open] { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .b-day__more[open] > summary { margin: 0; }
.b-day:not(:has(.b-day__open input:checked)) :is(.b-day__t, .b-day__more) { display: none; }
.b-day:has(.b-day__same input:checked) :is(.b-day__open, .b-day__t, .b-day__more) { display: none; }
.b-day:has(.b-day__same input:checked) .b-day__as { display: inline; }
.b-ph__pick { width: auto; height: 36px; } .b-ph:not(:has(option[value=other]:checked)) .b-ph__t { display: none; }
@media (max-width: 760px) {
  .b-ph__pick { width: 100%; height: 44px; }
  /* phones: the switch and the times share one line; the times already say "open", so only "Gesloten" keeps its word */
  .b-day .z-row__body { flex-wrap: nowrap; } .b-day .z-switch__on { display: none; } .b-day .b-day__t { flex: 1; }
  .b-day .z-row__body:has(.b-day__more) { flex-wrap: wrap; } .b-day__more { flex-basis: 100%; } .b-day__more > summary { min-height: 32px; }
}

/* the empty AI-image page may grow past the window (short phones): the footer then follows the examples instead of sitting on them */
body:not(:has(.f-batch)) .f-chatwrap:has(.f-make) { flex: 1 0 auto; min-height: auto; }

/* ---------- Nieuws (/nieuws): page layout only; the parts are z-tabs and z-list ---------- */
.n-page { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.n-cats { margin-top: 12px; } .n-list, .n-empty { margin-top: 8px; border-top: 0; }
.n-kind { margin-top: 6px; color: var(--z-mute); } .n-kind + .n-list, .n-kind ~ .n-empty { margin-top: 16px; }
a.f-top__title { color: inherit; } a.f-top__title:hover { color: var(--z-ink); }
@media (max-width: 600px) { a.f-top__title { display: inline; } }   /* a type page keeps its way back to Nieuws */
.n-sum { font-size: var(--z-fs-lg); line-height: 1.55; color: var(--z-ink); }
.n-title { margin: 2px 0 0; font: 600 18px/1.35 var(--z-sans); letter-spacing: -.01em; color: var(--z-ink); }   /* the headline leads; the summary follows, quieter */
.n-sum--sub { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--z-ink-2); }
.n-fine { display: block; margin-top: 24px; }
@media (max-width: 760px) { .n-page { padding: 20px 16px 48px; } .n-page .z-title { font-size: 24px; } .n-sum { font-size: 15.5px; } .n-title { font-size: 17px; } .n-sum--sub { font-size: 14.5px; } }

/* ---------- Nieuws in rows (config news.rows; product/mockup/news-rows.html): edge to edge, a 4vw gutter, 5.3 cards ---------- */
.nr-page { --pad: 4vw; --gap: 12px; flex: 1; width: 100%; padding: 32px 0 64px; overflow-x: clip; }
.nr-h1 { padding: 0 var(--pad); }
.nr-row { --card: calc((100vw - var(--pad) - 5 * var(--gap)) / 5.3); position: relative; margin-top: 32px; }
.nr-row--top { --card: calc((100vw - var(--pad) - 4 * var(--gap)) / 4.3); }
@media (min-width: 1800px) { .nr-row { --card: calc((100vw - var(--pad) - 6 * var(--gap)) / 6.3); } .nr-row--top { --card: calc((100vw - var(--pad) - 5 * var(--gap)) / 5.3); } }
.nr-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--pad); }
.nr-row__title { margin: 0; font: 600 18px/1.3 var(--z-sans); letter-spacing: -.01em; color: var(--z-ink); }
.nr-row__more { font-size: var(--z-fs-sm); color: var(--z-mute); } .nr-row__more:hover { color: var(--z-ink); }
.nr-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); gap: var(--gap); margin-top: 12px; padding: 0 var(--pad) 4px;
             overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scroll-behavior: smooth; scrollbar-width: none; }
.nr-scroll::-webkit-scrollbar { display: none; }
.nr-card { position: relative; min-width: 0; scroll-snap-align: start; } .nr-card--lead { grid-column: span 2; }
.nr-card__a { display: block; color: inherit; text-decoration: none; }
.nr-card__img { display: block; height: calc(var(--card) / 1.6); border-radius: var(--z-r-lg); overflow: hidden; background: var(--z-line-soft); }
.nr-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nr-card__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font: 600 15px/1.35 var(--z-sans); color: var(--z-ink); }
.nr-row--top .nr-card__t { -webkit-line-clamp: 2; font-size: 18px; letter-spacing: -.01em; } .nr-card--lead .nr-card__t { font-size: 22px; }
.nr-card__a:hover .nr-card__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* no licensed photo: the card keeps its shape, the headline sits in the frame */
.nr-card--text .nr-card__a { display: flex; align-items: flex-end; height: calc(var(--card) / 1.6); padding: 14px; border: 1px solid var(--z-line); border-radius: var(--z-r-lg); background: var(--z-surface); }
.nr-card--text .nr-card__t { margin: 0; -webkit-line-clamp: 4; }
.nr-card__m { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--z-fs-sm); color: var(--z-mute); white-space: nowrap; }
.nr-card__m .f-fav { margin: 0; flex: none; } .nr-card__out { overflow: hidden; text-overflow: ellipsis; color: var(--z-ink-2); }
.nr-card__m time::before { content: "·"; margin-right: 6px; color: var(--z-faint); }
/* the photo's line (maker, licence) behind a small i over the photo; tap or click */
.nr-lic { position: absolute; top: calc(var(--card) / 1.6 - 32px); right: 8px; }
.nr-lic summary { width: 24px; height: 24px; border-radius: 50%; background: var(--z-scrim); color: var(--z-on-dark); font: 600 12px/24px var(--z-sans);
                  text-align: center; list-style: none; cursor: pointer; opacity: .85; } .nr-lic summary::-webkit-details-marker { display: none; }
.nr-lic p { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: min(320px, calc(var(--card) - 16px)); margin: 0; padding: 8px 10px; border-radius: var(--z-r-md); background: var(--z-scrim); color: var(--z-on-dark); font-size: var(--z-fs-xs); line-height: 1.4; }
.nr-lic a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* arrows (z.js shows them where the row overflows): half-transparent panels over the photos, page by a screen */
.nr-arr { position: absolute; z-index: 1; top: 37px; width: var(--pad); height: calc(var(--card) / 1.6); border: 0; padding: 0; cursor: pointer;
          background: var(--z-glass); color: var(--z-ink); font: 400 28px/1 var(--z-sans); opacity: 0; transition: opacity var(--z-t); }
.nr-arr--l { left: 0; } .nr-arr--r { right: 0; } .nr-row:hover .nr-arr, .nr-arr:focus-visible { opacity: 1; }
@media (hover: none) { .nr-arr { display: none; } }
.nr-fine { display: block; margin: 40px var(--pad) 0; }
@media (max-width: 760px) {
  .nr-page { --pad: 16px; padding-top: 20px; } .nr-row { --card: calc((100vw - 32px - 12px) / 1.3); margin-top: 28px; } .nr-row--top { --card: calc(100vw - 60px); }
  .nr-card--lead { grid-column: auto; } .nr-card--lead .nr-card__t { font-size: 18px; } .nr-row__more { display: inline-flex; align-items: center; min-height: 44px; }
  .nr-lic summary { width: 32px; height: 32px; line-height: 32px; } .nr-lic { top: calc(var(--card) / 1.6 - 40px); }
}

/* ---------- 404: one sentence, a search box, the way home ---------- */
.nf-page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 14vh 20px 64px; }
.nf-search { margin-top: 24px; height: 54px; } .nf-search input { font-size: 16px; }
.nf-home { margin-top: 16px; font-size: var(--z-fs-sm); }
@media (max-width: 760px) { .nf-page { padding: 32px 16px 48px; } }
/* deterrence (legal 2026-10-23): calm, readable, no alarm colours; the same block in chat (.f-msg .dt-msg) */
.dt-page { padding-top: 10vh; } .dt-msg { max-width: 60ch; } .dt-msg p { margin: 12px 0 0; line-height: 1.6; color: var(--z-ink-2); }
.dt-msg a { color: var(--z-accent); } .dt-msg__t { margin: 0; }
.f-msg .dt-msg__t { font-size: var(--z-fs-lg); }

/* sources: one quiet row of favicons and outlet names; open, one line per article (Rene: "rommelig", 21-10) */
.n-list > .z-list__row { min-height: 0; padding: 12px 0; } .n-list > .z-list__row > * + * { margin-top: 2px; }   /* tighter between stories (Rene, 22-10) */
.n-srcs > summary { list-style: none; cursor: pointer; } .n-srcs > summary::-webkit-details-marker { display: none; }
/* one quiet meta line: category · favicon outlet [lock] + n andere bronnen · 2 uur geleden; only the outlet gives way */
.n-meta { display: flex; align-items: center; overflow: hidden; min-height: 28px; font-size: var(--z-fs-sm); color: var(--z-mute); white-space: nowrap; }
.n-m { flex: none; } .n-m + .n-m::before { content: "·"; margin: 0 6px; color: var(--z-faint); }
.n-m--src { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.n-m + .n-m--src::before { margin-right: 0; }
.n-out { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--z-ink-2); }
.n-more { flex: none; } .n-more__short { display: none; }
@media (max-width: 480px) { .n-more__long { display: none; } .n-more__short { display: inline; } }   /* a phone says "+ 3": the outlet and the time stay whole */
.n-pay { flex: none; width: 13px; height: 13px; color: var(--z-faint); }
summary.n-meta:hover .n-out, summary.n-meta:hover .n-more { color: var(--z-ink); }
.n-title__a { color: inherit; text-decoration: none; } .n-title__a:hover { text-decoration: underline; text-underline-offset: 3px; }
.n-srcs[open] .n-meta { margin-bottom: 4px; }
.n-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--z-line-soft); }
.n-row { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0;
         border-bottom: 1px solid var(--z-line-soft); font-size: var(--z-fs-sm); color: var(--z-ink-2); text-decoration: none; }
.n-row:hover .n-row__title { color: var(--z-ink); text-decoration: underline; text-underline-offset: 2px; }
.n-row__outlet { font-weight: 500; color: var(--z-ink); white-space: nowrap; }
.n-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-row__pay { width: 14px; height: 14px; color: var(--z-faint); } .n-row:not(:has(.n-row__pay)) .n-row__when { grid-column: 5; }
.n-row__when { color: var(--z-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .n-row { min-height: 44px; gap: 8px; } .n-row__day { display: none; } .n-meta { min-height: 36px; } }
.n-srcs .f-fav, .n-meta .f-fav { margin: 0; vertical-align: middle; }


/* dev and staging only: a quiet way to this environment's admin (Shell.AdminURL; never in prod) */
.f-adminlink { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: var(--z-r-sm); font-size: var(--z-fs-sm); color: var(--z-faint); }
.f-adminlink:hover { background: var(--z-hover); color: var(--z-ink); }
@media (max-width: 760px) { .f-adminlink { min-height: 44px; } }

/* ---------- Account (/account): Google Account's structure, our minimum. Page layout + the row; the parts are z-* ---------- */
.ac-page { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 48px; width: 100%; max-width: 1010px; margin: 0 auto; padding: 32px 20px 64px; align-items: start; }
.ac-main > .z-title { margin-bottom: 4px; } .ac-gap { margin-top: 20px; }
.ac-card { margin-top: 20px; } .ac-card__title { margin: 0; padding: 16px 20px 6px; font: 600 var(--z-fs-lg)/1.3 var(--z-sans); color: var(--z-ink); }
.ac-card__body { padding: 8px 20px 20px; } .ac-card__body .z-alert { margin-bottom: 12px; } .ac-card__foot { padding: 12px 20px 16px; border-top: 1px solid var(--z-line-soft); }
.ac-row { display: grid; grid-template-columns: 20px minmax(120px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 56px; padding: 8px 20px;
          border-top: 1px solid var(--z-line-soft); color: var(--z-ink-2); text-decoration: none; }
.ac-card__title + .ac-row, .ac-card > .ac-row:first-child { border-top: 0; }
.ac-row form { margin: 0; } .ac-ico { color: var(--z-mute); }
.ac-row__label { font-weight: 500; color: var(--z-ink); } .ac-row__value { color: var(--z-ink-2); overflow-wrap: break-word; }
.ac-row--link:hover { background: var(--z-hover); } .ac-row--danger .ac-row__label, .ac-row--danger .ac-ico { color: var(--z-danger); }
.ac-empty { margin: 0; padding: 4px 20px 12px; color: var(--z-mute); }
.ac-hello { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.ac-hello__av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--z-accent-soft); color: var(--z-accent); font: 600 26px var(--z-sans); text-transform: uppercase; }
.ac-hello__mail { margin: 0; font: 600 var(--z-fs-xl)/1.3 var(--z-sans); color: var(--z-ink); overflow-wrap: anywhere; }
.ac-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px; color: var(--z-ink); }
.ac-code { font: 500 20px/1 var(--z-mono); letter-spacing: .3em; text-align: center; }
.ac-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--z-fs-sm); } .ac-links form { margin: 0; } .ac-quiet { color: var(--z-mute); }
.ac-tabbar { display: none; }
@media (max-width: 760px) {
  .ac-page { display: block; padding: 20px 16px calc(88px + env(safe-area-inset-bottom)); }
  .ac-side { display: none; }
  .ac-row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 16px; }
  .ac-row__label { grid-column: 2; } .ac-row__value { grid-column: 2; grid-row: 2; font-size: var(--z-fs-sm); }
  .ac-row > form, .ac-row > svg:last-child:not(:first-child) { grid-column: 3; grid-row: 1 / span 2; }
  .ac-card__title { padding: 14px 16px 4px; } .ac-card__body { padding: 8px 16px 16px; } .ac-card__foot { padding: 12px 16px; }
  .ac-card__foot .z-btn, .ac-gap .z-btn { width: 100%; height: 44px; justify-content: center; }
  .ac-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
               padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--z-surface); border-top: 1px solid var(--z-line); }
  .ac-tabbar a { display: grid; justify-items: center; gap: 2px; min-height: 48px; padding-top: 4px; font-size: 11px; color: var(--z-mute); text-decoration: none; }
  .ac-tabbar a[aria-current="page"] { color: var(--z-accent); font-weight: 500; } .ac-tabbar .ac-ico { color: inherit; }
  body:has(.ac-tabbar) .f-foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.ac-side a { gap: 10px; } .ac-main .ac-card + .ac-card { margin-top: 16px; }
/* training opt-in (Privacy): one switch; the rest shows once it is on (server-rendered, no JS needed) */
.ac-train__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 20px; cursor: pointer; }
.ac-train__head .ac-card__title { padding-bottom: 16px; }
.ac-train__lead { display: block; margin: -8px 0 0; padding: 0 20px 16px; font-size: var(--z-fs-sm); color: var(--z-mute); }
summary.ac-train__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; list-style: none; }
summary.ac-train__head::-webkit-details-marker { display: none; } summary.ac-train__head .ac-train__lead { grid-column: 1 / -1; margin-top: 0; }
summary.ac-train__head .ac-card__title { padding-bottom: 6px; }
.ac-train__sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--z-line-strong); }   /* the off switch's look; not a control */
.ac-train__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--z-surface); box-shadow: var(--z-knob); }
.ac-train__more, .ac-train__off { display: none; padding: 0 20px 20px; }
.ac-train__d .ac-train__more, .ac-train:has(input[name=on][type=checkbox]:checked) .ac-train__more,
.ac-train[data-saved]:has(input[name=on]:not(:checked)) .ac-train__off { display: block; }
.ac-train__more > * + * { margin-top: 14px; }
.ac-train__kinds { display: grid; gap: 4px; margin-inline: 0; padding: 0; border: 0; } .ac-train__kinds legend { padding: 0; } .ac-train__kinds .z-check { min-height: 36px; }
.ac-train__facts { margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--z-line-soft); display: grid; gap: 8px;
                   font-size: var(--z-fs-sm); line-height: 1.5; color: var(--z-ink-2); }
.ac-train__facts b { color: var(--z-ink); font-weight: 600; }
@media (max-width: 760px) { .ac-train__head { padding-right: 16px; } .ac-train__lead, .ac-train__more, .ac-train__off { padding-inline: 16px; }
  .ac-train__kinds .z-check, .ac-train__adult { min-height: 44px; } .ac-train__act .z-btn, .ac-train__off .z-btn { width: 100%; height: 44px; justify-content: center; } }
/* emergency line (red-flag health queries): full width above answer and results, calm, the number one tap away */
.f-safety { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--z-r-md); background: var(--z-accent-soft); color: var(--z-ink); }
.f-safety + .f-safety { margin-top: -12px; }
.f-safety__text { flex: 1; min-width: 0; line-height: 1.45; } .f-safety__text b { font-weight: 600; } .f-safety__text span { color: var(--z-ink-2); }
.f-safety__src { margin-left: 4px; font-size: var(--z-fs-sm); color: var(--z-mute); white-space: nowrap; }
.f-safety__call { flex: none; }
@media (max-width: 640px) { .f-safety { flex-direction: column; align-items: stretch; gap: 10px; } .f-safety__call { justify-content: center; } }

/* ---------- AI-check (public page and the Bedrijfsbeheer section share .ai-result) ---------- */
.ai-page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
.ai-form { display: flex; align-items: flex-end; gap: 8px; margin: 20px 0 24px; } .ai-form .z-field { flex: 1; min-width: 0; margin: 0; }
.ai-page > .z-list { margin-top: 8px; }
.ai-addr { margin-top: 6px; color: var(--z-mute); }
.ai-teaser { margin-bottom: 24px; }
.ai-note { margin-top: 12px; font-size: var(--z-fs-sm); color: var(--z-mute); }
.ai-head { display: flex; align-items: center; gap: 12px; } .ai-head .z-section__title { margin: 0; } .ai-head form { margin-left: auto; }
.ai-q { margin-top: 16px; font-size: var(--z-fs-sm); color: var(--z-mute); }
.ai-result .ai-ans { margin-top: 12px; }
.ai-ans__head { display: flex; align-items: baseline; gap: 10px; }
.ai-ans__who { font-weight: 600; color: var(--z-ink); } .ai-ans__when { margin-left: auto; font-size: var(--z-fs-sm); color: var(--z-mute); font-variant-numeric: tabular-nums; }
.ai-ans__text { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--z-line); color: var(--z-ink-2); line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; }
.ai-ans__none { margin-top: 10px; color: var(--z-mute); }
.ai-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--z-line-soft); }
.ai-facts dt { font-size: var(--z-fs-sm); color: var(--z-mute); } .ai-facts dd { margin: 4px 0 0; }
.ai-was { display: block; margin-top: 4px; font-size: var(--z-fs-sm); color: var(--z-mute); overflow-wrap: break-word; } .ai-was s { color: var(--z-faint); }
.ai-osm { display: block; margin-top: 12px; }
.ai-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; } .ai-fix .ai-note { margin: 0; }
@media (max-width: 640px) {
  .ai-page { padding: 20px 16px 48px; } .ai-page .z-title { font-size: 24px; }
  .ai-form { flex-direction: column; align-items: stretch; } .ai-form .z-btn { justify-content: center; }
  .ai-facts { grid-template-columns: minmax(0, 1fr); gap: 0; } .ai-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; }
  .ai-facts dd { margin: 0; } .ai-facts .ai-was { grid-column: 1 / -1; }
  .ai-fix .z-btn { width: 100%; }
}
/* image composer options (Rene, 22-10): three shapes with names; Vrij · Foto · Meer stijlen with a grid of AI-made examples */
.f-ratio span { gap: 6px; } .f-ratio svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.f-stylebar { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.f-stylebar .z-seg label { cursor: pointer; }
.f-stylebar:has(#st-:checked) label[for="st-"] span, .f-stylebar:has(#st-foto:checked) label[for="st-foto"] span, .f-stylebar__pick span { background: var(--z-surface); color: var(--z-ink); font-weight: 500; box-shadow: var(--z-lift); }
.f-styles > summary { list-style: none; display: inline-flex; align-items: center; height: 30px; padding: 0 8px; font-size: var(--z-fs-xs); color: var(--z-mute); cursor: pointer; white-space: nowrap; }
.f-styles > summary::-webkit-details-marker { display: none; } .f-styles > summary:hover, .f-styles[open] > summary { color: var(--z-ink); }
.f-styles__pop { position: absolute; left: 0; top: calc(100% + 10px); z-index: 20; width: 600px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 14px; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-r-lg); box-shadow: var(--z-pop); }
.f-make .f-batch ~ .f-makeform .f-styles__pop, .f-batch ~ * .f-styles__pop { top: auto; bottom: calc(100% + 10px); }   /* with a batch above, the composer sits low: open upwards */
.f-styles__head { margin: 0 0 10px; font-weight: 600; color: var(--z-ink); } .f-styles__head span { margin-left: 6px; font-weight: 400; font-size: var(--z-fs-xs); color: var(--z-mute); }
.f-styles__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px 8px; }   /* 13 styles: two rows */
.f-style { position: relative; display: grid; gap: 5px; font-size: 12px; line-height: 1.25; color: var(--z-ink-2); text-align: center; cursor: pointer; }
.f-style input { position: absolute; opacity: 0; }
.f-style img, .f-style__free { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; outline: 2px solid transparent; outline-offset: 2px; background: var(--z-track); }
.f-style__free { display: grid; place-items: center; border: 1px dashed var(--z-line-strong); background: var(--z-surface); color: var(--z-faint); } .f-style__free .z-icon { width: 22px; height: 22px; }   /* Vrij: no style, the model chooses */
.f-style:hover img, .f-style:hover .f-style__free { outline-color: var(--z-line-strong); }
.f-style:has(input:checked) img, .f-style:has(input:checked) .f-style__free { outline-color: var(--z-accent); } .f-style:has(input:checked) { color: var(--z-ink); font-weight: 500; }
.f-style:has(input:focus-visible) img { outline-color: var(--z-accent); box-shadow: var(--z-ring); }
@media (max-width: 760px) {
  .f-ratio span { padding: 0 8px; }
  .f-styles[open]::before { content: ""; position: fixed; inset: 0; z-index: 19; background: var(--z-scrim-soft); }
  .f-styles__pop, .f-make .f-batch ~ .f-makeform .f-styles__pop, .f-batch ~ * .f-styles__pop { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 80vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .f-styles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
}
/* image rail: a line-high thumbnail of the batch's image before its prompt (Rene: the colours help recognise it) */
.f-rail__item > a:has(.f-rail__thumb) { display: flex; align-items: center; gap: 9px; }
.f-rail__item > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-rail__thumb { flex: none; width: 22px; height: 22px; border-radius: 5px; object-fit: cover; background: var(--z-line-soft); }

/* stacked (no column next to the answer): the top 5 and the rest read as one list under "Van het web" (Rene, 2026-10-22) */
@media (max-width: 1000px) {
  .f-grid .f-web .z-card.z-card--pad:has(+ .f-web__more) { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; box-shadow: none; }
  .f-grid .f-web .z-card + .z-card.z-card--pad.f-web__more { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
  .f-web__more > .f-h { display: none; } .f-web .f-web__more .z-result:first-of-type { border-top: 1px solid var(--z-line-soft); }
}
/* the way to news (Rene, 22-10): a quiet "Nieuws" next to Inloggen, and on a place query its newest headlines above the
   web results (headline, outlet, time; a link to the place's news page) */
.f-newslink { display: inline-flex; align-items: center; font-size: var(--z-fs-md); color: var(--z-mute); padding: 6px 10px; border-radius: var(--z-r-sm); }
.f-newslink:hover { background: var(--z-hover); color: var(--z-ink); }
@media (max-width: 760px) { .f-newslink { min-height: 44px; padding: 0 8px; } body:has(.f-chat) .f-newslink { display: none; } }
.f-pnews .f-h { margin-bottom: 4px; }
.f-pnews__it { display: block; padding: 10px 0; border-top: 1px solid var(--z-line-soft); color: inherit; text-decoration: none; }
.f-pnews__it:first-of-type { border-top: 0; }
.f-pnews__h { display: block; font: 500 15px/1.35 var(--z-sans); color: var(--z-ink); }
.f-pnews__it:hover .f-pnews__h { color: var(--z-accent); }
.f-pnews__m { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--z-mute); }
.f-pnews__m .f-fav { margin: 0; } .f-pnews__m time { margin-left: auto; color: var(--z-faint); font-variant-numeric: tabular-nums; }
.f-pnews__pay { width: 13px; height: 13px; color: var(--z-faint); }
.f-pnews__more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; font-size: var(--z-fs-sm); font-weight: 500; color: var(--z-accent); }
@media (max-width: 760px) { .f-pnews__more { min-height: 44px; } }
@media (max-width: 760px) { .f-top:has(.z-search) .f-newslink { display: none; } }   /* phones: the search box keeps its width; the place card links to news there */
/* Uitgeversaccount (uitgevers.html): Bedrijfsbeheer's layout; tiles on the overview, the /nieuws row as preview */
.p-name { display: flex; align-items: center; gap: 10px; } .p-name .f-fav { width: 20px; height: 20px; flex: none; }
.p-url { margin: 2px 0 0; font: 400 var(--z-fs-xs)/1.4 var(--z-mono, ui-monospace, monospace); color: var(--z-mute); overflow-wrap: anywhere; }
.p-form { display: grid; gap: 14px; max-width: 560px; } .p-form .z-section__title { margin: 0; }
.p-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-file { padding-top: 9px; }
.p-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.p-tile { display: grid; gap: 4px; padding: 14px 16px; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-r-md); }
.p-tile span { font-size: var(--z-fs-sm); } .p-tile b { font: 600 24px/1.1 var(--z-sans); color: var(--z-ink); font-variant-numeric: tabular-nums; }
.p-since { margin: 8px 0 0; font-size: var(--z-fs-sm); }
.p-preview { display: block; max-width: 560px; padding: 14px 16px; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-r-md); }
.p-preview__h { display: block; font: 500 15px/1.35 var(--z-sans); color: var(--z-ink); }
.p-preview__m { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--z-mute); } .p-preview__m time { margin-left: auto; color: var(--z-faint); }
@media (max-width: 760px) { .p-three { grid-template-columns: minmax(0, 1fr); } .p-tiles { gap: 8px; } .p-tile { padding: 12px; } .p-tile b { font-size: 20px; } }
.p-stop { align-items: flex-start; flex-wrap: wrap; } .p-stop form { margin: 0; }
@media (max-width: 760px) { body:has(.f-land) .f-newslink { display: none; } }   /* landing pages: "Naar zoeken" and Inloggen keep one row */
body:has(:is(.n-page, .nr-page)) [data-news] { display: none; }   /* news pages already say Nieuws beside the logo (cos, 22-10) */
.p-form .z-field { margin: 0; } .p-form .z-actions { margin-top: 4px; }
.p-url--title { margin: 0; color: var(--z-ink-2); font-size: var(--z-fs-sm); }
.p-err { margin: 4px 0 0; font-size: var(--z-fs-sm); color: var(--z-danger); }
/* Winkelen (/winkelen, off in prod): one search field, then product cards; free listings, the note stays under them */
.s-page { flex: 1; width: 100%; max-width: 1010px; margin: 0 auto; padding: 24px 20px 64px; }
.s-search { display: flex; align-items: center; gap: 6px; max-width: 640px; padding: 4px 4px 4px 18px; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-r-full); }
.s-search .z-input { flex: 1; border: 0; background: transparent; padding: 0; height: 40px; font-size: 16px; } .s-search .z-input:focus-visible { box-shadow: none; }
.s-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.s-card { display: grid; gap: 4px; height: 100%; padding: 12px; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-r-md); color: inherit; text-decoration: none; }
.s-card:hover { border-color: var(--z-line-strong); }
.s-card__img { display: block; aspect-ratio: 1; margin-bottom: 6px; border-radius: var(--z-r-sm); background: var(--z-track); overflow: hidden; }
.s-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s-card__t { font: 500 14px/1.35 var(--z-sans); color: var(--z-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-card__p { font: 600 15px/1.3 var(--z-sans); color: var(--z-ink); font-variant-numeric: tabular-nums; }
.s-card__a { font-size: 12px; color: var(--z-mute); } .s-card__a--ok { color: var(--z-ok); }
.s-card__shop { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--z-mute); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-none { margin-top: 24px; } .s-note { margin: 24px 0 0; font-size: var(--z-fs-xs); color: var(--z-faint); }
@media (max-width: 760px) { .s-page { padding: 16px 12px 48px; } .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s-card { padding: 10px; } }
.s-card__shop span { overflow: hidden; text-overflow: ellipsis; } .s-card__shop .f-fav { flex: none; }
.s-card__img:has(img) { background: var(--z-surface); }   /* a photo sits on the card, not in a grey box (cos) */

/* account phone: a small country select before the number (Rene, 23-10) */
.ac-phone { display: flex; gap: 8px; } .ac-phone__cc { flex: none; width: auto; padding-right: 28px; } .ac-phone input { flex: 1; min-width: 0; }
/* the country picker (z.js enhances select[data-flags]; flags: static/flags, lipis/flag-icons) */
.cc { position: relative; flex: none; display: inline-flex; } .z-card:has(.cc) { overflow: visible; }   /* the list may hang below the card */
.cc-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.cc-flag { flex: none; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px var(--z-line-strong); object-fit: cover; }
.cc-flag--globe { box-shadow: none; color: var(--z-mute); stroke-width: 1.6; height: 18px; width: 20px; }
.cc-list { position: absolute; z-index: 5; left: 0; top: calc(100% + 4px); min-width: 160px; margin: 0; padding: 4px; list-style: none; background: var(--z-surface);
           border: 1px solid var(--z-line); border-radius: var(--z-r-md); box-shadow: var(--z-pop); outline: none; }
.cc-list li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--z-r-sm); cursor: pointer; font-size: var(--z-fs-md); color: var(--z-ink-2); }
.cc-list li[aria-selected="true"], .cc-list li:hover { background: var(--z-hover); color: var(--z-ink); }
@media (max-width: 760px) { .cc-list li { min-height: 44px; } }