/* Hallmark · Vinyvoice-app (inspreken, portaal, beheer) · theme: custom (merk Vinyvoice, fotoversie) · idea: "je ziet je plaat ontstaan, van stemmen tot doos" · vibe: "onafhankelijk platenlabel, droog, papier en zwart, hard oranje" · v2.0.0
 * shape: app screen · posture: light/grotesk/papier · paper: --papier · accent: --signaal (alleen vlakken en knoppen, nooit kleine tekst op papier) · faces: Clash Display (koppen), Switzer (tekst), via Fontshare
 * critique: het echte object (vollopende kanten, het insteekvel, de reis van de plaat als tracklist) is het beeld; oranje alleen voor de hoofdactie en de huidige stap */
/* Hallmark · answered F7 · alle pillen zijn bedieningselementen (knoppen), geen labels of tags */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; background: var(--papier); color: var(--inkt); -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; font-synthesis: none; }
::selection { background: var(--signaal); color: var(--zwart); }
[hidden] { display: none !important; }
main { flex: 1; width: 100%; margin-inline: auto; padding: var(--ruimte-6) var(--ruimte-4) var(--ruimte-7); }
.flow { max-width: 34rem; }
.werk { max-width: var(--container); }
section { display: grid; gap: var(--ruimte-4); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: var(--tracking-display); word-spacing: 0.14em; overflow-wrap: break-word; min-width: 0; color: var(--inkt); text-wrap: balance; }
h1 { font-size: var(--text-titel); }
h2 { font-size: var(--text-sectie); }
h3 { font-size: var(--text-lg); }
h1:focus, h2:focus { outline: none; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.lead { font-size: var(--text-lead); }
.stil, .voortgang { color: var(--stil); font-size: 0.95rem; }
.fout { color: var(--fout); font-weight: 600; }
.melding { background: var(--wit); padding: var(--ruimte-4); border: 1px solid var(--inkt); }
.num { font-variant-numeric: tabular-nums; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.knop { font: inherit; font-weight: 600; font-size: var(--text-md); line-height: 1.2; min-height: 48px; padding: 8px 24px; border-radius: var(--r-rond); border: 1px solid var(--signaal); background: var(--signaal); color: var(--op-signaal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-2); text-decoration: none; text-align: center; white-space: nowrap; transition: background-color var(--duur-kort) var(--ease-out), border-color var(--duur-kort) var(--ease-out), transform var(--duur-kort) var(--ease-out); }
.knop:active { transform: translateY(1px); }
.knop:disabled, .knop.licht:disabled { background: var(--papier-2); border-color: var(--lijn); color: var(--stil); cursor: not-allowed; transform: none; }
.knop.licht { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop.klein { min-height: 44px; padding: 8px 16px; font-size: var(--text-sm); }
/* Een schakelknop die aan staat ziet er anders uit, niet alleen in de tekst (UX-audit D6) */
.knop.licht[aria-pressed="true"] { background: var(--zwart); border-color: var(--zwart); color: var(--op-zwart); }
@media (hover: hover) {
  .knop:hover { background: var(--signaal-diep); border-color: var(--signaal-diep); }
  .knop.licht:hover { background: var(--papier-2); border-color: var(--inkt); }
  .knop.licht[aria-pressed="true"]:hover { background: var(--inkt-2); border-color: var(--inkt-2); }
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.veld { display: grid; gap: var(--ruimte-1); font-weight: 600; }
.veld > span.stil { font-weight: 400; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=url], input[type=tel], input[type=number], select, textarea { font: inherit; font-weight: 400; min-height: 48px; padding: 12px 16px; border-radius: 0; border: 1px solid var(--veldrand); background: var(--wit); color: var(--inkt); width: 100%; }
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--zwart); outline-offset: 1px; border-color: var(--zwart); }
input[type=file] { font: inherit; font-size: var(--text-sm); max-width: 100%; }
input[type=file]:focus-visible { outline: 2px solid var(--zwart); outline-offset: 2px; }
.rij { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: center; }
.rij.tussen { justify-content: space-between; }

/* Inspreken */
.jarige img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 42vh; object-fit: cover; }
.tips { list-style: none; padding: 0; display: grid; gap: var(--ruimte-1); color: var(--stil); }
.recorder { display: grid; justify-items: center; gap: var(--ruimte-3); padding: var(--ruimte-6) var(--ruimte-4); background: var(--zwart); color: var(--papier); text-align: center; }
.recorder .stil { color: var(--stil-op-zwart); }
.recorder :focus-visible { outline-color: var(--papier); }
.opnameknop { inline-size: 88px; block-size: 88px; border-radius: 50%; border: 2px solid var(--papier); background: transparent; display: grid; place-items: center; cursor: pointer; transition: transform var(--duur-kort) var(--ease-out); }
.opnameknop:active { transform: scale(0.97); }
.lampje { inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--signaal); transition: border-radius var(--duur-kort) ease; }
.recorder[data-staat=opnemen] .lampje { border-radius: 6px; animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.55; transform: scale(0.9); } }
.timer { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.terugluisteren { display: grid; gap: var(--ruimte-3); }
audio { width: 100%; }
.upload summary, .uitleg summary { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; min-height: 44px; display: block; padding-block: var(--ruimte-3); cursor: pointer; list-style: none; }
.upload summary::-webkit-details-marker, .uitleg summary::-webkit-details-marker { display: none; }
.upload summary::before, .uitleg summary::before { content: ""; display: inline-block; vertical-align: -0.1em; margin-inline-end: var(--ruimte-2); inline-size: 0.9em; block-size: 0.9em; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform var(--duur-kort) var(--ease-out); }
.upload[open] summary::before, .uitleg[open] summary::before { transform: rotate(180deg); }
.upload summary:focus-visible, .uitleg summary:focus-visible { outline: 2px solid var(--focus); }
.upload input { margin-top: var(--ruimte-2); }
.fotos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-3); }
.fotos li { display: grid; gap: var(--ruimte-1); }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vinkje { display: flex; gap: var(--ruimte-3); align-items: flex-start; min-height: 44px; }
.vinkje input { inline-size: 24px; block-size: 24px; accent-color: var(--zwart); flex: none; margin-top: 2px; }
progress { width: 100%; accent-color: var(--zwart); }
/* Pakket B (UX-audit): terug, ideeën, voorbeeld, bijna-klaar, samenvatting */
[data-stap="welkom"] .woordmerk { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1; }
.voorbeeld { display: grid; gap: var(--ruimte-1); }
/* woordmerk en voorbeeld kosten hoogte: de foto iets lager, zodat kop, zin en knop op 1280 x 800 zichtbaar blijven (Floor 12) */
[data-stap="welkom"] .jarige img { max-height: 30vh; }
.stapkop { display: flex; align-items: center; gap: var(--ruimte-3); }
.terug { font: inherit; font-weight: 600; font-size: var(--text-md); min-height: 44px; padding: 8px 16px; border: 1px solid var(--inkt); border-radius: var(--r-rond); background: transparent; color: var(--inkt); cursor: pointer; }
@media (hover: hover) { .terug:hover { background: var(--papier-2); } }
.ideeen { list-style: none; padding: 0; counter-reset: idee; display: grid; gap: var(--ruimte-2); font-size: var(--text-md); }
.ideeen li { counter-increment: idee; position: relative; padding-inline-start: 1.75rem; }
.ideeen li::before { content: counter(idee); position: absolute; inset-inline-start: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; }
.recorder[data-bijna="ja"] .timer { color: var(--signaal); }
.samen { font-weight: 600; }
.paneel-fotos:empty { display: none; }
.uitleg p { margin-top: var(--ruimte-2); color: var(--stil); font-size: 0.95rem; }

/* Het insteekvelpaneel na versturen: in de stijl van het echte insteekvel */
.paneel { background: var(--insteek-papier); color: var(--insteek-inkt); box-shadow: var(--schaduw-vel); padding: var(--ruimte-5) var(--ruimte-4); display: grid; gap: var(--ruimte-3); transform: rotate(-0.8deg); }
.paneel-kop { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); letter-spacing: 0; border-bottom: 1px solid var(--insteek-inkt); padding-bottom: var(--ruimte-2); }
.paneel-tekst { font-size: var(--text-sm); }
.paneel-fotos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-2); }
.paneel-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 5px solid var(--print-wit); box-shadow: var(--schaduw-vel); }
@media (prefers-reduced-motion: reduce) { .paneel { transform: none; } }

/* Kanten en berichten (portaal) */
.kanten { display: grid; gap: var(--ruimte-3); }
.kant { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--ruimte-3); align-items: center; }
.kant-naam { font-weight: 600; }
.balk { display: flex; block-size: 28px; background: var(--papier-2); border: 1px solid var(--lijn); overflow: hidden; }
.blok { inline-size: var(--b); min-inline-size: 6px; flex: none; background: var(--zwart); border-inline-end: 2px solid var(--papier-2); }
.berichten { list-style: none; padding: 0; display: grid; gap: 0; border-bottom: 1px solid var(--lijn); }
.bericht { border-top: 1px solid var(--lijn); padding: var(--ruimte-4) 0; display: grid; gap: var(--ruimte-3); }
.bericht > button { justify-self: start; }
.bericht-naam { font-weight: 600; font-size: var(--text-lg); }
.mini-fotos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.mini-fotos img { inline-size: 64px; block-size: 64px; object-fit: cover; border: 3px solid var(--print-wit); box-shadow: var(--schaduw-vel); }

/* Beheer */
.formulier { display: grid; gap: var(--ruimte-4); background: var(--papier-2); padding: var(--ruimte-5); }
.formulier fieldset { border: 0; padding: 0; display: grid; gap: var(--ruimte-3); }
.formulier legend { font-weight: 600; margin-bottom: var(--ruimte-2); }
.velden-2 { display: grid; gap: var(--ruimte-3); }
@media (min-width: 40rem) { .velden-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.links { display: grid; gap: var(--ruimte-3); background: var(--wit); padding: var(--ruimte-4); }
.link { word-break: break-all; font-size: 0.92rem; }
.platen { list-style: none; padding: 0; display: grid; border-bottom: 1px solid var(--lijn); }
.plaat-rij { border-top: 1px solid var(--lijn); padding: var(--ruimte-4) 0; display: grid; gap: var(--ruimte-3); }
.plaat-kop { display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-5); align-items: baseline; }
.plaat-kop h3 { font-size: var(--text-xl); }
.feiten { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-5); color: var(--stil); font-size: var(--text-sm); }
.feiten dt { display: inline; }
.feiten dd { display: inline; margin-left: var(--ruimte-1); color: var(--inkt); font-variant-numeric: tabular-nums; }
.feiten div { display: inline; }
.beheren > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.beheren > summary:focus-visible { outline: 2px solid var(--focus); }
.beheren-inhoud { display: grid; gap: var(--ruimte-5); padding-block: var(--ruimte-3); }
@media (min-width: 60rem) { .beheren-inhoud { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.blok-beheer { display: grid; gap: var(--ruimte-3); align-content: start; background: var(--papier-2); padding: var(--ruimte-4); }
.blok-beheer h4 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; }
.opmerkingen { list-style: none; padding: 0; display: grid; gap: var(--ruimte-2); }
.opmerkingen li { background: var(--wit); padding: var(--ruimte-3); white-space: pre-line; }
.blok-beheer .hoes-duim { width: 10rem; height: auto; aspect-ratio: 1; box-shadow: var(--schaduw-vel); }
.label-demo { display: inline-block; background: var(--zwart); color: var(--papier); padding: 4px 8px; font-size: var(--text-sm); }

.voet { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-6); text-align: center; color: var(--stil); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}