/* Titus Retro knop: de enige plek waar een knop zijn uiterlijk krijgt.
   Herontwerp 2026-10-12 (Ben: "hot mess", richting: Apple-design, emilkowalski/skills apple-design en emil-design-eng).
   Drie materialen met een vaste rol (zie DESIGN-SYSTEEM sectie 10):
   - glas: Bens presets "titus" en "titus rechthoek" op elke knop; de breking (glass.js) alleen waar de aquarel er echt
     achter ligt.
   - chrome en blad (surfaces.css): balk, speler, menu's; en per pagina een leesvlak.
   Ben 2026-10-12: ALLE knoppen en menu's zijn liquid glass, de achtergrond is aquarel. Leesvlakken met lopende tekst
   (surfaces.css) zijn geen knop of menu en blijven een rustig blad; glas stapelt nooit op glas.
   Indrukken: scale(.97) in 160 ms ease-out op :active; hover alleen met een muis. Varianten via data-variant: cta,
   primary, secondary, chip, icon, tab, wheel, tile; maat via data-size s, m, l. */
.tr-btn,.tr-field{box-sizing:border-box;font-family:var(--tr-font-body);text-transform:none!important;letter-spacing:normal;-webkit-tap-highlight-color:transparent}
:where(.tr-btn){
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--tr-s-2);
  min-height:var(--tr-touch);min-width:var(--tr-touch);padding:var(--tr-s-2) var(--tr-s-4);margin:0;
  font-size:var(--tr-font-size-m);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
}
.tr-btn{
  isolation:isolate;border:0;border-radius:var(--lq-r-pil);
  /* Ben 2026-10-12: alle knoppen liquid glass (preset titus), de achtergrond is aquarel */
  background:var(--lq-sheen),var(--lq-tint);color:var(--tr-btn-ink);font-weight:500;text-shadow:var(--lq-text-shadow);
  box-shadow:var(--lq-rim),var(--lq-shadow-klein);outline-offset:3px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  /* alleen transform: een kleurovergang liet knoppen die tr-btn.js na het laden stempelt van crème naar teal faden, en bij
     verborgen knoppen bleef die overgang hangen (gemeten 2026-10-12, 1651 lopende animaties). Apple: feedback is direct. */
  transition:transform 160ms var(--tr-ease-out);
}
/* raakvlak: de knop kan visueel kleiner zijn, de aanraakzone is minimaal 44 x 44 */
.tr-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tr-touch));height:max(100%,var(--tr-touch));transform:translate(-50%,-50%)}
@media(hover:hover) and (pointer:fine){.tr-btn:not(:disabled):not([aria-disabled="true"]):hover{background:var(--lq-sheen),var(--lq-tint-hover)}}
.tr-btn:not(:disabled):not([aria-disabled="true"]):active{transform:scale(.97)}
.tr-btn:focus-visible,.tr-field:focus-visible{outline:var(--tr-focus)}
.tr-btn[aria-pressed="true"],.tr-btn[aria-selected="true"],.tr-btn[aria-current="true"],.tr-btn.is-current,.tr-btn.is-selected,.tr-btn.is-active{
  background:var(--lq-sheen),var(--lq-tint-selected);font-weight:600}
.tr-btn:disabled,.tr-btn[aria-disabled="true"]{opacity:var(--tr-btn-disabled);cursor:default;transform:none}
.tr-btn[aria-disabled="true"]{pointer-events:none}
.tr-btn svg{flex:none;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* maten */
.tr-btn[data-size="s"]{font-size:var(--tr-font-size-s)}
:where(.tr-btn[data-size="s"]){padding:var(--tr-s-1) var(--tr-s-3)}
.tr-btn[data-size="l"]{font-family:var(--tr-font-display);font-weight:500;letter-spacing:-.01em}
:where(.tr-btn[data-size="l"]){min-height:56px;font-size:var(--tr-font-size-l)}

/* primary: de ene hoofdactie van een scherm, volle teal */
.tr-btn[data-variant="primary"]{background:var(--lq-sheen),var(--lq-tint-primary);color:var(--lq-ink-primary);text-shadow:0 1px 2px rgba(0,0,0,.3);font-weight:600}

/* chip: compact, raakvlak 44 */
:where(.tr-btn[data-variant="chip"]){min-height:32px;padding:var(--tr-s-1) var(--tr-s-3);font-size:var(--tr-font-size-s)}
/* icon: rond, zonder tekst */
:where(.tr-btn[data-variant="icon"]){width:var(--tr-touch);height:var(--tr-touch);padding:0}
.tr-btn[data-material]::after{display:none}

/* tab: geen vlak; de gekozen tab krijgt de teal inkt en een onderlijn */
.tr-btn[data-variant="tab"]{background:none;box-shadow:none;text-shadow:none;color:var(--tr-ink-quiet-on-panel)}
/* de gekozen tab is een glazen pil (zoals een Liquid Glass-tabbalk) */
.tr-btn[data-variant="tab"]:is([aria-selected="true"],[aria-current="page"],[aria-current="true"]){color:var(--tr-btn-ink);background:var(--lq-sheen),var(--lq-tint-selected);box-shadow:var(--lq-rim);font-weight:600}
@media(hover:hover) and (pointer:fine){.tr-btn[data-variant="tab"]:hover{background:none;color:var(--tr-ink-on-panel)}}

/* wheel: een optie in een keuzewiel; de band eromheen (surfaces.css) markeert de keuze, de optie zelf blijft vlak */
.tr-btn[data-variant="wheel"]{background:none;box-shadow:none;text-shadow:none;transform:none!important;font-family:var(--tr-font-display);color:var(--tr-ink-on-panel);letter-spacing:-.01em}
:where(.tr-btn[data-variant="wheel"]){font-size:var(--tr-font-size-l)}
.tr-btn[data-variant="wheel"]:is([aria-selected="true"],[aria-pressed="true"],.is-current){background:none;font-weight:600;color:var(--tr-ink-on-panel)}
@media(hover:hover) and (pointer:fine){.tr-btn[data-variant="wheel"]:hover{background:none}}

/* tile: een aquarel met een label op een verloop naar het blad; preset "titus rechthoek" (hoek 0) */
.tr-btn[data-variant="tile"]{border-radius:var(--lq-r-rechthoek);background-size:cover;background-position:center;color:var(--tr-ink)}
:where(.tr-btn[data-variant="tile"]){display:flex;align-items:flex-end;justify-content:center;min-height:72px;padding:0 var(--tr-s-2) var(--tr-s-2)}
.tr-btn[data-variant="tile"]::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,transparent 40%,var(--tr-sheet) 100%)}

/* data-glass="rechthoek": preset "titus rechthoek" (hoek 0), zoals Ben het wijst in glass.json (vorm.rechthoek) */
.tr-btn[data-glass="rechthoek"]{border-radius:var(--lq-r-rechthoek)}
/* glas: Bens presets met breking. Alleen de cta en data-glass; de rest van de site is chrome, blad of getint. */
.tr-btn:is([data-variant="cta"],[data-glass]){
  background:var(--lq-sheen),var(--lq-tint);color:var(--tr-btn-ink);text-shadow:var(--lq-text-shadow);
  box-shadow:var(--lq-rim),var(--lq-shadow-klein);
}
.tr-btn[data-variant="cta"]{box-shadow:var(--lq-rim),var(--lq-shadow)}
@media(hover:hover) and (pointer:fine){.tr-btn:is([data-variant="cta"],[data-glass]):not(:disabled):hover{background:var(--lq-sheen),var(--lq-tint-hover)}}
:where(.tr-btn[data-variant="cta"]){display:grid;grid-template-columns:52px 1fr 52px;width:var(--tr-cta-w);max-width:100%;height:var(--tr-cta-h);padding:0 22px;font-size:34px}
.tr-btn[data-variant="cta"]{color:var(--tr-cta-ink,var(--tr-btn-ink));font-family:var(--tr-font-display);font-weight:560;font-variation-settings:"SOFT" 22,"WONK" 1;line-height:1;letter-spacing:.01em}
.tr-btn[data-variant="cta"]::after{display:none}
.tr-btn[data-variant="cta"] .tr-btn__label{justify-self:center}
.tr-btn[data-variant="cta"] .tr-btn__icon{width:43px;height:43px;justify-self:start}
.tr-btn[data-variant="cta"] .tr-btn__end{width:27px;height:27px;justify-self:end}

/* veld: een egaal vlak in het blad, hoek 0 (preset "titus rechthoek"); 16 px zodat iOS niet inzoomt */
.tr-field{min-height:var(--tr-touch);padding:var(--tr-s-2) var(--tr-s-3);border:0;border-radius:var(--lq-r-rechthoek);background:var(--tr-fill);color:var(--tr-ink);font-size:max(16px,var(--tr-font-size-m));box-shadow:inset 0 0 0 1px var(--tr-hairline)}
.tr-field:focus-visible{box-shadow:inset 0 0 0 2px var(--tr-tint-strong);outline:0}
select.tr-field{appearance:none;-webkit-appearance:none;padding-right:var(--tr-s-6);background-image:linear-gradient(45deg,transparent 50%,var(--tr-ink) 50%),linear-gradient(135deg,var(--tr-ink) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.tr-field option{background:var(--tr-paper-solid);color:var(--tr-ink)}
.tr-field::placeholder{color:var(--tr-ink-mute)}

/* paneel (oude naam): het blad */
.tr-panel{background:var(--tr-sheet);border:0;border-radius:var(--lq-r-rechthoek)}

/* lagen die glass.js in een glazen knop zet (kopiestand, Safari en Firefox) */
.lq-clip{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.lq-refraction{position:absolute;inset:0;will-change:filter}
.lq-backdrop{position:absolute;left:0;top:0;background-repeat:no-repeat;will-change:transform}
@media(prefers-reduced-transparency:reduce){.tr-btn:is([data-variant="cta"],[data-glass]){background:var(--lq-solid)!important}.lq-clip{display:none}}
@media(prefers-contrast:more){.tr-btn{box-shadow:inset 0 0 0 1px currentColor}}
@media(prefers-reduced-motion:reduce){.tr-btn{transition:none}.tr-btn:active{transform:none}}