/* Instellingen · mobiel overzicht (27 september 2026, gebruikerskeuze met voorbeeldbeeld).
   Donkere kopband zoals Vandaag (zelfde bandkleuren als today-band.css) met de paginatitel en je bedrijf;
   daaronder kaarten die half over de band schuiven: wat ontbreekt (amber), Belasting met directe
   schakelaars, Werk, App en gegevens. Alleen mobiel; op de computer blijft Instellingen ongewijzigd. */
@media (max-width: 720px) {
  #settingsView {
    --band-bg: var(--ink);
    --band-ink: var(--paper);
    --band-muted: color-mix(in srgb, var(--paper) 66%, var(--ink));
    --band-line: color-mix(in srgb, var(--paper) 24%, transparent);
  }
  :root[data-theme="dark"] #settingsView {
    --band-bg: var(--band-deep, color-mix(in srgb, var(--canvas) 55%, #000));
    --band-ink: var(--ink);
    --band-muted: var(--muted);
    --band-line: var(--line);
  }
}
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #settingsView {
    --band-bg: var(--band-deep, color-mix(in srgb, var(--canvas) 55%, #000));
    --band-ink: var(--ink);
    --band-muted: var(--muted);
    --band-line: var(--line);
  }
}
@media (max-width: 720px) {
  /* Kopband: paginatitel en bedrijfsregel vormen samen één vlak over de volle breedte. */
  #settingsView:not([data-mobile-pane]) > .settings-page-head,
  #settingsView .settings-home-band { position: relative; color: var(--band-ink); }
  #settingsView:not([data-mobile-pane]) > .settings-page-head::before,
  #settingsView .settings-home-band::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: var(--band-bg);
    pointer-events: none;
  }
  #settingsView:not([data-mobile-pane]) > .settings-page-head::before { top: calc(-80px - env(safe-area-inset-top)); bottom: -1px; }
  .main:has(> #banners > *) #settingsView:not([data-mobile-pane]) > .settings-page-head::before { top: -8px; }
  #settingsView:not([data-mobile-pane]) > .settings-page-head { margin: 0; padding-bottom: 4px; }
  #settingsView:not([data-mobile-pane]) > .settings-page-head > * { position: relative; }
  #settingsView:not([data-mobile-pane]) > .settings-page-head h1 { color: var(--band-ink); }
  #settingsView:not([data-mobile-pane]) > .settings-page-head p { display: none; }

  #settingsView .settings-home-band {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 14px 0 58px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--band-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  #settingsView .settings-home-band > * { position: relative; }
  /* Grote, vage Σ als watermerk, zoals op Vandaag. */
  #settingsView .settings-home-band::after {
    content: "Σ";
    position: absolute;
    right: -10px;
    bottom: 20px;
    color: var(--band-ink);
    font: 400 150px/1 var(--font-display);
    opacity: .05;
    pointer-events: none;
  }
  #settingsView .settings-home-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--band-line);
    border-radius: 50%;
    font: 600 15px/1 Figtree, system-ui, sans-serif;
  }
  #settingsView .settings-home-band-text { display: grid; gap: 2px; min-width: 0; }
  #settingsView .settings-home-band-text strong { overflow-wrap: anywhere; font: 600 16px/1.3 Figtree, system-ui, sans-serif; }
  #settingsView .settings-home-band-text small { color: var(--band-muted); font: 400 13px/1.35 Figtree, system-ui, sans-serif; }
  #settingsView .settings-home-band .settings-row-chevron { width: 20px; height: 20px; color: var(--band-muted); }

  /* Kaarten schuiven half over de band, zoals de omzetkaart op Vandaag. */
  #settingsView .settings-home-body { position: relative; z-index: 1; display: grid; margin-top: -40px; }
  #settingsView .settings-home-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
  }
  #settingsView .settings-home-group h2 {
    margin: 18px 4px 8px;
    color: var(--muted);
    font: 600 11px/1.3 Figtree, system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  #settingsView .settings-home-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 4px 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font: 500 15px/1.3 Figtree, system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  #settingsView .settings-home-card > .settings-home-row:first-child,
  #settingsView .settings-home-card > :first-child .settings-home-row { border-top: 0; }
  #settingsView .settings-home-label { flex: 1; min-width: 0; }
  /* Naam met i-rondje (27 sep 2026): het rondje staat direct achter de naam, op dezelfde regel. */
  #settingsView .settings-home-label:has(.summa-info) { display: flex; align-items: center; }
  #settingsView .settings-home-label-text { min-width: 0; }
  #settingsView .settings-home-row.is-link { cursor: pointer; }
  #settingsView .settings-home-open { display: flex; align-items: center; gap: 10px; align-self: stretch; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
  #settingsView .settings-home-open .settings-row-chevron { flex: none; width: 18px; height: 18px; color: var(--muted); }
  #settingsView .settings-home-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
  #settingsView .settings-home-vehicle-head .settings-home-label { flex: 0 1 auto; }
  #settingsView .settings-home-vehicle-head .settings-home-value { margin-left: auto; }
  #settingsView .settings-home-vehicle .summa-info-text { padding: 0; }
  #settingsView .settings-home-value { color: var(--muted); font: 400 14px/1.3 Figtree, system-ui, sans-serif; text-align: right; }
  #settingsView .settings-home-row .settings-row-chevron { flex: none; width: 18px; height: 18px; color: var(--muted); }
  #settingsView .settings-home-row.is-switch .demo-switch { margin-left: auto; }
  #settingsView .settings-home-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 12px; }

  /* Wat ontbreekt: amber stip, titel en waar je het invult. Niets ontbreekt: één rustige regel. */
  #settingsView .settings-home-todo:not(.is-calm) { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
  #settingsView .settings-home-row.is-todo { min-height: 60px; padding-block: 10px; }
  #settingsView .settings-home-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
  #settingsView .settings-home-todo-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
  #settingsView .settings-home-todo-text strong { font: 600 15px/1.3 Figtree, system-ui, sans-serif; }
  #settingsView .settings-home-todo-text small { color: var(--muted); font: 400 13px/1.35 Figtree, system-ui, sans-serif; }
  #settingsView .settings-home-calm { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 4px 14px; color: var(--muted); font: 400 14px/1.35 Figtree, system-ui, sans-serif; }
  #settingsView .settings-home-check { flex: none; width: 18px; height: 18px; color: var(--green); }

  /* Keuzes met twee of drie opties: één segmentbalk met 44px-klikvlakken. */
  #settingsView .settings-home-vehicle,
  #settingsView .settings-home-appearance { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
  #settingsView .settings-home-appearance { border-top: 0; }
  #settingsView .settings-home-vehicle-head { display: flex; align-items: center; gap: 10px; font: 500 15px/1.3 Figtree, system-ui, sans-serif; }
  #settingsView .settings-home-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-soft); }
  #settingsView .settings-home-seg-option { position: relative; display: flex; flex: 1; min-width: 0; margin: 0; cursor: pointer; }
  #settingsView .settings-home-seg-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  #settingsView .settings-home-seg-option span {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--muted);
    font: 500 14px/1.2 Figtree, system-ui, sans-serif;
    text-align: center;
  }
  #settingsView .settings-home-seg-option input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  #settingsView .settings-home-seg-option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
  #settingsView .settings-home-seg-option input:disabled + span { opacity: .55; cursor: not-allowed; }
}