/* Text roles and touch targets for the paper pages. Loaded after the page stylesheets, so it is the single place
   where sizes, tracking and tap areas are decided. Four roles: label, button, small, body. */

/* label: small uppercase captions */
.kicker, .sub, .credits-title, .allergen, .top, .social, .listen-links, .rv-label { font-size:var(--fs-label); letter-spacing:var(--ls-label); }
.dur { font-size:var(--fs-small); }

/* button: every outlined or filled action */
.links a, #bill-btn, #book-btn, .save span, .rv-submit, .bk-leave, .bk-more, .materials-line a { font-size:var(--fs-btn); letter-spacing:var(--ls-btn); }

/* small: italic notes and quiet text controls */
.hint, .bill-hint, .note, .course, .lyr-toggle, .clip-link, #select-all, .book-link, .linkbtn, .tagline, .bk-count, .bk-state, .bk-date, .back, .rv-count, .rv-error, .save small, .listen, .total-time { font-size:var(--fs-small); }
.role, .who, figcaption { font-size:var(--fs-small); }
.tagline { font-size:var(--fs-body); }
.rv-count { font-size:.8rem; }
.bk-text, 

/* touch targets: enlarge the hit area without moving anything (44px target, the visible size stays) */
.lyr-toggle, .clip-link, #select-all, .book-link, .linkbtn, .listen-links a, .social a, .top a, .back a, .bk-retry { position:relative; }
.lyr-toggle::after, .clip-link::after, #select-all::after, .book-link::after, .linkbtn::after, .listen-links a::after, .social a::after, .top a::after, .back a::after, .bk-retry::after { content:''; position:absolute; inset:-10px -8px; }
.play { width:44px; height:44px; margin-top:-22px; }
.rv-star { width:44px; height:44px; }