/* =============================================================================
   D.M. SOCIAL & MARKETING — KLANTPORTAAL (portaal.css)
   -----------------------------------------------------------------------------
   Bouwt op /assets/site.css: de tokens (papier, inkt, roze), de lettertypes,
   .btn, .veld, .skip-link en .visueel-verborgen komen daarvandaan. Hier staat
   alleen wat het portaal extra nodig heeft.

   Mobiel eerst; vanaf 900 px de computerversie (navigatie bovenin in plaats
   van de onderbalk). Rustig: weinig beweging, grote knoppen, duidelijke
   focus. De site heeft geen donkere modus, het portaal dus ook niet
   (<meta name="color-scheme" content="light">).

   Alle klassen beginnen met p- zodat ze nooit botsen met site.css.
   Geen inline stijlen (strikte CSP): de app zet alleen klassen en attributen.
   ============================================================================= */

:root {
  --p-max: 60rem;
  --p-gutter: clamp(1rem, 4vw, 2rem);
  --p-tabbar-h: 4rem;
  --p-radius: 1rem;
  --p-schaduw: 0 1px 2px rgba(31, 26, 27, .04), 0 10px 24px -20px rgba(31, 26, 27, .35);
  --p-amber: #7A4B00;          /* tekst op geel, 7:1 */
  --p-groen-zacht: #DDF3E8;
  --p-blauw: #1F4E8C;
  --p-blauw-zacht: #E6EEF9;
}

.portaal [hidden] { display: none !important; }


/* ─────────────────────────────────────────────────────────────
   1. PAGINA
   ───────────────────────────────────────────────────────────── */
body.portaal {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.portaal.is-ingelogd { padding-bottom: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body.portaal.is-ingelogd { padding-bottom: 0; } }
/* Staat het uploadpaneel er (vast onderin), dan krijgt de pagina onderaan net zoveel
   ruimte extra: alles is erboven te scrollen, niets verdwijnt erachter (app.js meet
   het paneel en zet --p-uploads-h). */
@media screen {
  html.p-heeft-uploads body.portaal { padding-bottom: calc(var(--p-uploads-h, 0px) + 1.5rem); }
  html.p-heeft-uploads body.portaal.is-ingelogd { padding-bottom: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--p-uploads-h, 0px) + 1rem); }
}
@media screen and (min-width: 900px) {
  html.p-heeft-uploads body.portaal.is-ingelogd { padding-bottom: calc(var(--p-uploads-h, 0px) + 2.5rem); }
}
/* Met Tab naar een knop die net achter het paneel valt: de browser scrolt hem erboven
   (WCAG 2.4.11). Alleen met muis en toetsenbord; op een telefoon zou dit samen met het
   schermtoetsenbord een tekstvak onnodig hoog wegschuiven. */
@media screen and (hover: hover) and (pointer: fine) {
  html.p-heeft-uploads { scroll-padding-bottom: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--p-uploads-h, 0px) + 1rem); }
}
@media screen and (hover: hover) and (pointer: fine) and (min-width: 900px) {
  html.p-heeft-uploads { scroll-padding-bottom: calc(var(--p-uploads-h, 0px) + 2.5rem); }
}

.p-wrap { width: min(100% - 2 * var(--p-gutter), var(--p-max)); margin-inline: auto; }
.p-main { flex: 1; padding-block: 1.5rem 3rem; outline: none; }
.p-smal { max-width: 32rem; margin-inline: auto; }

/* Rustigere koppen dan op de marketingpagina's */
.p-main h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; outline: none; }
.p-main h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.2; }
.p-main h3 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }

.p-kopblok { margin-bottom: 1.25rem; }
.p-hand {
  display: inline-block; margin-bottom: .3rem;
  font-family: var(--font-hand); font-size: 1.55rem; font-weight: 600; line-height: 1;
  color: var(--roze-diep); transform: rotate(-1.5deg);
}
.p-main h2.p-hand { font-size: 1.55rem; letter-spacing: 0; }
.p-intro { margin-top: .5rem; max-width: 38rem; color: var(--ink-2); }
.p-sectie { margin-top: 2rem; }
.p-sectie > h2 { margin-bottom: .75rem; }
.p-klein { font-size: .9rem; line-height: 1.45; }
.p-muted { color: var(--muted); }
.p-onder { margin-top: 1.5rem; }
.p-fout { color: var(--fout); font-weight: 600; }
.p-goed { color: var(--goed); font-weight: 600; }
.p-goed .p-icoon { vertical-align: -.2em; }
.p-link {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--roze-diep);
  text-decoration: underline; text-underline-offset: .2em;
}
.p-link:hover, .p-link:focus-visible { color: var(--roze-donker); }
.p-laden { padding: 2rem 0; color: var(--muted); }
.p-laden::before {
  content: ''; display: inline-block; width: 1rem; height: 1rem; margin-right: .6rem; vertical-align: -.15rem;
  border: 2px solid var(--roze-zacht); border-top-color: var(--roze-diep); border-radius: 50%;
  animation: p-draai .8s linear infinite;
}
@keyframes p-draai { to { transform: rotate(360deg); } }
.p-noscript { margin-top: 1rem; }

/* Iconen (lijnen; WhatsApp gevuld) */
.p-icoon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-icoon-vol { fill: currentColor; stroke: none; }
.btn .p-icoon { width: 1.1em; height: 1.1em; }


/* ─────────────────────────────────────────────────────────────
   2. KOP, NAVIGATIE, ONDERBALK, VOET
   ───────────────────────────────────────────────────────────── */
.p-kop {
  position: sticky; top: 0; z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .p-kop { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
}
.p-kop-in { display: flex; align-items: center; gap: .75rem; min-height: 3.75rem; }
.p-merk { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; text-decoration: none; }
.p-merk img { height: 2rem; width: auto; aspect-ratio: 153 / 96; }
.p-merk-sub { margin-top: .2rem; font-family: var(--font-hand); font-size: 1.35rem; line-height: 1; color: var(--roze-diep); }

.p-org {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 12rem; min-height: 2.5rem;
  padding: .35rem .8rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card);
  font-size: .85rem; font-weight: 700; color: var(--ink); cursor: pointer;
}
.p-org:disabled { cursor: default; border-color: transparent; background: transparent; padding-inline: .25rem; }
.p-org:not(:disabled):hover, .p-org:not(:disabled):focus-visible { border-color: var(--ink); }
.p-org-naam { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-org .p-icoon { width: 1rem; height: 1rem; color: var(--roze-diep); }

.p-nav { display: none; }
@media (min-width: 900px) {
  .p-nav:not([hidden]) { display: flex; gap: 1.4rem; }
  .p-nav a { position: relative; padding: .25rem 0; font-size: .95rem; font-weight: 600; text-decoration: none; }
  .p-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
    background: var(--roze-diep); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
  }
  .p-nav a:hover::after, .p-nav a:focus-visible::after, .p-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .p-nav a[aria-current="page"] { color: var(--roze-diep); }
}

.p-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(31, 26, 27, .35);
}
.p-tabbar a {
  display: grid; justify-items: center; align-content: center; gap: .15rem;
  min-height: var(--p-tabbar-h); padding: .4rem .25rem;
  font-size: .75rem; font-weight: 700; color: var(--muted); text-decoration: none;
}
.p-tabbar a[aria-current="page"] { color: var(--roze-diep); }
.p-tabbar a:focus-visible { outline-offset: -4px; }
.p-tab-icoon { display: grid; place-items: center; }
.p-tab-icoon .p-icoon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 900px) { .p-tabbar { display: none !important; } }

.p-voet { padding: 1.25rem 0; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.p-voet-in { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.p-voet a { color: inherit; text-underline-offset: .2em; }
.p-voet a:hover, .p-voet a:focus-visible { color: var(--ink); }


/* ─────────────────────────────────────────────────────────────
   3. KAARTEN, KNOPPEN, MELDINGEN
   ───────────────────────────────────────────────────────────── */
.p-kaart {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--p-radius);
  padding: 1.1rem 1.15rem; box-shadow: var(--p-schaduw);
}
.p-kaart > h2, .p-kaart > h3 { margin-bottom: .6rem; }
.p-kaart > * + p, .p-kaart > * + ul { margin-top: .5rem; }
.p-kaart .veld { margin-top: .75rem; }
.p-kaart .p-knoppen + p { margin-top: .75rem; }
.p-kaarten { display: grid; gap: .75rem; }
@media (min-width: 700px) { .p-kaarten.is-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.btn { min-height: 2.75rem; }
.btn-klein { min-height: 2.5rem; }
.p-btn-groot { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
@media (min-width: 600px) { .p-btn-groot { width: auto; } }
.p-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }

.p-tip {
  display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem;
  padding: .8rem 1rem; border-radius: .75rem; background: var(--roze-waas);
  font-size: .95rem; color: var(--ink);
}
.p-tip .p-icoon { margin-top: .15rem; color: var(--roze-diep); }
.p-tip.is-fout { display: block; background: #FDECEE; }
.p-tip.is-fout ul { margin-top: .4rem; display: grid; gap: .25rem; }
/* "Dionne heeft je bestanden opgehaald" (finetunen 30-09) */
.p-tip.p-opgepakt { margin: .25rem 0 .75rem; background: var(--p-groen-zacht); font-weight: 600; }
.p-tip.p-opgepakt .p-icoon { color: var(--goed); }

.p-leeg {
  margin-top: 1rem; padding: 1.75rem 1.25rem; text-align: center;
  background: var(--paper-2); border-radius: var(--p-radius); color: var(--ink-2);
}
.p-leeg .p-hand { margin-bottom: .4rem; }

.p-voortgang { margin-bottom: .75rem; font-weight: 700; color: var(--goed); }

.p-melding {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 4.5rem); z-index: 1100;
  max-width: min(28rem, calc(100vw - 2rem)); padding: .75rem 1.1rem; border-radius: .75rem;
  background: var(--ink); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.4;
  box-shadow: 0 16px 36px -18px rgba(31, 26, 27, .6);
  opacity: 0; pointer-events: none; transform: translate(-50%, -.75rem);
  transition: opacity .25s, transform .3s var(--ease);
}
.p-melding.is-zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.p-melding[data-soort="fout"] { background: var(--fout); }
.p-melding[data-soort="goed"] { background: var(--goed); }


/* ─────────────────────────────────────────────────────────────
   4. FORMULIEREN
   ───────────────────────────────────────────────────────────── */
.p-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
/* Minstens 16 px, anders zoomt de iPhone in bij het typen */
.portaal .veld input, .portaal .veld textarea, .portaal .veld select, .p-select { font-size: 1rem; }
.portaal .veld input, .portaal .veld textarea { padding: .8rem .9rem; }
.portaal .veld { position: relative; }
.p-toon {
  position: absolute; right: .4rem; bottom: .4rem; min-height: 2.3rem; padding: 0 .75rem;
  border-radius: .45rem; background: var(--paper-2); font-size: .85rem; font-weight: 700; cursor: pointer;
}
.p-toon:hover, .p-toon:focus-visible { background: var(--roze-zacht); }
.portaal .veld input[type="password"], .portaal .veld input:has(+ .p-toon) { padding-right: 5.5rem; }

.p-select {
  width: 100%; min-height: 2.75rem; padding: .55rem 2.2rem .55rem .8rem;
  border: 1.5px solid var(--line); border-radius: .55rem; background: var(--card);
  color: var(--ink); font-family: inherit;
}
.p-select:focus { outline: none; border-color: var(--roze-diep); box-shadow: 0 0 0 3px rgba(190, 24, 93, .16); }

.p-vinkje { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-weight: 600; line-height: 1.4; }
.p-vinkje input { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .05rem; accent-color: var(--roze-diep); }

.p-vergeten { margin-top: 1.25rem; }
.p-vergeten summary, .p-afvinken summary { cursor: pointer; font-weight: 700; color: var(--roze-diep); min-height: 2.75rem; display: flex; align-items: center; }
.p-vergeten > * + * { margin-top: .6rem; }

.p-kopieer { display: flex; gap: .5rem; }
.p-kopieer input { min-width: 0; flex: 1; font-size: .9rem !important; }


/* ─────────────────────────────────────────────────────────────
   5. STATUS EN POSTS
   ───────────────────────────────────────────────────────────── */
.p-status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.25;
  background: var(--paper-2); color: var(--ink-2);
}
.p-status::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.p-status[data-sleutel="nog_aanleveren"] { background: var(--note-geel-diep); color: var(--p-amber); }
.p-status[data-sleutel="aangeleverd"]    { background: var(--p-groen-zacht); color: var(--goed); }
.p-status[data-sleutel="in_de_maak"]     { background: var(--roze-waas); color: var(--roze-diep); }
.p-status[data-sleutel="ingepland"]      { background: var(--p-blauw-zacht); color: var(--p-blauw); }
.p-status[data-sleutel="geplaatst"]      { background: var(--paper-2); color: var(--ink); }
.p-status[data-sleutel="ik_maak_dit"]    { background: var(--roze-zacht); color: var(--roze-donker); }
.p-status[data-sleutel="opgeruimd"]      { background: var(--paper-2); color: var(--muted); }

.p-stip { display: inline-block; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); }
.p-stip[data-sleutel="nog_aanleveren"] { background: #D99A00; }
.p-stip[data-sleutel="aangeleverd"]    { background: var(--goed); }
.p-stip[data-sleutel="in_de_maak"]     { background: var(--roze); }
.p-stip[data-sleutel="ingepland"]      { background: #3B6FB6; }
.p-stip[data-sleutel="geplaatst"]      { background: var(--ink-2); }
.p-stip[data-sleutel="ik_maak_dit"]    { background: var(--roze-zacht); box-shadow: inset 0 0 0 1.5px var(--roze); }

.p-rel {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700;
}

.p-post {
  position: relative; display: grid; gap: .3rem; align-content: start;
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--p-radius);
  background: var(--card); box-shadow: var(--p-schaduw);
  transition: border-color .2s, transform .2s var(--ease);
}
.p-post:hover, .p-post:focus-within { border-color: rgba(31, 26, 27, .32); }
.p-post.is-compact { padding: .8rem .95rem; }
.p-post-datum { font-size: .85rem; font-weight: 700; color: var(--muted); }
.p-post-titel { font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.p-post-titel a { text-decoration: none; color: inherit; }
/* De hele kaart is klikbaar via de link in de titel */
.p-post-titel a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.p-post-titel a:focus-visible { outline: none; }
.p-post:has(.p-post-titel a:focus-visible) { outline: 3px solid var(--roze-diep); outline-offset: 2px; }
.p-post-type { color: var(--roze-diep); }
.p-post-voet { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.p-post-briefing { font-size: .92rem; color: var(--ink-2); }
/* Knoppen in een kaart liggen boven de klikbare kaartlaag */
.p-post .btn { position: relative; z-index: 1; justify-self: start; margin-top: .4rem; }

.p-keuze {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem;
  text-align: left; cursor: pointer; font-weight: 700;
}
.p-keuze-naam { flex: 1; font-size: 1.05rem; }
.p-keuze[aria-current="true"] { border-color: var(--roze-diep); }
.p-keuze:hover, .p-keuze:focus-visible { border-color: var(--ink); }

.p-snel { display: grid; gap: .75rem; }
@media (min-width: 700px) { .p-snel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-snel-link { display: flex; gap: .75rem; align-items: flex-start; text-decoration: none; color: inherit; }
.p-snel-link > .p-icoon { width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--roze-diep); }
.p-snel-link span { display: grid; gap: .15rem; font-size: .92rem; color: var(--ink-2); }
.p-snel-link strong { color: var(--ink); font-size: 1rem; }
.p-snel-link:hover, .p-snel-link:focus-visible { border-color: rgba(31, 26, 27, .32); }


/* ─────────────────────────────────────────────────────────────
   6. PLANNING
   ───────────────────────────────────────────────────────────── */
.p-planning-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.p-segment { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--paper-2); }
.p-segment a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem 1rem;
  border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--ink-2); text-decoration: none;
}
.p-segment a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(31, 26, 27, .15); }

.p-periode { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.p-periode-titel { flex: 1; text-align: center; font-size: 1.15rem !important; }
.p-rond {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink); text-decoration: none;
}
.p-rond:hover, .p-rond:focus-visible { background: var(--ink); color: #fff; }
.p-rond.is-uit { opacity: .25; }
.p-periode + .p-kaart, .p-periode + .p-balk + .p-kaart { margin-top: 1rem; }

.p-balk { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.p-filter { display: grid; gap: .25rem; min-width: 10rem; }
.p-export { display: flex; flex-wrap: wrap; gap: .5rem; }

.p-lijst { margin-top: .5rem; }
.p-weekkop { margin: 1.5rem 0 .6rem; font-size: 1rem !important; color: var(--ink-2); }
.p-lijst-week:first-child .p-weekkop { margin-top: 1.25rem; }

.p-week { display: grid; gap: .5rem; margin-top: 1rem; }
.p-weekdag { padding: .75rem 0; border-top: 1px solid var(--line); }
.p-weekdag-kop { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .95rem !important; }
.p-weekdag.is-leeg .p-weekdag-kop { color: var(--muted); margin-bottom: 0; }
.p-weekdag.is-leeg { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.p-maand {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-top: 1rem;
  overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: var(--line);
}
.p-maand-wd {
  padding: .35rem 0; background: var(--paper-2); text-align: center;
  font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.p-dag {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  min-width: 0; min-height: 3.6rem; padding: .35rem .3rem;
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
}
.p-dag.is-buiten { background: var(--paper); color: var(--muted); }
.p-dag:hover { background: var(--roze-waas); }
.p-dag:focus-visible { outline: 3px solid var(--roze-diep); outline-offset: -3px; border-radius: 0; }
.p-dag[aria-pressed="true"] { background: var(--roze-waas); box-shadow: inset 0 0 0 2px var(--roze-diep); }
.p-dag-nr { min-width: 1.6rem; padding: 0 .3rem; border-radius: 999px; font-size: .85rem; font-weight: 700; line-height: 1.6rem; text-align: center; }
.p-dag:not(.heeft-posts) .p-dag-nr { font-weight: 500; }
.p-dag.is-vandaag .p-dag-nr { background: var(--roze-diep); color: #fff; font-weight: 700; }
.p-dag-stippen { display: flex; flex-wrap: wrap; gap: 3px; padding-left: .3rem; }
.p-dag-chip, .p-dag-meer { display: none; }
@media (min-width: 700px) {
  .p-dag { min-height: 6.5rem; padding: .4rem; }
  .p-dag-stippen { display: none; }
  .p-dag-chip { display: flex; align-items: center; gap: .3rem; width: 100%; font-size: .75rem; line-height: 1.25; }
  .p-dag-chip-tekst { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .p-dag-meer { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
}
.p-legenda { margin-top: .5rem; }
.p-daglijst { margin-top: .5rem; }


/* ─────────────────────────────────────────────────────────────
   7. POST-DETAIL
   ───────────────────────────────────────────────────────────── */
.p-terug {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; margin-bottom: .5rem;
  font-weight: 700; color: var(--roze-diep); text-decoration: none;
}
.p-terug:hover, .p-terug:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.p-postpagina > .p-post-voet { margin-top: -.5rem; }

.p-feiten { display: grid; gap: .75rem; margin-top: 1.25rem; }
@media (min-width: 600px) { .p-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-feiten dt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.p-feiten dd { font-weight: 700; }

.p-briefing {
  position: relative; margin-top: 1.5rem; padding: 1.4rem 1.3rem 1.2rem;
  background: var(--note-geel); border-radius: .35rem; box-shadow: var(--schaduw-note);
}
.p-briefing::before {
  content: ''; position: absolute; left: 50%; top: -.7rem; width: 5rem; height: 1.3rem;
  background: var(--tape); transform: translateX(-50%) rotate(-2deg);
}
.p-briefing-tekst { margin-top: .3rem; white-space: pre-line; }

.p-bestanden { display: grid; gap: .5rem; }
.p-bestand {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: .75rem; background: var(--card);
}
.p-bestand > .p-icoon { color: var(--muted); }
.p-bestand-tekst { display: grid; flex: 1; min-width: 0; }
.p-bestand-naam { font-weight: 700; overflow-wrap: anywhere; }
/* Na de bewaartermijn (standaard 30 dagen, §3e) uit de cloud gehaald: rustig grijs, zonder knop.
   Het label is lang: op een smal scherm schuift het onder de naam. */
.p-bestand.is-opgeruimd { flex-wrap: wrap; background: var(--paper); border-style: dashed; }
.p-bestand.is-opgeruimd .p-bestand-tekst { flex-basis: 11rem; }
.p-bestand.is-opgeruimd > .p-status { margin-left: auto; }
.p-bestand.is-opgeruimd .p-bestand-naam { font-weight: 600; color: var(--ink-2); }

/* Opmerkingen (§13): bij een bestand onder de naam, bij een post of algemeen in
   een eigen kaart. Tekst van de klant: regeleinden blijven staan, lange woorden breken af. */
.p-opmerking-plek { display: grid; justify-items: start; gap: .25rem; margin-top: .3rem; }
.p-opmerking-plek:empty { display: none; }
/* Het formulier bij een bestand staat over de hele breedte onder de rij (niet
   ingeklemd tussen icoon en label, ook op 320 px); icoon en label blijven boven. */
.p-bestand.is-bewerken { flex-wrap: wrap; align-items: flex-start; }
.p-bestand.is-bewerken > .p-icoon { margin-top: .15rem; }
.p-opmerking-bewerk { flex: 1 0 100%; min-width: 0; }
.p-opmerking-bewerk:empty { display: none; }
.p-opmerking-form .veld label { overflow-wrap: anywhere; }
/* Teller onder het tekstvak ("120 / 500"): rustig, en pas bij de grens opvallend. */
.p-teller { margin-top: .3rem; font-size: .8rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-teller[data-stand="bijna"] { color: var(--roze-diep); font-weight: 700; }
.p-teller[data-stand="te-lang"] { color: var(--fout); font-weight: 700; }
.p-opmerking {
  padding: .1rem 0 .1rem .6rem; border-left: 3px solid var(--roze-zacht);
  font-size: .92rem; line-height: 1.45; color: var(--ink-2);
  white-space: pre-line; overflow-wrap: anywhere;
}
.p-opmerking-form { display: grid; gap: .25rem; width: 100%; }
.p-opmerking-form .veld { margin-top: .25rem; }
.p-opmerking-form .p-knoppen { margin-top: .4rem; }
.p-opmerkingen { display: grid; gap: .6rem; margin-top: .75rem; }
.p-opmerkingen li { padding: .65rem .85rem; border-radius: .75rem; background: var(--paper-2); }
.p-opmerking-tekst { white-space: pre-line; overflow-wrap: anywhere; }
.p-upload-opmerking { display: grid; justify-items: start; gap: .25rem; margin-top: .15rem; }
.p-upload-opmerking > .p-opmerking-form { justify-self: stretch; }

.p-afgevinkt .p-goed { display: flex; align-items: center; gap: .3rem; }
.p-notitie { margin-top: .35rem; font-style: italic; color: var(--ink-2); white-space: pre-line; }
.p-afvinken[open] summary { margin-bottom: .5rem; }
.p-afvinken .veld { margin-top: .75rem; }


/* ─────────────────────────────────────────────────────────────
   8. AANLEVEREN EN UPLOADEN
   ───────────────────────────────────────────────────────────── */
/* Het bestandsveld zelf is onzichtbaar; het <label> is de knop. Het veld
   blijft focusbaar, en de focusring komt dan op het label. */
.p-bestand-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.p-bestand-invoer:focus-visible + label { outline: 3px solid var(--roze-diep); outline-offset: 4px; }
.p-kiezer { position: relative; display: grid; gap: .5rem; justify-items: start; }
.p-kiezer > .p-kies { cursor: pointer; }
@media (max-width: 599px) { .p-kiezer { justify-items: stretch; } }
.p-kiezer .p-tip { margin-top: .25rem; }
.p-gekozen:empty { display: none; }
.p-gekozen { width: 100%; margin-top: .5rem; }
.p-gekozen-lijst { display: grid; gap: .35rem; padding: .75rem .9rem; border-radius: .75rem; background: var(--paper-2); }
.p-gekozen-lijst li.is-fout .p-bestand-naam { text-decoration: line-through; color: var(--muted); }

.p-nodig { display: grid; gap: .45rem; }
.p-nodig a { font-weight: 700; color: var(--ink); text-underline-offset: .2em; }
.p-stap { margin-top: 1.25rem; }

.p-koppel { margin-top: 1rem; }
.p-koppel-lijst { display: grid; gap: .75rem; margin-top: .75rem; }
.p-koppel-rij { display: grid; gap: .35rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); }
.p-koppel-bestand { display: flex; gap: .6rem; align-items: flex-start; }
.p-koppel-bestand > div { display: grid; min-width: 0; }
.p-koppel-bestand > .p-icoon { margin-top: .2rem; color: var(--muted); }
.p-koppel-rij > label { margin-top: .25rem; font-weight: 700; }

.p-hervat { margin-bottom: 1.25rem; border-color: var(--note-geel-diep); background: var(--note-geel); }
.p-hervat-rij { padding-top: .75rem; margin-top: .75rem; border-top: 1px dashed rgba(31, 26, 27, .2); }
.p-hervat-rij .p-knoppen { margin-top: .5rem; }

/* Uploadpaneel: blijft staan als je naar een ander scherm gaat */
.p-uploads {
  position: fixed; left: .5rem; right: .5rem; bottom: .5rem; z-index: 1001;
  max-height: min(50vh, 32rem); overflow: auto; overscroll-behavior: contain;
  padding: .85rem 1rem 1rem; border: 1px solid var(--line); border-radius: 1rem;
  background: var(--card); box-shadow: 0 20px 50px -20px rgba(31, 26, 27, .55);
}
body.is-ingelogd .p-uploads { bottom: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom, 0px) + .5rem); }
@media (min-width: 900px) {
  .p-uploads, body.is-ingelogd .p-uploads { left: auto; right: 1.25rem; bottom: 1.25rem; width: 26rem; }
}
.p-uploads-balk { display: flex; align-items: center; gap: .6rem; }
.p-uploads-kop { display: flex; align-items: center; gap: .4rem; margin-right: auto; font-size: 1.05rem !important; }
.p-uploads-kop .p-icoon { color: var(--goed); }
.p-uploads.is-ingeklapt .p-upload-lijst, .p-uploads.is-ingeklapt .p-scherm-aan { display: none; }
/* Ingeklapt: één smalle balk (status, de hoofdactie, uitklappen) */
.p-uploads.is-ingeklapt { padding: .45rem .45rem .45rem 1rem; }
.p-uploads.is-ingeklapt .p-uploads-balk { gap: .5rem; }
.p-uploads.is-ingeklapt .p-uploads-kop { font-size: 1rem !important; }
.p-uploads .p-klaar { flex: none; }
.p-uploads.is-ingeklapt .p-klaar { padding-inline: .85rem; }
/* Waar de balk smal is (telefoon, en de kaart van 26rem op desktop) staat er "Klaar". */
@media (max-width: 479px), (min-width: 900px) {
  .p-uploads.is-ingeklapt .p-klaar-rest { display: none; }
}
/* Alles binnen (Stefan 06-10: "Klaar" viel rechtsonder weg onder de lijst): een groene
   rand, de rand licht één keer op, en de hoofdactie staat bovenaan. Scrollt de lijst,
   dan blijft dat blok bovenin het paneel staan (sticky). */
.p-uploads.is-afronden { border: 2px solid var(--goed); }
.p-uploads.is-net-klaar { animation: p-aandacht 1.1s var(--ease, ease) 2; }
@keyframes p-aandacht {
  50% { box-shadow: 0 20px 50px -20px rgba(31, 26, 27, .55), 0 0 0 .45rem rgba(21, 122, 84, .28); }
}
.p-afronden {
  position: sticky; top: -.85rem; z-index: 1;
  margin: .6rem -1rem 0; padding: .7rem .85rem .85rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.p-afronden > .p-goed { display: flex; align-items: flex-start; gap: .4rem; margin: 0; line-height: 1.4; }
.p-afronden > .p-goed .p-icoon { margin-top: .05em; }
.p-afronden-uitleg { color: var(--ink); font-weight: 400; }
/* Op de kaart van 26rem passen "Klaar met aanleveren" en "Nog meer sturen" net naast elkaar. */
.p-uploads .p-afronden .p-knoppen { margin-top: .6rem; gap: .5rem; }
.p-scherm-aan { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; font-size: .88rem; font-weight: 600; color: var(--roze-diep); }
.p-upload-lijst { display: grid; gap: .75rem; margin-top: .75rem; }
.p-upload { display: grid; gap: .3rem; }
.p-upload-kop { display: flex; align-items: center; gap: .5rem; }
.p-upload-kop .p-bestand-naam { flex: 1; min-width: 0; font-size: .92rem; }
.p-mini {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--paper-2); color: var(--ink); cursor: pointer;
}
.p-mini:hover, .p-mini:focus-visible { background: var(--roze-zacht); }
.p-uploads .p-knoppen { margin-top: .85rem; }

progress {
  width: 100%; height: .5rem; overflow: hidden;
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px;
  background: var(--paper-2); color: var(--roze-diep); accent-color: var(--roze-diep);
}
progress::-webkit-progress-bar { background: var(--paper-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--roze-diep); border-radius: 999px; transition: width .3s; }
progress::-moz-progress-bar { background: var(--roze-diep); border-radius: 999px; }
.p-upload.is-klaar progress::-webkit-progress-value { background: var(--goed); }
.p-upload.is-klaar progress::-moz-progress-bar { background: var(--goed); }


/* ─────────────────────────────────────────────────────────────
   8b. SEINTJES EN WONINGPOST
   ───────────────────────────────────────────────────────────── */
/* Seintjes van Dionne: bovenaan elk scherm van het bedrijf. Opvallend maar
   rustig: een geel briefje met een roze streep, geen beweging. */
.p-seintjes { display: grid; gap: .6rem; padding-top: 1rem; }
.p-seintjes + .p-main { padding-top: 1rem; }
.p-seintje {
  padding: .85rem 1rem .9rem; border: 1px solid var(--note-geel-diep); border-left: 4px solid var(--roze-diep);
  border-radius: .75rem; background: var(--note-geel); box-shadow: var(--p-schaduw);
}
.p-seintje-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .75rem; }
.p-seintje-van { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; color: var(--roze-diep); }
.p-seintje-van .p-icoon { align-self: center; }
.p-seintje-tekst { margin-top: .3rem; white-space: pre-line; overflow-wrap: anywhere; }
.p-seintje .p-knoppen { margin-top: .6rem; }

/* Startscherm: de grote knop voor makelaars */
.p-woning-start { margin-bottom: 1.5rem; border-color: var(--roze-zacht); background: var(--roze-waas); }
.p-woning-start .p-knoppen { margin-top: .85rem; gap: .75rem 1.25rem; }

/* Het formulier: per onderdeel een kaart (fieldset), mobiel eerst */
.p-woning > .p-kopblok { margin-bottom: 1rem; }
.p-woning-form { display: grid; gap: 1rem; }
.p-woning-deel {
  min-width: 0; margin: 0; padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--p-radius); background: var(--card); box-shadow: var(--p-schaduw);
}
/* legend binnen de kaart (niet op de rand), even groot als de kop van het tekstvak */
.p-woning-deel > legend { float: left; width: 100%; padding: 0; margin-bottom: .35rem; }
.p-woning-deel > legend + * { clear: both; }
.p-woning-deel > legend, .p-woning-deel .veld > label.p-woning-kop {
  font-size: 1.1rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; text-transform: none; color: var(--ink);
}
.p-woning-deel > .p-klein { margin-bottom: .75rem; }
.p-woning-deel .p-knoppen:has(> [hidden]:only-child) { display: none; }
.p-woning-deel .p-tip { margin: 0 0 .75rem; }

/* Keuzeknoppen (moment, status, prijsvorm): één keuze, aria-pressed */
.p-keuzes { display: flex; flex-wrap: wrap; gap: .5rem; }
.p-keuzegroep + .p-keuzegroep, .p-momentdag + .p-momentdag { margin-top: .9rem; }
.p-keuzegroep-kop {
  margin-bottom: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.p-momentdagen { display: grid; }
.p-momentdag-kop { margin-bottom: .4rem; font-weight: 800; }
.p-keuzeknop {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem;
  max-width: 100%; min-height: 2.75rem; padding: .45rem .85rem;
  border: 1.5px solid var(--line); border-radius: .65rem; background: var(--card); color: var(--ink);
  font: inherit; font-size: .92rem; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.p-keuzeknop:not(:disabled):hover { border-color: var(--ink); }
.p-keuzeknop:focus-visible { outline: 3px solid var(--roze-diep); outline-offset: 2px; }
.p-keuzeknop[aria-pressed="true"] {
  border-color: var(--roze-diep); background: var(--roze-waas); color: var(--roze-donker);
  box-shadow: inset 0 0 0 1px var(--roze-diep);
}
.p-keuzeknop:disabled { cursor: not-allowed; border-style: dashed; background: var(--paper); color: var(--muted); }
.p-moment { min-width: 6.25rem; }
.p-moment-tijd { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.p-moment-vrij { font-size: .78rem; font-weight: 600; color: var(--muted); }
.p-keuzeknop[aria-pressed="true"] .p-moment-vrij { color: var(--roze-donker); }
.p-keuzeknop:disabled .p-moment-tijd { text-decoration: line-through; text-decoration-thickness: 1px; }
.p-moment-huidig { margin-bottom: .9rem; }

/* Adres: postcode + huisnummer naast elkaar, de toevoeging eronder (vanaf 600 px alle drie op een rij) */
.p-adres-velden { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; }
@media (min-width: 600px) { .p-adres-velden { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.p-adres-uitkomst { display: flex; gap: .4rem; align-items: flex-start; margin-top: .75rem; font-size: .95rem; line-height: 1.4; }
.p-adres-uitkomst:empty { display: none; }
.p-adres-uitkomst[data-stand="gevonden"] { font-weight: 700; color: var(--goed); }
.p-adres-uitkomst[data-stand="gevonden"] .p-icoon { margin-top: .1rem; }
.p-adres-uitkomst[data-stand="zoeken"], .p-adres-uitkomst[data-stand="handmatig"] { color: var(--muted); }
.p-adres-let { font-weight: 600; color: var(--p-amber); }
.p-adres-acties { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .5rem; }
.p-adres-acties:empty { display: none; }
.p-adres-hand { display: grid; gap: .75rem; margin-top: .75rem; }

/* Prijs: € vóór het bedrag; het voorbeeld laat zien wat er op de post komt */
.p-prijs-bedrag, .p-woning-deel .p-prijs-bedrag + .veld { margin-top: .85rem; }
.p-keuzes + .veld { margin-top: .85rem; }
.p-euro { position: relative; }
.p-euro::before {
  content: '€'; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--muted); pointer-events: none;
}
.portaal .p-euro input { width: 100%; padding-left: 2rem; font-variant-numeric: tabular-nums; }
.p-prijsregel { margin-top: .85rem; padding: .7rem .9rem; border-radius: .65rem; background: var(--paper-2); font-size: .92rem; }
.p-prijsregel-tekst { font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-prijsregel .p-prijsregel-tekst { display: block; margin-top: .1rem; font-size: 1.05rem; }

.p-woning-verstuur { display: grid; gap: .6rem; }
.p-woning-verstuur .p-fout { padding: .7rem .9rem; border-radius: .65rem; background: #FDECEE; }

/* Mijn woningposts en de gegevens bij een post */
.p-woningstatus {
  display: inline-block; padding: .2rem .5rem; border-radius: .35rem;
  background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; line-height: 1.3;
}
.p-prijsregel-kort { white-space: pre-wrap; }
.p-woningkaart .btn { margin-top: .5rem; }
.p-eerder summary { cursor: pointer; font-weight: 700; color: var(--roze-diep); min-height: 2.75rem; display: flex; align-items: center; }
.p-eerder[open] summary { margin-bottom: .5rem; }
.p-knoppen-midden { justify-content: center; }
.p-woninggegevens .p-feiten { margin-top: .25rem; }
.p-woninggegevens .p-feiten dd { overflow-wrap: anywhere; }
.p-woning-tekst { margin-top: 1rem; }
.p-woning-tekst-kop { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.p-woning-tekst .p-opmerking-tekst { margin-top: .25rem; }

/* Het script van een post (§17): zelfde volgorde en opmaak als in het CRM (Thema, Hook, Script, Eindtekst) */
.p-script > h2 { margin-bottom: .25rem; }
.p-script-velden { display: grid; gap: .85rem; margin-top: .9rem; }
.p-script-velden dt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.p-script-tekst { margin-top: .2rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.p-script-tekst.is-nadruk { font-weight: 700; }
.p-kenmerk {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  background: var(--roze-zacht); color: var(--roze-diep); font-size: .72rem; font-weight: 700;
}

@media (forced-colors: active) {
  .p-keuzeknop[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 1px; }
  .p-seintje { border: 2px solid CanvasText; }
}

/* ─────────────────────────────────────────────────────────────
   9. TIPS EN ACCOUNT
   ───────────────────────────────────────────────────────────── */
.p-tipkaart h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem !important; }
.p-tipkaart h2 .p-icoon { color: var(--roze-diep); }
/* Uitlegvideo van Dionne (contract §18): tekst naast de video, op een telefoon
   eronder. De video houdt zijn eigen verhouding (--p-verhouding, gezet vanuit
   app.js) en wordt nooit hoger dan het scherm. */
.p-uitlegvideo { display: grid; gap: .9rem; margin-bottom: .75rem; }
.p-uitlegvideo-kop > h2 { margin: 0; }
.p-uitlegvideo-tekst > p + p { margin-top: .5rem; }
/* Breed scherm, staande video (zoals een Reel): tekst links, verticaal gecentreerd,
   video rechts. Een liggende video blijft onder de kop, op volle breedte. */
@media (min-width: 700px) {
  .p-uitlegvideo.is-staand {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". beeld" "kop beeld" "tekst beeld" ". beeld";
    column-gap: 1.75rem; row-gap: .6rem;
  }
  .p-uitlegvideo.is-staand .p-uitlegvideo-kop { grid-area: kop; }
  .p-uitlegvideo.is-staand .p-uitlegvideo-beeld { grid-area: beeld; }
  .p-uitlegvideo.is-staand .p-uitlegvideo-tekst { grid-area: tekst; }
}
.p-uitlegvideo-duur { display: flex; align-items: center; gap: .35rem; }
.p-uitlegvideo-duur .p-icoon { width: 1rem; height: 1rem; }
.p-uitlegvideo-speler {
  display: block; margin-inline: auto; border-radius: .75rem; background: #000; object-fit: contain;
  aspect-ratio: var(--p-verhouding, .5625);
  width: min(100%, calc(min(75vh, 34rem) * var(--p-verhouding, .5625)));
  height: auto;
}
.p-opsomming { display: grid; gap: .5rem; }
.p-opsomming li { position: relative; padding-left: 1.2rem; }
.p-opsomming li::before {
  content: ''; position: absolute; left: .1rem; top: .62em; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--roze);
}


/* ─────────────────────────────────────────────────────────────
   10. VOORKEUREN
   site.css zet bij prefers-reduced-motion al alle animaties uit.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .p-laden::before { animation: none; }
}
@media (forced-colors: active) {
  .p-status, .p-rel, .p-stip, .p-kenmerk { border: 1px solid CanvasText; }
  .p-dag[aria-pressed="true"] { outline: 2px solid Highlight; }
}
@media print {
  .p-kop, .p-tabbar, .p-uploads, .p-voet, .p-melding, .p-seintjes, .p-export, .p-segment, .p-rond, .p-uitlegvideo-beeld { display: none !important; }
  body.portaal.is-ingelogd { padding-bottom: 0; }
}