/* KTM Voyage CRM — account & security screen [ACC].
   Hoort bij public/js/pages/account.js (#/account en #/account/:tab).

   Huisregels, identiek aan components.css:
   - ALLEEN tokens uit tokens.css. Geen enkele hex, geen rgba() met vaste kleur —
     anders is de regel in de andere modus onleesbaar of verblindend. Tinten worden
     met color-mix() uit een token afgeleid, zodat licht én donker vanzelf kloppen.
   - Geen `content:"tekst"`. Elke zichtbare string komt via t() uit de JS.
   - Geen emoji, geen pijl-glyphs. Iconen komen uit icons.js.
   - Alles leesbaar en bedienbaar op 390px, 44px tikdoelen op touch.

   Layout in één zin: een vaste kolom met de vijf onderdelen links, de kaarten
   rechts. Onder 1024px wordt die kolom een horizontale balk boven de kaarten —
   dezelfde markup, andere richting, zodat er niets dubbel gerenderd hoeft te
   worden en de tabvolgorde overal hetzelfde blijft. */

/* ---------- PAGINA ---------- */
.acc-page{max-width:1180px}
.acc-head{align-items:flex-start}
.acc-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--sp-6);align-items:start}
.acc-main{min-width:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.acc-purpose{margin:0;font-size:14px;line-height:1.55;color:var(--text-muted);max-width:70ch}

/* ---------- NAVIGATIE ---------- */
/* Op desktop een rustige kolom die met de pagina meescrolt tot hij bovenaan blijft
   plakken: op het beveiligingstabblad staat de score bovenaan en de sessies
   onderaan, en dan wil je niet terug hoeven scrollen om van onderdeel te wisselen. */
.acc-nav{position:sticky;top:calc(64px + var(--sp-4));display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-nav-i{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;padding:10px 12px;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-muted);transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.acc-nav-i:hover{background:var(--hover);color:var(--text)}
.acc-nav-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acc-nav-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;color:var(--text-faint)}
.acc-nav-i:hover .acc-nav-ic{color:var(--text-muted)}
.acc-nav-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.acc-nav-t{font-size:13.5px;font-weight:700;line-height:1.25}
.acc-nav-s{font-size:11.5px;line-height:1.3;color:var(--text-faint);overflow-wrap:anywhere}
.acc-nav-i.on{background:var(--surface-accent);border-color:color-mix(in srgb,var(--accent) 42%,var(--border));color:var(--text-head)}
.acc-nav-i.on .acc-nav-ic{color:var(--accent-text)}
.acc-nav-i.on .acc-nav-s{color:var(--accent-text-strong)}

/* ---------- KAART ---------- */
.acc-card{overflow:hidden}
.acc-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--sp-3) var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-4);border-bottom:1px solid var(--border);background:var(--bg-2)}
.acc-card-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-text)}
.acc-card-txt{min-width:0}
.acc-card-txt h2{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.acc-card-sub{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-muted);max-width:62ch;overflow-wrap:anywhere}
.acc-card-act{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.acc-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.acc-card-body>*{margin-top:0}
/* De toon kleurt alleen de icoonbadge en een haarlijn bovenaan — een volledig
   gekleurde kaart maakt een beveiligingsscherm meteen alarmerend, en dat is precies
   het gevoel dat we hier niet willen. */
.acc-tone-ok .acc-card-ic{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.acc-tone-warn .acc-card-ic{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--opt)}
.acc-tone-bad .acc-card-ic{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.acc-tone-ok{border-top:2px solid color-mix(in srgb,var(--ok) 55%,transparent)}
.acc-tone-warn{border-top:2px solid color-mix(in srgb,var(--warn) 65%,transparent)}
.acc-tone-bad{border-top:2px solid color-mix(in srgb,var(--bad) 55%,transparent)}

/* ---------- GEDEELDE KLEINE DINGEN ---------- */
.acc-note{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:0;line-height:1.55}
.acc-note-ic{flex:0 0 auto;display:inline-flex;margin-top:1px}
.acc-note-ic svg{width:15px;height:15px}
.acc-note>span:nth-child(2){flex:1 1 240px;min-width:0}
.acc-note .btn{flex:0 0 auto;margin-left:auto}
.acc-ic{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--text-faint)}
.acc-line{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:13.5px;line-height:1.55;color:var(--text)}
.acc-fine{margin:0;font-size:12px;line-height:1.55;color:var(--text-faint);overflow-wrap:anywhere}
.acc-dim{color:var(--text-faint)}
.acc-sep{display:inline-block;width:3px;height:3px;margin:0 7px;border-radius:50%;background:var(--text-faint);vertical-align:middle}
/* Een IP-adres is een technisch getal: monospace, zodat 84.25.13.7 en 84.25.13.71
   op één oogopslag te onderscheiden zijn. */
.acc-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;padding:1px 6px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-muted);white-space:nowrap}
.acc-ip-mine{background:var(--surface-accent);color:var(--accent-text-strong);font-size:13px;padding:3px 9px}
.acc-danger{color:var(--bad-text)}
.acc-danger:hover{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad-text)}

/* ---------- PROFIEL ---------- */
.acc-ident{display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
.acc-ident-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-ident-tx b{font-family:"Playfair Display",Georgia,serif;font-size:19px;color:var(--text-head);overflow-wrap:anywhere}
.acc-ident-tx span{font-size:13px;color:var(--text-muted);overflow-wrap:anywhere}

.acc-rows{display:flex;flex-direction:column}
.acc-row{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:4px var(--sp-4);padding:12px 0}
.acc-row+.acc-row{border-top:1px solid color-mix(in srgb,var(--border) 65%,var(--surface))}
.acc-row-k{font-size:12.5px;font-weight:700;color:var(--text-muted)}
.acc-row-v{min-width:0;font-size:14px;color:var(--text)}
.acc-row-static{overflow-wrap:anywhere}
.acc-row-h{grid-column:2;margin:0;font-size:11.5px;line-height:1.5;color:var(--text-faint);display:flex;align-items:flex-start;gap:6px;max-width:60ch}
.acc-row-h .acc-ic{margin-top:2px}
.acc-inline-select{min-height:38px;padding:7px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-family:inherit;font-size:14px;color:var(--text);max-width:280px;width:100%}
.acc-inline-select:hover{border-color:var(--border-strong)}
.acc-inline-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}

.acc-role{display:flex;flex-direction:column;gap:var(--sp-3)}
.acc-role-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.acc-role-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:var(--radius-xl);background:var(--surface-accent);font-size:13px;font-weight:700;color:var(--accent-text-strong)}
.acc-role-badge svg{width:15px;height:15px}
.acc-role-d{margin:0;font-size:14px;line-height:1.6;color:var(--text);max-width:68ch}
.acc-role-p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-muted);overflow-wrap:anywhere}
.acc-colour{display:flex;align-items:center;gap:var(--sp-4)}

/* ---------- BEVEILIGINGSSCORE ---------- */
.acc-score{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-5)}
.acc-score-n{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:118px;padding:var(--sp-4) var(--sp-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2)}
.acc-score-n b{font-family:"Playfair Display",Georgia,serif;font-size:44px;line-height:1;color:var(--text-head);font-variant-numeric:tabular-nums}
.acc-score-of{margin-top:4px;font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.acc-score-band{margin-top:8px;font-size:12px;font-weight:700;color:var(--text-muted);text-align:center}
.acc-tone-ok .acc-score-band{color:var(--ok)}
.acc-tone-warn .acc-score-band{color:var(--opt)}
.acc-tone-bad .acc-score-band{color:var(--bad-text)}
.acc-score-m{min-width:0;display:flex;flex-direction:column;gap:9px}

.acc-flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.acc-f{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--sp-2) var(--sp-4);padding:14px var(--sp-4);background:var(--surface)}
.acc-f+.acc-f{border-top:1px solid color-mix(in srgb,var(--border) 70%,var(--surface))}
.acc-f-mark{display:inline-flex;align-items:center;margin-top:1px}
.acc-f-mark svg{width:18px;height:18px}
.acc-f.is-ok .acc-f-mark{color:var(--ok)}
.acc-f.is-todo{background:color-mix(in srgb,var(--warn) 7%,var(--surface))}
.acc-f.is-todo .acc-f-mark{color:var(--bad)}
.acc-f-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.acc-f-tx b{font-size:13.5px;color:var(--text);overflow-wrap:anywhere}
.acc-f-state{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint)}
.acc-f.is-ok .acc-f-state{color:var(--ok)}
.acc-f-tx p{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-muted);max-width:64ch}
.acc-f-act{display:flex;align-items:center}

/* ---------- STATUSREGEL (2FA) ---------- */
.acc-state{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.acc-state-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1px solid color-mix(in srgb,var(--bad) 35%,var(--border));border-radius:var(--radius-xl);background:color-mix(in srgb,var(--bad) 10%,transparent);font-size:13px;font-weight:700;color:var(--bad-text)}
.acc-state-pill.on{border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.acc-state-pill svg{width:15px;height:15px}
.acc-state-sub{font-size:12.5px;color:var(--text-muted);overflow-wrap:anywhere}

/* ---------- APPARATEN ---------- */
.acc-devs,.acc-sess,.acc-iprs,.acc-logs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.acc-dev,.acc-ses{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--sp-3) var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.acc-dev-ic,.acc-ses-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--surface-2);color:var(--text-muted)}
.acc-dev.is-trusted .acc-dev-ic{background:var(--accent-soft);color:var(--accent-text)}
.acc-dev-tx,.acc-ses-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.acc-dev-tx b,.acc-ses-tx b{font-size:14px;color:var(--text);overflow-wrap:anywhere}
.acc-dev-meta,.acc-ses-meta{font-size:12px;line-height:1.5;color:var(--text-muted);overflow-wrap:anywhere}
.acc-dev-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)}
.acc-dev-acts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}

/* ---------- SESSIES ---------- */
.acc-ses.is-current{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));background:var(--surface-accent);box-shadow:inset 3px 0 0 var(--accent)}
.acc-ses.is-current .acc-ses-ic{background:var(--accent);color:var(--accent-ink)}
.acc-ses-here{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent-text-strong)}
.acc-ses-here svg{width:13px;height:13px}
.acc-ses-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)}

/* ---------- INLOGGESCHIEDENIS ---------- */
.acc-logs{gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.acc-log{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--sp-3);padding:11px var(--sp-4);background:var(--surface)}
.acc-log+.acc-log{border-top:1px solid color-mix(in srgb,var(--border) 70%,var(--surface))}
.acc-log-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--text-muted)}
.acc-log[data-tone=ok] .acc-log-ic{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ok)}
.acc-log[data-tone=bad] .acc-log-ic{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
.acc-log[data-tone=accent] .acc-log-ic{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:var(--accent-soft);color:var(--accent-text)}
.acc-log-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-log-tx b{font-size:13px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.acc-log-meta{font-size:11.5px;line-height:1.5;color:var(--text-muted);overflow-wrap:anywhere}
/* Een mislukte poging van een apparaat dat nooit met succes ingelogd heeft, moet
   opvallen zonder dat de hele lijst gaat schreeuwen: één rode kantlijn en een
   waarschuwingsregel, geen rood vlak. */
.acc-log.is-strange{background:color-mix(in srgb,var(--bad) 8%,var(--surface));box-shadow:inset 3px 0 0 var(--bad)}
.acc-log-warn{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--bad-text)}
.acc-log-warn svg{width:13px;height:13px}
.acc-logs-foot{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:space-between}

/* ---------- IP-LIJST ---------- */
.acc-myip{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.acc-myip-k{font-size:12.5px;font-weight:700;color:var(--text-muted)}
.acc-ipr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3) var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.acc-ipr-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--surface-2);color:var(--text-muted)}
.acc-ipr-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-ipr-meta{font-size:11.5px;color:var(--text-muted);overflow-wrap:anywhere}

/* De gevaarlijkste knop van de pagina. Hij krijgt bewust GEEN rood: rood zou hem
   spannend maken, terwijl hij juist rustig en begrijpelijk moet aanvoelen. De
   omkadering en de uitleg eronder doen het werk. */
.acc-enforce{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-2)}
.acc-enforce.is-on{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));background:var(--surface-accent)}
.acc-enforce-sw{margin:0;font-size:14px;font-weight:700;color:var(--text-head)}
.acc-enforce-sw input:disabled{cursor:not-allowed}
.acc-enforce-sw input:disabled+span{color:var(--text-faint)}
.acc-enforce-state{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--text-muted)}

/* ---------- VOORKEUREN ---------- */
.acc-prefs{display:flex;flex-direction:column;gap:var(--sp-4)}
.acc-pref{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:var(--sp-2) var(--sp-4)}
.acc-pref-k{font-size:13px;color:var(--text)}
.acc-pref-v{min-width:0}
.acc-pref-v .seg{width:100%}
.acc-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 var(--sp-4)}
.acc-grid2 .field{margin-bottom:var(--sp-3)}
.acc-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 var(--sp-4)}
.acc-checks .check{margin:6px 0}

.acc-more{display:flex;flex-direction:column;gap:var(--sp-3)}
.acc-more-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.acc-more-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-text)}
.acc-more-tx{min-width:0}
.acc-more-tx b{display:block;font-size:14px;color:var(--text)}
.acc-more-tx p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-muted);max-width:56ch}

/* ---------- SKELETON ---------- */
.acc-skel .acc-skel-ic{width:38px;height:38px;border-radius:11px}
.acc-skel .acc-skel-t{display:block;height:15px;width:44%;margin-bottom:7px}
.acc-skel .acc-skel-s{display:block;height:11px;width:72%}

/* ---------- DIALOGEN ---------- */
.acc-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.acc-dlg-desc{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.acc-dlg-sec{margin:0;padding:var(--sp-4) var(--sp-4) 2px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.acc-dlg-sec legend{padding:0 8px;margin-left:-4px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.acc-dlg-sec .field:last-child{margin-bottom:var(--sp-3)}
.acc-pw-meter{margin:-4px 0 var(--sp-3)}
.acc-pw-rules-t{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--text-muted)}
.acc-pw-rules{margin-bottom:var(--sp-3)}
/* De regels zelf komen uit base.css (.pwrules): een open bolletje dat dichtgaat
   zodra de regel gehaald is. Hier alleen de ruimte eromheen. */

/* ---------- RESPONSIVE: <=1024px ---------- */
/* De kolom wordt een balk. Hij scrollt horizontaal in plaats van te wikkelen: vijf
   onderdelen naast elkaar op 390px is onleesbaar, en een wikkelende balk duwt de
   kaarten elke keer een regel naar beneden. */
@media(max-width:1024px){
  .acc-body{grid-template-columns:1fr;gap:var(--sp-4)}
  .acc-nav{position:static;flex-direction:row;gap:var(--sp-2);padding-bottom:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .acc-nav::-webkit-scrollbar{display:none}
  .acc-nav-i{flex:0 0 auto;grid-template-columns:auto auto;padding:9px 14px;border-color:var(--border);background:var(--surface);white-space:nowrap}
  .acc-nav-s{display:none}
  .acc-nav-t{font-size:13px}
}

/* ---------- RESPONSIVE: <=768px ---------- */
@media(max-width:768px){
  .acc-card-head{grid-template-columns:auto minmax(0,1fr);padding:var(--sp-4)}
  .acc-card-act{grid-column:1 / -1;justify-content:stretch}
  .acc-card-act .btn{flex:1 1 auto}
  .acc-card-body{padding:var(--sp-4);gap:var(--sp-3)}
  .acc-row{grid-template-columns:1fr;gap:2px;padding:11px 0}
  .acc-row-h{grid-column:1}
  .acc-inline-select{max-width:none}
  .acc-pref{grid-template-columns:1fr;gap:6px}
  .acc-score{grid-template-columns:1fr;gap:var(--sp-4);text-align:center}
  .acc-score-n{flex-direction:row;align-items:baseline;justify-content:center;gap:10px;min-width:0}
  .acc-score-n b{font-size:36px}
  .acc-score-band{margin-top:0}
  .acc-score-m{text-align:left}
  .acc-f{grid-template-columns:auto minmax(0,1fr)}
  .acc-f-act{grid-column:2;margin-top:2px}
  .acc-f-act .btn{width:100%}
  .acc-dev,.acc-ses{grid-template-columns:auto minmax(0,1fr)}
  .acc-dev-side,.acc-ses-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2)}
  .acc-dev-acts{flex:1 1 auto;justify-content:flex-end}
  .acc-ipr{grid-template-columns:auto minmax(0,1fr)}
  .acc-ipr .btn{grid-column:1 / -1;width:100%}
  .acc-more-i{grid-template-columns:auto minmax(0,1fr)}
  .acc-more-i .btn{grid-column:1 / -1;width:100%}
  .acc-logs-foot .btn{width:100%}
}

/* ---------- RESPONSIVE: <=560px ---------- */
@media(max-width:560px){
  .acc-head .btn{width:100%}
  .acc-ident{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .acc-myip{flex-direction:column;align-items:flex-start}
  .acc-myip .btn{width:100%}
  .acc-note .btn{margin-left:0;width:100%}
  .acc-dev-side,.acc-ses-side{flex-direction:column;align-items:stretch}
  .acc-dev-acts{justify-content:stretch}
  .acc-dev-acts .btn{flex:1 1 auto}
  .acc-grid2,.acc-checks{grid-template-columns:1fr}
  /* In een schermvullend dialoogvenster is een ingekaderde sectie ruisen; de
     legenda alleen doet het werk. */
  .acc-dlg-sec{padding:var(--sp-3) 0 0;border:none;border-top:1px solid var(--border);border-radius:0;background:none}
  .acc-dlg-sec legend{padding:0;margin:0}
}

/* ---------- TOUCH ---------- */
@media(pointer:coarse){
  .acc-nav-i{min-height:46px}
  .acc-inline-select{min-height:44px}
  .acc-enforce-sw{min-height:44px}
}

/* ---------- PRINT ---------- */
/* Een uitdraai van dit scherm is een momentopname voor in een dossier: de knoppen
   en de navigatie horen er niet op, de feiten wel. */
@media print{
  .acc-nav,.acc-card-act,.acc-dev-acts,.acc-ses-side .btn,.acc-enforce-sw,.acc-logs-foot .btn,.acc-head .btn{display:none!important}
  .acc-body{display:block}
  .acc-card{break-inside:avoid;page-break-inside:avoid}
}