/* Conceptbibliotheek (issue #660) — gedeeld door concepten.html, concept.html
   en concept-upload.html.

   Core-tokens komen uit tokens.css en worden hier niet herhaald (huisstijlregel).
   Wat hier staat is alleen wat met tekeningen te maken heeft: een plattegrond en
   een aanzicht moeten schaalbaar zijn en op een telefoon leesbaar blijven. */

*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--navy); line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; }

.hero {
  background: var(--navy); color: #fff; padding: 40px 24px 32px;
}
.hero .inner { max-width: 1180px; margin: 0 auto; }
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: 12px;
  font-weight: 700; color: var(--lime); margin-bottom: 8px;
}
.hero h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 800; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

.intro {
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 24px;
}
.intro p { margin: 0; max-width: 640px; color: var(--muted); }

.knop {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 18px; border-radius: var(--radius); font-weight: 700; font-size: 14px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.knop-lime { background: var(--lime); color: #fff; }
.knop-rand { border-color: var(--navy); color: var(--navy); background: #fff; }
.knop[disabled], .knop.uit { opacity: .5; pointer-events: none; }

/* `display` uit een eigen regel wint van de [hidden] van de browser, dus een
   knop of een veld dat op `hidden` wordt gezet blijft anders gewoon staan — en
   dan krijgt iemand die alleen mag kijken tóch een invoerveld te zien. */
.knop[hidden], .veld[hidden] { display: none !important; }

.melding {
  background: #fff; border: 1px solid #E3E7EA; border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; color: var(--muted);
}
.melding.fout { border-left-color: #E24B4A; }
.melding.goed { border-left-color: var(--lime); }

/* ── kaarten ─────────────────────────────────────────────────────────────── */

.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; }

.kaart {
  background: #fff; border: 1px solid #E3E7EA; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(29,61,89,.06); display: flex; flex-direction: column;
}
.kaart-leeg { min-height: 320px; }
.kaart-tekst { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kaart h2 { margin: 0; font-size: 18px; font-weight: 800; }
.kaart h2 a { color: var(--navy); text-decoration: none; }
.kaart h2 a:hover { text-decoration: underline; }
.kaart .door { margin: 0; font-size: 13px; color: var(--hint); }
.kaart .omschrijving { margin: 0; font-size: 14px; color: var(--muted); }
.kaart .knop { align-self: flex-start; margin-top: auto; }

.pg-vak {
  display: block; background: #F7F9FA; border-bottom: 1px solid #E3E7EA;
  padding: 12px; min-height: 190px;
}
a.pg-vak { text-decoration: none; }

.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cijfer {
  background: #F7F9FA; border-radius: 10px; padding: 8px 6px; text-align: center;
}
.cijfer .waarde {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 16px;
}
.cijfer .label { display: block; font-size: 11px; color: var(--hint); }

.herkomst { margin: 0; font-size: 12px; color: var(--hint); }

/* De nauwkeurigheidsklasse op de kaart. Bewust zonder rood of groen: elk concept
   wordt op dit moment afgetopt door onze eigen kengetallen, dus een kleur zou
   niets onderscheiden tussen de kaarten — alleen alarm zaaien over iets dat aan
   ons ligt. De letter valt op door zijn vorm, de reden staat in de zin ernaast. */
.klasse { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.klasse:empty { display: none; }
.klasse .letter {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--light); color: var(--navy);
  font-family: var(--font-mono); font-weight: 800; font-size: 13px;
}
.klasse.onbekend { color: var(--hint); font-style: italic; }

.geen-tekening {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  min-height: 166px; text-align: center; padding: 12px; color: var(--hint); font-size: 13px;
}
.geen-tekening strong { color: var(--muted); font-size: 14px; }

/* ── tekeningen ──────────────────────────────────────────────────────────── */

/* De hoogte begrenst de tekening op een breed scherm; ruimer dan een gewone
   afbeelding, want een smal en hoog gebouw wordt op de hoogte gepast en dan
   krimpen de letters mee. Op de miniatuur van een conceptkaart mag het krapper. */
svg.pg, svg.az { display: block; width: 100%; height: auto; max-height: 560px; }
.pg-vak svg.pg { max-height: 220px; }

/* De letterhoogte staat in de tekening zelf (in meters), niet hier: het vel
   wordt op de kolombreedte geschaald, dus een maat in pixels loopt mee met het
   scherm en niet met het gebouw. */
.pg-naam { fill: #34506B; font-weight: 600; letter-spacing: .02em; }
.pg-maat { fill: #5A7080; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.tekenblok {
  background: #fff; border: 1px solid #E3E7EA; border-radius: 14px; padding: 18px;
}
.tekenknoppen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tekenknoppen .laagknop {
  border: 1px solid #CFD6DC; background: #fff; color: var(--navy); border-radius: 999px;
  padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.tekenknoppen .laagknop[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tekenknoppen label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.tekenknoppen input[type="range"] { width: 180px; }

.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--hint); margin-top: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }

/* ── detailpagina ────────────────────────────────────────────────────────── */

.kolommen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .kolommen { grid-template-columns: 1fr; } }

.blok {
  background: #fff; border: 1px solid #E3E7EA; border-radius: 14px; padding: 18px 20px;
  margin-bottom: 20px;
}
.blok h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.blok .sub { margin: 0 0 14px; font-size: 13px; color: var(--hint); }

/* Eisenlijst op de aanleverpagina: wat er op een blad hoort te staan. Geen
   opsommingstekens maar een lime streepje — een eis is een afspraak, geen bullet. */
ul.eisen { margin: 0; padding: 0; list-style: none; }
ul.eisen li {
  position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: 14px; color: var(--muted); line-height: 1.45;
}
ul.eisen li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 2px; background: var(--lime);
}
ul.eisen li strong { color: var(--navy); }
ul.eisen + p { margin-top: 12px; }

table.gegevens { width: 100%; border-collapse: collapse; font-size: 14px; }
table.gegevens th, table.gegevens td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #EEF1F3; }
table.gegevens td.getal, table.gegevens th.getal {
  text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
table.gegevens tr.som td { font-weight: 800; border-top: 2px solid var(--navy); border-bottom: none; }
/* De herkomst per hoeveelheid staat naast het getal, niet eronder: een kolom
   leest in één blik en een regel eronder verdubbelt de tabelhoogte. */
table.gegevens td.bronkolom { text-align: right; font-size: 12.5px; color: var(--hint); white-space: nowrap; }
table.gegevens thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--hint); }

.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.veld label { font-size: 13px; font-weight: 700; }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid #CFD6DC;
  border-radius: 10px; background: #fff; color: var(--navy); width: 100%;
}
.veld .bijschrift { font-size: 12px; color: var(--hint); }
.veld.fout input, .veld.fout select { border-color: #E24B4A; }

.voetnoot { margin-top: 36px; color: var(--hint); font-size: 13px; }
.voetnoot h2 { font-size: 15px; color: var(--navy); margin: 0 0 6px; }

.wachtend { opacity: .6; pointer-events: none; }