/* Lehmus Labs 2.0 — controls made of the bubble's glass.
   Button = three layers: a bevelled body with a tinted shadow, a glass droplet (WebGL via glass.js,
   CSS gradient as fallback) and a Gabarito 500 label. Hover lets the droplet's liquid flow into the body.
   Uses the page tokens (--lime, --ink-green, --display, --ease …). */

/* ---------- button ---------- */
.btn {
  --h: 58px; --o: 42px; --pad: calc((var(--h) - var(--o)) / 2);
  --mx: 0px; --my: 0px; --py: 0px;
  --ax: 1; --ay: -1;                       /* arrow travel: ↗ by default */
  /* lime (default): forest glass droplet on a lime body */
  --bg: linear-gradient(180deg, #c4e35f 0%, #abcf37 52%, #9dc132 100%);
  --fg: var(--ink-green); --fg-h: #fff; --orb-fg: var(--lime); --orb-fg-h: #fff;
  --tone: 0; --ftone: 0; --glass-shadow: .32; --glass-core: .16;   /* forest glass stays deep so the lime arrow reads */
  --bevel: inset 0 1px 0 #ffffffa6, inset 0 -1.5px 0 #6f8f1e5c;
  --lift: 0 1px 1.5px #39742c42, 0 12px 24px -14px #39742cb0;
  --bevel-press: inset 0 1.5px 3px #5f7e1a73, inset 0 -.5px 0 #ffffff4d;
  --lift-press: 0 1px 1px #39742c38;
  --orb-css: radial-gradient(circle at 34% 30%, #8fbb62 0, #3f7434 42%, #18321d 100%);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 16px;
  height: var(--h); padding: 0 var(--pad) 0 26px;
  border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  box-shadow: var(--bevel), var(--lift);
  font: 500 1rem/1 var(--display); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transform: translate3d(var(--mx), calc(var(--my) + var(--py)), 0);
  transition: color .3s var(--ease), box-shadow .2s var(--ease), transform .5s var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn > canvas.glass { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.btn .orb {
  --lean: 0px, 0px;
  position: relative; flex: none; width: var(--o); height: var(--o); border-radius: 50%;
  color: var(--orb-fg); background: var(--orb-css);
  clip-path: circle(50%);                  /* arrows waiting outside the droplet stay invisible */
  transform: translate(var(--lean)); transition: transform .5s var(--ease);
}
.btn.gl .orb { background: none; }

/* arrows: 16 px on the droplet, stroke 1.75; the waiting copy sits a full droplet away */
.btn .orb svg {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .55s var(--ease), opacity .25s var(--ease);
}
.btn .orb .ar.in { transform: translate(calc(var(--o) * var(--ax) * -1), calc(var(--o) * var(--ay) * -1)); }
.btn.fwd { --ax: 1; --ay: 0; }
.btn.down { --ax: 0; --ay: 1; }
@media (hover: hover) {
  .btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-done):hover .ar:not(.in) { transform: translate(calc(var(--o) * var(--ax)), calc(var(--o) * var(--ay))); }
  .btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-done):hover .ar.in { transform: none; transition-delay: .05s; }
  .btn:not(.gl):hover { color: var(--fg-h); }
}
.btn.is-hover .ar:not(.in) { transform: translate(calc(var(--o) * var(--ax)), calc(var(--o) * var(--ay))); }
.btn.is-hover .ar.in { transform: none; }
.btn.filled { color: var(--fg-h); }
.btn.filled .orb { color: var(--orb-fg-h, var(--orb-fg)); }

/* CSS fallback fill (no WebGL): the droplet grows as a circle */
.btn:not(.gl)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orb-css); clip-path: circle(calc(var(--o) / 2) at calc(100% - var(--h) / 2) 50%); transition: clip-path .7s var(--ease); }
@media (hover: hover) { .btn:not(.gl):hover::before { clip-path: circle(150% at calc(100% - var(--h) / 2) 50%); } }

/* press: the bevel flattens */
.btn:active, .btn.is-press { --py: 1px; box-shadow: var(--bevel-press), var(--lift-press); transition-duration: .08s; }

/* focus */
.btn:focus-visible, .btn.is-focus { outline: 3px solid var(--dark-green); outline-offset: 4px; border-radius: 999px; }
.on-dark .btn:focus-visible, .on-dark .btn.is-focus { outline-color: var(--pollen); }

/* disabled */
.btn:disabled, .btn[aria-disabled="true"] {
  --bg: #e6ecdf; --fg: #6f7c69; --fg-h: #6f7c69; --orb-fg: #6f7c69;
  --orb-css: radial-gradient(circle at 34% 30%, #ffffff 0, #d7dfd0 55%, #bdc8b5 100%);
  box-shadow: inset 0 0 0 1px #d2dbcb; cursor: not-allowed; transform: none;
}
.btn:disabled > canvas.glass, .btn[aria-disabled="true"] > canvas.glass { filter: saturate(0) brightness(1.55) contrast(.55); opacity: .75; }
.on-dark .btn:disabled, .on-dark .btn[aria-disabled="true"] { --bg: #ffffff1f; --fg: #d3dfca; --fg-h: #d3dfca; --orb-fg: #2b4a31; box-shadow: inset 0 0 0 1px #ffffff2e; }

/* loading: arrows step aside, liquid circulates inside the droplet (glass.js) */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .ar, .btn.is-done .ar { opacity: 0; transform: scale(.4) !important; transition-delay: 0s !important; }
.btn:not(.gl)[aria-busy="true"] .orb { animation: ll-orb-pulse 1.4s ease-in-out infinite; }
@keyframes ll-orb-pulse { 50% { filter: brightness(1.25); } }

/* done: the arrow becomes a check — pages set this only after the action is confirmed */
.btn .ok { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .2s, stroke-dashoffset .5s var(--ease) .12s; }
.btn.is-done .ok { opacity: 1; stroke-dashoffset: 0; color: var(--orb-fg-h, var(--orb-fg)); }

/* variants */
.btn-dark {
  --bg: linear-gradient(180deg, #2d5134 0%, #1b3822 55%, #142b19 100%);
  --fg: #fff; --fg-h: var(--ink-green); --orb-fg: var(--ink-green); --orb-fg-h: var(--ink-green);
  --tone: 1; --ftone: 1; --glass-shadow: .45; --glass-core: .5;
  --bevel: inset 0 1px 0 #ffffff29, inset 0 -1.5px 0 #00000059;
  --lift: 0 1px 1.5px #13281a52, 0 12px 24px -14px #13281ad0;
  --bevel-press: inset 0 1.5px 3px #0000006b, inset 0 -.5px 0 #ffffff14;
  --lift-press: 0 1px 1px #13281a4d;
  --orb-css: radial-gradient(circle at 34% 30%, #f3f8e7 0, #bedf55 30%, #5fad46 100%);
}
.btn-light {
  --bg: linear-gradient(180deg, #ffffff 0%, #f4f8ee 60%, #e9f0e0 100%);
  --fg: var(--ink-green); --fg-h: var(--ink-green); --orb-fg: var(--ink-green); --orb-fg-h: var(--ink-green);
  --tone: 1; --ftone: 1; --glass-shadow: .3; --glass-core: .5;
  --bevel: inset 0 1px 0 #ffffff, inset 0 -1.5px 0 #b6c8a570;
  --lift: 0 1px 1.5px #0a1a0f55, 0 14px 26px -14px #0a1a0fc0;
  --bevel-press: inset 0 1.5px 3px #8ea57a73, inset 0 -.5px 0 #ffffff;
  --lift-press: 0 1px 1px #0a1a0f4d;
  --orb-css: radial-gradient(circle at 34% 30%, #f3f8e7 0, #bedf55 30%, #5fad46 100%);
}
.btn-secondary {
  --bg: transparent; --fg: var(--ink-green); --fg-h: #fff;
  --bevel: inset 0 0 0 1px var(--control-line); --lift: 0 0 0 0 transparent;
  --bevel-press: inset 0 0 0 1px var(--ink-green), inset 0 1.5px 3px #18321d2e; --lift-press: 0 0 0 0 transparent;
  --glass-shadow: .18;
}
.on-dark .btn-secondary { --fg: #fff; --fg-h: var(--ink-green); --orb-fg: var(--ink-green); --orb-fg-h: var(--ink-green); --orb-fg-h: var(--ink-green); --tone: 1; --ftone: 1; --glass-core: .5; --bevel: inset 0 0 0 1px #e5efdc66; --bevel-press: inset 0 0 0 1px #fff, inset 0 1.5px 3px #0000004d; --orb-css: radial-gradient(circle at 34% 30%, #f3f8e7 0, #bedf55 30%, #5fad46 100%); }
.btn-sm { --h: 46px; --o: 34px; padding-left: 20px; gap: 12px; font-size: .9375rem; }

/* icon button: the droplet alone, arrow 20 px */
.btn-icon { --h: 52px; --o: 52px; width: var(--h); padding: 0; justify-content: center; overflow: visible; background: none; box-shadow: none; --glass-shadow: 0; }
.btn-icon > canvas.glass { filter: drop-shadow(0 5px 6px #18321d45); }
.btn-icon:active, .btn-icon.is-press { box-shadow: none; }
.btn-icon .orb { width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); --o: calc(var(--h) - 6px); }
.btn-icon .orb svg { width: 20px; height: 20px; margin: -10px 0 0 -10px; stroke-width: 1.4; } /* 1.4 × 20/16 = 1.75 on screen */
.btn-icon.filled { color: inherit; }
.btn-icon:disabled, .btn-icon[aria-disabled="true"] { background: none; box-shadow: none; }
.btn-icon:disabled > canvas.glass, .btn-icon[aria-disabled="true"] > canvas.glass { filter: saturate(0) brightness(1.55) contrast(.55); }

/* ---------- arrows outside buttons (same drawing, same stroke) ---------- */
.ll-ic { flex: none; width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ll-ic.i20 { width: 20px; height: 20px; stroke-width: 1.4; }

/* ---------- text link: a liquid underline that ends in a droplet ---------- */
.link {
  --flow: var(--green);
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 500 1rem/1.2 var(--display); color: var(--ink-green); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.on-dark .link { --flow: var(--lime); color: #fff; }
.link .ul {
  position: relative; padding-bottom: 4px; margin-right: 6px;
  background: linear-gradient(90deg, var(--flow) 0 50%, currentColor 50% 100%) no-repeat 100% 100% / 200% 1px;
  transition: background-position .6s var(--ease), background-size .3s var(--ease);
}
.link .ul::after {  /* the droplet: hangs from the end of the line */
  content: ""; position: absolute; right: -5px; bottom: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffffffd9 0 22%, transparent 34%), currentColor;
  transform-origin: 50% 0; transition: transform .45s var(--ease) .12s, background-color .3s, color .3s .15s;
}
.link svg { transition: transform .5s var(--ease); }
@media (hover: hover) {
  .link:hover .ul { background-position: 0 100%; background-size: 200% 1.5px; }
  .link:hover .ul::after { color: var(--flow); transform: translateY(1px) scale(1.35, 1.5); }
  .link:hover svg.fwd { transform: translateX(3px); }
  .link:hover svg.down { transform: translateY(3px); }
  .link:hover svg.out { transform: translate(2px, -2px); }
}
.link.is-hover .ul { background-position: 0 100%; background-size: 200% 1.5px; }
.link.is-hover .ul::after { color: var(--flow); transform: translateY(1px) scale(1.35, 1.5); }
.link:active .ul::after { transform: translateY(2px) scale(1.1, 1.8); transition-delay: 0s; }
.link:focus-visible, .link.is-focus { outline: 3px solid var(--dark-green); outline-offset: 4px; border-radius: 6px; }
.on-dark .link:focus-visible, .on-dark .link.is-focus { outline-color: var(--pollen); }

/* ---------- tabs: a glass pill that stretches between choices ---------- */
.tabs { position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #ffffffb3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px #ffffff, 0 8px 20px -14px #244c2c80; }
.tabs::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink-green); transform: translateX(calc(var(--ti, 0) * 100%)); transition: transform .6s var(--ease); }
.tabs.gl::before { visibility: hidden; }
.tabs > canvas.glass { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.tabs button { min-height: 44px; padding: 8px 26px; border: 0; background: none; border-radius: 999px; cursor: pointer; font: 500 .9375rem var(--display); color: var(--ink-green); transition: color .25s; -webkit-tap-highlight-color: transparent; }
.tabs button[aria-selected="true"] { color: #fff; }
.tabs button:focus-visible { outline: 3px solid var(--dark-green); outline-offset: 2px; }

/* ---------- motion off ---------- */
.still .btn, .still .btn *, .still .link, .still .link *, .still .link .ul::after, .still .tabs::before { transition-duration: .001ms !important; transition-delay: 0s !important; animation: none !important; }
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn > canvas.glass, .btn::before { display: none; }
  .btn .orb { background: none; }
  .link .ul { background: none; text-decoration: underline; }
  .tabs button[aria-selected="true"] { outline: 2px solid Highlight; }
}