/* Conceptschermen van de app: telefoonmockups in de huisstijl.
   Alles in em, zodat één font-size op .telefoon het hele scherm schaalt
   (site: 15px, TikTok-beelden: groter). Gebruikt door index.html en concept/tiktok.html. */

.telefoon {
  --inkt: #1A1512; --koffie: #3B2A20; --papier: #EFE4CF; --papier-donker: #E2D3B6;
  --oker: #D99A2B; --bordeaux: #7A2323; --mos: #4F5B3A; --roest: #9A3B1E;
  --groenzwart: #1F2A2E; --linnen: #C9B68E;
  font-size: 15px;
  width: 18.5em; height: 38em; flex: none;
  padding: .55em;
  background: var(--koffie);
  border-radius: 2.4em;
  box-shadow: inset 0 0 0 1.5px rgba(239,228,207,.14), 0 1.6em 3em -1em rgba(0,0,0,.75);
  font-family: "Caudex", Georgia, serif;
  line-height: 1.35;
  text-align: left;
}
.telefoon * { box-sizing: border-box; }
.scherm {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--papier); color: var(--inkt);
  border-radius: 1.9em;
}
.status {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75em 1.4em .35em; font: 700 .72em/1 "Courier Prime", monospace;
}
.status::after { content: ""; width: 1.9em; height: .8em; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: inset -.55em 0 0 currentColor; }

/* Kop van een scherm, als de kop van de uitleenkaart */
.app-kop { background: var(--bordeaux); color: var(--papier); padding: .7em 1.1em .65em; }
.app-kop b { display: block; font-size: 1.2em; line-height: 1.1; letter-spacing: -.01em; }
.app-kop small { font: .72em/1.3 "Courier Prime", monospace; opacity: .85; }
.inhoud { flex: 1; overflow: hidden; padding: .8em 1.1em; display: flex; flex-direction: column; gap: .7em; }
.label { font: 700 .66em/1 "Courier Prime", monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: .35em; }
.typ { font-family: "Courier Prime", monospace; }

/* Onderbalk */
.tabbar {
  display: flex; justify-content: space-around; border-top: 1.5px solid rgba(26,21,18,.18);
  padding: .55em .5em .9em; font: .64em/1 "Courier Prime", monospace;
}
.tabbar span { padding-bottom: .3em; opacity: .55; }
.tabbar .actief { opacity: 1; font-weight: 700; border-bottom: 2px solid var(--bordeaux); }

/* Boek dat je nu leest */
.nu { display: flex; gap: .75em; align-items: stretch; }
.omslag {
  width: 3.1em; height: 4.5em; flex: none; border-radius: 1px 3px 3px 1px;
  background: var(--k, var(--groenzwart)); color: var(--t, var(--papier));
  box-shadow: inset .3em 0 0 rgba(0,0,0,.22), .15em .2em 0 var(--papier-donker);
  display: flex; align-items: flex-end; padding: .35em .3em; font: 700 .5em/1.1 "Caudex", serif;
}
.nu b { display: block; font-size: 1.05em; line-height: 1.15; }
.nu i { font-size: .85em; opacity: .75; }
.voortgang { margin-top: .45em; height: .35em; background: var(--papier-donker); border-radius: 1px; }
.voortgang span { display: block; height: 100%; width: var(--p, 40%); background: var(--bordeaux); }
.nu .typ { font-size: .66em; opacity: .75; }

/* Mini-boekenplank voor de top 5 */
.miniplank {
  display: flex; align-items: flex-end; gap: 2px; height: 5.6em;
  border-bottom: .45em solid var(--koffie); padding: 0 .3em;
}
.mrug {
  flex: 1 1 0; height: var(--h, 90%); min-width: 0;
  background: var(--k, var(--oker)); color: var(--t, var(--inkt));
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; padding: .4em 0; border-radius: 1px 1px 0 0;
  font: 700 .62em/1 "Caudex", serif; white-space: nowrap; overflow: hidden;
  box-shadow: inset -2px 0 0 rgba(0,0,0,.18);
}
.leeslijst { margin: 0; padding: 0; list-style: none; font: .74em/1.25 "Courier Prime", monospace; }
.leeslijst li { border-bottom: 1px solid rgba(59,42,32,.2); padding: .35em 0; }
.leeslijst li::before { content: "□ "; opacity: .6; }

/* Genres als stempels */
.stempels { display: flex; flex-wrap: wrap; gap: .35em; }
.stempeltje {
  font: 700 .62em/1 "Courier Prime", monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--bordeaux); border: 1.5px solid var(--bordeaux); border-radius: 2px; padding: .4em .5em;
}
.stempeltje.vol { background: var(--bordeaux); color: var(--papier); transform: rotate(-4deg); }
.stempeltje.zoekt { color: var(--mos); border-color: var(--mos); }

/* Persoon: initialen op een boekrugkleur */
.persoon { display: flex; align-items: center; gap: .55em; }
.avatar {
  width: 2.2em; height: 2.2em; flex: none; border-radius: 50%;
  background: var(--k, var(--mos)); color: var(--t, var(--papier));
  display: grid; place-items: center; font: 700 .9em/1 "Caudex", serif;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.avatar.klein { width: 1.7em; height: 1.7em; font-size: .75em; }
.persoon b { display: block; font-size: .9em; line-height: 1.1; }
.persoon .typ { font-size: .66em; opacity: .75; }
.avatars { display: flex; }
.avatars .avatar { margin-right: -.25em; box-shadow: 0 0 0 2px var(--papier); }

/* Filterregel */
.filters { display: flex; gap: .35em; align-items: center; flex-wrap: wrap; }
.filter { font: .64em/1 "Courier Prime", monospace; border: 1.5px solid var(--inkt); border-radius: 2px; padding: .4em .5em; }
.filter.aan { background: var(--inkt); color: var(--papier); }

/* Kaarten */
.matchkaart, .clubkaart {
  background: rgba(255,255,255,.4); border: 1.5px solid rgba(26,21,18,.75); border-radius: 2px;
  padding: .7em .75em; display: flex; flex-direction: column; gap: .45em;
}
.matchkaart .waarom { font-weight: 700; font-size: .92em; line-height: 1.2; }
.matchkaart .ook { font-size: .78em; font-style: italic; margin-top: -.3em; }
.matchkaart .rij, .clubkaart .rij { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.knopje {
  font: 700 .7em/1 "Caudex", serif; background: var(--oker); color: var(--inkt);
  border-radius: 2px; padding: .55em .7em; box-shadow: 0 2px 0 #9C6C17; white-space: nowrap;
}
.knopje.lijn { background: transparent; border: 1.5px solid var(--inkt); box-shadow: none; }
.knopje.breed { display: block; text-align: center; padding: .75em; font-size: .8em; }
.drempel { font-size: .74em; font-style: italic; text-align: center; opacity: .8; margin-top: auto; }

/* Chat */
.chatkop { display: flex; align-items: center; gap: .55em; padding: .55em 1.1em; border-bottom: 1.5px solid rgba(26,21,18,.18); }
.chatkop b { font-size: .95em; }
.tabs { display: flex; gap: .3em; margin-left: auto; }
.bubbels { display: flex; flex-direction: column; gap: .45em; }
.bubbel { max-width: 82%; font-size: .78em; line-height: 1.3; padding: .5em .7em; border-radius: 2px; background: rgba(255,255,255,.55); border: 1px solid rgba(26,21,18,.2); }
.bubbel.ik { align-self: flex-end; background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.afspraakkaart {
  border: 1.5px solid var(--bordeaux); border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.4);
}
.afspraakkaart .kop { background: var(--bordeaux); color: var(--papier); font: 700 .62em/1 "Courier Prime", monospace; letter-spacing: .08em; text-transform: uppercase; padding: .5em .7em; }
.afspraakkaart .wat { padding: .55em .7em .3em; }
.afspraakkaart .wat b { display: block; font-size: .9em; line-height: 1.2; }
.afspraakkaart .wat .typ { font-size: .66em; opacity: .8; }
.afspraakkaart .rij { display: flex; gap: .4em; padding: .3em .7em .65em; }
.typbalk { margin-top: auto; font: .7em/1 "Courier Prime", monospace; border-bottom: 2px solid var(--inkt); padding: .6em .4em; opacity: .55; }

/* Club */
.clubnaam { font-size: 1.15em; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.regels { font-size: .76em; }
.regels div { display: flex; gap: .6em; border-bottom: 1px solid rgba(59,42,32,.2); padding: .4em 0; }
.regels .typ { flex: 0 0 5.4em; font-size: .88em; opacity: .7; padding-top: .1em; }
.samengesteld {
  align-self: flex-start; font: 700 .64em/1.15 "Courier Prime", monospace; letter-spacing: .06em;
  color: var(--bordeaux); border: 3px double var(--bordeaux); border-radius: 4px; padding: .35em .55em; transform: rotate(-3deg);
}
.clubkaart .clubnaam { font-size: .95em; }
.clubkaart .typ { font-size: .64em; opacity: .8; }
.clubkaart.gedimd { opacity: .6; }
.clubkaart .nu-leest { font-size: .76em; }
.knopje.onderaan { margin-top: auto; }