/* Buttons of the site: three levels, written once. Every page links this file; nothing else styles a button.
   - primary   .btn.btn--p  the one action of a view: solid mint, a fine light along its top edge; the round
                            bubble carries the arrow, which moves the way it points on hover.
   - secondary .btn         an outlined pill for the second choice beside a primary.
   - quiet     .btn.btn--q  words and an icon in mint, no edge: Back, Back to top, Copy, Log in.
   Sizes: .btn--sm (in a bar or a row), default, .btn--lg (the end of a form); .btn--block fills its column.
   Sober before sweet (the owner: "elegant, never cloying"): flat colour, one hairline of light, no glow at rest;
   a small lift and a faint glow answer the pointer. Never an offset shadow. Text is never dimmed: a disabled
   button shows a dashed edge instead of fading. */
:root{--btn-hi:#c5e7d4;--btn-glow:rgba(16,201,139,.4)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:48px;padding:.7em 1.35em;border-radius:999px;font:inherit;font-size:.94rem;font-weight:500;line-height:1.2;color:#fff;white-space:nowrap;cursor:pointer;border:1px solid var(--edge,rgba(182,222,200,.55));background:transparent;transition:transform .4s var(--ease),border-color .3s,background-color .3s,box-shadow .4s var(--ease),color .3s}
.btn:hover{border-color:var(--mint);background-color:rgba(182,222,200,.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0);transition-duration:.12s}
.btn:focus-visible{outline:2px solid var(--em);outline-offset:3px;border-radius:999px}
.btn .ic{font-size:1.05rem}

/* primary */
.btn--p{color:var(--ink);border-color:transparent;background-color:var(--mint);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn--p:hover{border-color:transparent;background-color:var(--btn-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -16px var(--btn-glow)}
.btn--p:active{background-color:var(--mint);box-shadow:inset 0 1px 3px rgba(4,20,13,.25)}
/* with its bubble a primary keeps the height of the buttons beside it: the bubble sits in the padding */
.btn--p:has(.bub){padding-top:.4em;padding-bottom:.4em;padding-right:.4em}

/* the round bubble of a primary: the arrow travels the way it points */
.bub{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:var(--ink);color:var(--mint)}
.bub .ic{transition:transform .4s var(--ease)}
.btn:hover .bub .ic{transform:translateX(2px)}
.btn:hover .bub--down .ic{transform:translateY(2px)}

/* quiet: no edge, a line draws itself under it */
.btn--q{min-height:44px;padding:.4em .15em;gap:.55em;border:0;border-radius:6px;background:none;box-shadow:none;color:var(--mint)}
.btn--q::after{content:"";position:absolute;left:.15em;right:.15em;bottom:.45em;height:1.5px;background:var(--em);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn--q:hover{background:none;box-shadow:none;transform:none;color:#fff}
.btn--q:hover::after{transform:scaleX(1)}
.btn--q .ic{transition:transform .4s var(--ease)}
.btn--q:hover .ic{transform:translateX(3px)}
.btn--q:focus-visible{border-radius:6px}
.ic.up{transform:rotate(180deg)} /* arrow-down turned to point up */
.btn--q:hover .ic.up{transform:rotate(180deg) translateY(3px)}

/* sizes */
.btn--sm{min-height:40px;padding:.5em 1.05em;font-size:.84rem}
.btn--sm.btn--p:has(.bub){padding-right:.35em}
.btn--lg{min-height:56px;padding:.8em 1.6em;font-size:var(--t-body,1.0625rem)}
.btn--block{display:flex;width:100%;justify-content:space-between}

/* not available: a dashed edge and mint words, never a faded button */
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;transform:none;color:var(--mint);background:none;border:1.5px dashed var(--mint);box-shadow:none}
.btn:disabled::after,.btn[aria-disabled="true"]::after{display:none}

/* a row of buttons */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.cta--mid{justify-content:center}

@media (prefers-reduced-motion:reduce){.btn,.btn::after,.bub .ic,.btn--q .ic{transition:none}.btn:hover,.btn:active{transform:none}}