/* ============================================================
   PDF2CAD — huisstijlregels, site-breed
   ============================================================
   Opgezet volgens de Apple Human Interface Guidelines: inhoud
   voorop, rangorde via type en ruimte, terughoudende vormgeving.

   Dit bestand wordt als LAATSTE geladen en is bewust ADDITIEF: het
   raakt alleen typografie, knoppen, focus en beweging aan. Layout
   (flex, grid, breedtes, posities) blijft ongemoeid, want daar
   breekt het als je te breed ingrijpt.

   Bevalt het niet? Haal deze ene regel uit de pagina's en alles is
   bij het oude. Er is niets anders gewijzigd.
   ============================================================ */

:root {
  /* Spatiering op een 8-punts raster. Alle afstanden hieronder zijn
     hier een veelvoud van, zodat het ritme van de pagina klopt in
     plaats van dat elke marge net iets anders is. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Hoekafronding in twee maten: klein voor bedieningselementen,
     groter voor vlakken. Meer maten maakt het onrustig. */
  --radius-control: 12px;
  --radius-surface: 16px;

  /* Het minimale raakvlak uit de richtlijnen. Kleiner is op een
     telefoon niet comfortabel te raken. */
  --tap-target: 44px;
}

/* --- Typografie -------------------------------------------- */

/* Grote tekst zetten met negatieve letterafstand. In SF Pro — het
   systeemlettertype op Mac en iPhone, dat deze site al gebruikt —
   ogen koppen zonder deze correctie te los. Hoe groter de tekst,
   hoe sterker de correctie. */
h1 { letter-spacing: -.022em; line-height: 1.08; }
h2 { letter-spacing: -.018em; line-height: 1.15; }
h3 { letter-spacing: -.012em; line-height: 1.25; }
h4, h5, h6 { letter-spacing: -.006em; }

/* Kleine bovenschriften juist ruimer zetten: in hoofdletters op klein
   formaat plakken de letters anders aan elkaar. */
.eyebrow, .offer-label, .support-label, .preflight-label,
.section-label, .hero-label {
  letter-spacing: .06em;
}

/* Geen globale regellengte-begrenzing.
   Overwogen en bewust weggelaten: een regel als "p { max-width: 68ch }"
   raakt ook paragrafen die als scheidingslijn of label worden gebruikt.
   Op de homepage kneep dat "Built for technical drawings" over twee
   regels. De bestaande stylesheets begrenzen de tekstbreedte al binnen
   hun eigen kolommen; een extra globale regel levert weinig op en
   breekt meer dan het oplost. */

/* --- Bedieningselementen ------------------------------------ */

/* Comfortabel raakvlak op alles waar je op klikt of tikt. */
button,
input[type="submit"],
.download-button, .contact-button, .start-conversion,
.primary-button, .secondary-button {
  min-height: var(--tap-target);
}

/* Tekstvelden even hoog als knoppen, zodat een formulier één ritme
   heeft in plaats van drie verschillende hoogtes. */
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], select {
  min-height: var(--tap-target);
}

/* Een korte, subtiele reactie op indrukken. Genoeg om te voelen dat
   er iets gebeurt, niet zoveel dat het opvalt. */
button, .download-button, .contact-button,
.primary-button, .secondary-button {
  transition: background-color .15s ease, border-color .15s ease,
              opacity .15s ease, transform .1s ease;
}
button:active, .download-button:active, .contact-button:active,
.primary-button:active, .secondary-button:active {
  transform: scale(.98);
}

/* --- Toegankelijkheid --------------------------------------- */

/* Zichtbare focus voor wie met het toetsenbord navigeert. Standaard
   verbergen browsers dit vaak zodra er een eigen stijl op staat, en
   dan is de site niet meer met tab te bedienen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue, #1769ed);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respecteer de systeeminstelling "verminder beweging". Wie daar last
   van heeft, heeft er echt last van. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  button:active, .download-button:active, .contact-button:active,
  .primary-button:active, .secondary-button:active { transform: none; }
}

/* --- Fijnafstelling ----------------------------------------- */

/* Cijfers in tabellen en meters uitlijnen, zodat kolommen met
   getallen recht onder elkaar staan. */
.metrics strong, .quality-metrics strong, table td, table th,
.offer-price strong, .credit-balance strong {
  font-variant-numeric: tabular-nums;
}

/* Randen van vlakken consistent afronden. */
.result-card, .feedback-card, .quality-card, .preflight-card,
.panel, .notice { border-radius: var(--radius-surface); }

/* Op smalle schermen knoppen over de volle breedte, zoals in
   compacte weergaven gebruikelijk is. */
@media (max-width: 480px) {
  .result-actions .download-button,
  .result-actions .contact-button { width: 100%; }
}

/* ============================================================
   Uploadvenster — herontworpen
   ============================================================
   Uitgangspunt uit de richtlijnen: een scherm doet één ding.
   Sinds de keuze Fast/Advanced weg is, is er nog maar één pad:
   bestand kiezen, e-mail invullen, converteren. De vormgeving
   moet dat pad tonen in plaats van het te verbergen achter
   randen en vlakken.
   ============================================================ */

.upload-card {
  /* Vaste minimumhoogte was nodig toen de keuzeknoppen er nog in
     zaten. Nu laat het venster een groot gat onder de knop. */
  min-height: 0 !important;
  padding: 28px !important;
  border-radius: 20px;
  /* De gestippelde rand las als "hier is iets onaf". Een rustige
     lijn met een zachte schaduw voelt vriendelijker en steviger. */
  border: 1px solid var(--line, #dce5f1) !important;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 2px rgba(16,36,61,.04), 0 12px 32px rgba(16,36,61,.06);
}

/* De sleepzone is de hoofdhandeling: die mag de gestippelde rand
   houden, want daar betekent het wel iets. */
.upload-card .conversion-icons {
  padding: 20px 16px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fafe 0%, #fff 100%);
}

.upload-card #file-title {
  margin: 4px 0 6px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.018em;
}

.upload-card #file-detail {
  margin: 0 0 20px;
  color: var(--muted, #687b94);
  font-size: 14px;
}

/* Richting-keuze: getinte segmenten in plaats van twee harde
   knoppen naast elkaar. */
.upload-card .conversion-mode {
  gap: 4px !important;
  padding: 4px;
  border-radius: 14px;
  background: #eef3fa;
}
.upload-card .conversion-mode button {
  min-height: 40px;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--muted, #687b94) !important;
  font-weight: 600;
}
.upload-card .conversion-mode button.active {
  background: #fff !important;
  color: var(--navy, #10243d) !important;
  box-shadow: 0 1px 3px rgba(16,36,61,.12);
}

/* Creditsaldo hoort bij de rand van het scherm, niet in het
   midden van de aandacht. Drie zware vakken maakten het net zo
   belangrijk als de conversieknop zelf. */
.upload-card .credit-summary,
.upload-card .credits {
  padding: 14px !important;
  border: none !important;
  border-radius: 14px;
  background: #f7fafe !important;
}
.upload-card .credit-summary strong,
.upload-card .credits strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* De hoofdknop: één duidelijke actie, ruim en rustig. */
.upload-card button[type="submit"],
.upload-card .submit-button {
  min-height: 50px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: 0 6px 18px rgba(23,105,237,.22);
}

.upload-card #conversion-note {
  display: block;
  margin-top: 12px;
  color: var(--muted, #687b94);
  font-size: 13px;
}

@media (max-width: 520px) {
  .upload-card { padding: 20px !important; }
  .upload-card #file-title { font-size: 19px; }
}

/* De gestippelde rand zit als :after-pseudo-element op het venster,
   niet als randstijl. Die moet daarom apart worden uitgezet - een
   border-regel raakt hem niet. Hij las als "hier is iets onaf",
   terwijl het venster juist rust moet uitstralen. */
.upload-card::after { display: none !important; }