/* Buttons: .btn and its variants, loading state, icon buttons, text links, paired buttons. */
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:inherit;cursor:pointer;font-family:inherit;line-height:inherit;text-decoration-thickness:1px;padding-block:10px;margin-block:-10px;border-radius:0}
/* buttons */
/* ---------- buttons: one scale ---------- */
/* primary .btn 44px, .btn.sm 36px (44px on touch), .btn.line secondary, .btn.block full width, .link text button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);text-decoration:none;position:relative;overflow:hidden;isolation:isolate;cursor:pointer;text-align:center;min-height:var(--ctl-h);padding:0 20px;font-size:var(--fs-ui);line-height:1.2;font-weight:500;letter-spacing:.01em;border-radius:0;white-space:normal;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:color .25s,opacity .15s,transform .08s}
.btn::after{content:"";position:absolute;inset:0;background:var(--on-accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn.line{color:var(--ink);border-color:var(--hair-strong);background:transparent}
/* outline buttons on a yellow surface keep dark ink in both themes (cream-on-yellow was unreadable in dark mode) */
.panel-blue .btn.line,.research-teaser .btn.line,.auth-demo .btn.line,.alert .btn.line,.finding .btn.line,.art-stats .btn.line,.adm-toast-bar .btn.line,.panel .btn.line.on-yellow{color:var(--on-accent);border-color:var(--on-accent)}
/* same for plain links and summaries on those surfaces */
.auth-demo summary,.auth-demo a:not(.btn){color:var(--on-accent)}
.btn.white{background:var(--on-accent);color:var(--accent)}
.btn.sm{min-height:var(--ctl-h-sm);padding:0 14px;font-size:var(--fs-caption);gap:6px}
.btn.block{width:100%;display:flex}
.btn:disabled{opacity:.42;cursor:not-allowed;pointer-events:none}
@media (hover:hover){
  .btn:not(:disabled):hover{color:var(--accent)}
  .btn:not(:disabled):hover::after{transform:scaleY(1)}
}
.icon-btn{background:transparent;border:1px solid var(--hair);display:grid;place-items:center;position:relative;padding:0;color:var(--ink);cursor:pointer;width:44px;height:44px}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
/* paired buttons: always the same width, side by side (stack only on very narrow screens) */
.eq-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px}
.eq-btns .btn{justify-content:center;text-align:center;width:100%}
@media (max-width:340px){
  .eq-btns{grid-template-columns:1fr}
}
/* confirm sheets: the safe choice left, the action right; destructive actions in red (P-05, P-23) */
.btn.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
@media (hover:hover){
  .btn.btn-danger:not(:disabled):hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
}
.confirm-btns{margin-top:12px}
.link.danger,.link.del-link{color:var(--bad)}
label.btn{cursor:pointer}
label.btn.busy{opacity:.55;pointer-events:none}
/* ---------- file inputs: always hidden inside a label that looks and acts like a button ---------- */
label.btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
label.btn .file-vh{inset:0;width:100%;height:100%;clip:auto;pointer-events:auto}
label.btn:focus-within,label.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
label.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.btn:focus{outline:0}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn:not(:disabled):not(.is-loading):active{transform:translateY(1px)}
.btn[aria-disabled=true]{opacity:.42;cursor:not-allowed;pointer-events:none}
/* loading: label hidden, spinner in the label colour, same size so nothing jumps */
.btn.is-loading,.btn[aria-busy=true]{color:transparent!important;pointer-events:none;cursor:progress;opacity:1}
.btn.is-loading::before,.btn[aria-busy=true]::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--on-accent);border-right-color:transparent;border-radius:var(--r-round);animation:ss-spin .7s linear infinite,ss-fade .2s ease-out both;z-index:1}
.btn.line.is-loading::before,.btn.line[aria-busy=true]::before{border-color:var(--ink);border-right-color:transparent}
.btn.sm.is-loading::before{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.btn.is-loading::after{transform:scaleY(0)!important}
@keyframes ss-spin{to{transform:rotate(360deg)}}
@keyframes ss-fade{from{opacity:0}}
.link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .link:hover{text-decoration-thickness:2px}
}
.icon-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .icon-btn:hover{border-color:var(--ink);background:var(--mint)}
}
@media (max-width:760px),(pointer:coarse){
  /* ---------- touch: every control is at least 44px tall, and fields never trigger iOS zoom ---------- */
  .btn.sm{min-height:44px;padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  .btn.is-loading::before{animation:none!important}
  .btn.is-loading::before,.btn[aria-busy=true]::before{animation:ss-spin 1.6s linear infinite!important}
}