/* Orli v2 · buttons: the printed sticker
   ---------------------------------------------------------------------------
   One family for every action on orli.health. A button rests on the page like
   a printed tag with a thin lip in its own darker tone (brand guide p.13, the
   Direction A "tag"). Point at it and it lifts up and to the left onto a hard
   ink shadow (the Orli Schools "pop", Direction B). Press it and it goes flat
   against the page: the lip disappears under it.

   Touch gets the press without the lift. Keyboard gets the lift on
   focus-visible and the press on Enter or Space (press.js adds .is-pressed so
   links behave like buttons). Reduced motion keeps colour, drops travel; still
   drops transitions too.

   Final tokens are the --o-* custom properties below. Nothing here needs JS.
   The Little lift loader is adapted from orli-schools-v1
   src/components/loading/orli-loading.css @ origin/staging.
   ------------------------------------------------------------------------- */

:root {
  /* surfaces and ink (Orli Schools) */
  --o-canvas: #fcfaf8;
  --o-surface: #ffffff;
  --o-warm: #f5f1eb;
  --o-warm-high: #e5dccc;
  --o-ink: #2f2e2b;
  --o-ink-2: #52525b;
  --o-n2: #dcd8ce;
  --o-n3: #b1aa9a;
  --o-action: #246649;
  --o-action-hover: #1c5239;
  --o-action-press: #17442f;
  --o-mint: #5cca99;
  --o-on-mint: #1f3d32;
  --o-focus: #1f3d32;
  --o-disabled-fill: #f5f1eb;
  --o-disabled-label: #8c877d;

  /* type */
  --o-font-ui: "Albert Sans", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --o-font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --o-font-hand: "Patrick Hand", "Comic Sans MS", cursive;

  /* motion */
  --o-ease: cubic-bezier(.22, 1, .32, 1);
  --o-settle: cubic-bezier(.34, 1.36, .64, 1);
  --o-t-interact: 160ms;     /* hover, focus, colour */
  --o-t-press: 90ms;         /* going down is quicker than coming up */
  --o-t-enter: 280ms;        /* a button arriving on the page */

  /* the printed sticker */
  --o-lift-x: -3px;
  --o-lift-y: -4px;
  --o-pop: 4px 5px 0 0 var(--o-ink);
  --o-lip: 3px;              /* resting tag lip; set 0 for the flat Schools look */
  --o-press-scale: .985;

  /* sizes */
  --o-btn-h-sm: 44px;
  --o-btn-h-md: 50px;
  --o-btn-h-lg: 56px;
  --o-focus-ring: 3px solid var(--o-focus);
  --o-focus-offset: 3px;
}

/* ---------------------------------------------------------------- base */
.o-btn {
  --fill: var(--o-surface);
  --label: var(--o-ink);
  --edge: var(--o-n2);
  --lip-colour: var(--o-n2);
  --fill-hover: var(--o-surface);
  --edge-hover: var(--o-ink);
  --label-hover: var(--label);
  --fill-press: var(--o-warm);
  --lip: var(--o-lip);
  --h: var(--o-btn-h-md);
  --px: 22px;
  --fs: 1.03125rem;          /* 16.5px */
  --gap: 9px;
  --icon: 22px;

  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap);
  min-height: var(--h); min-width: 44px; padding: 0 var(--px);
  margin: 0;
  border: 1.5px solid var(--edge); border-radius: 999px;
  background: var(--fill); color: var(--label);
  font: 650 var(--fs)/1.1 var(--o-font-ui); letter-spacing: -.005em;
  white-space: nowrap; text-decoration: none; text-align: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: 0 var(--lip) 0 0 var(--lip-colour);
  translate: 0 0; scale: 1;
  transition:
    translate var(--o-t-interact) var(--o-ease),
    scale var(--o-t-interact) var(--o-ease),
    box-shadow var(--o-t-interact) var(--o-ease),
    background-color var(--o-t-interact) var(--o-ease),
    border-color var(--o-t-interact) var(--o-ease),
    color var(--o-t-interact) var(--o-ease);
}
/* The lift moves the button up and left; this keeps the pointer inside it so a
   cursor on the bottom-right edge doesn't flicker between states. */
.o-btn::after { content: ""; position: absolute; inset: -2px -6px -7px -2px; border-radius: inherit; }
.o-btn:focus { outline: none; }

.o-btn__icon { width: var(--icon); height: var(--icon); flex: none; display: inline-grid; place-items: center; margin-inline-start: -4px; }
.o-btn__icon--end { margin-inline: 0 -5px; }
.o-btn__icon > svg, .o-btn__icon > img { width: 100%; height: 100%; overflow: visible; }

/* A Schools doodle drawn in currentColor through a mask (SchoolsDoodle.tsx).
   Set the image inline so the URL resolves against the page, not this file:
   <span class="o-doodle" style="mask-image:url(doodle.svg);-webkit-mask-image:url(doodle.svg)"></span> */
.o-doodle {
  display: inline-block; flex: none; width: var(--size, 24px); height: var(--size, 24px);
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ------------------------------------------------------------- variants */
.o-btn--primary {
  --fill: var(--o-action); --label: #fff; --edge: var(--o-action); --lip-colour: var(--o-action-press);
  --fill-hover: var(--o-action-hover); --edge-hover: var(--o-action-hover); --fill-press: var(--o-action-press);
}
.o-btn--secondary { /* the base: white tag, neutral lip, ink edge on hover */ }
.o-btn--tertiary {
  --fill: transparent; --edge: transparent; --lip: 0px; --label: var(--o-ink-2);
  --fill-hover: var(--o-surface); --label-hover: var(--o-ink); --fill-press: var(--o-warm);
  --px: 14px;
}
/* On a deep world wash or the action green */
.o-on-dark { --o-focus: #ffffff; }
.o-btn--on-dark {
  --fill: var(--o-mint); --label: var(--o-on-mint); --edge: var(--o-mint); --lip-colour: #3dba82;
  --fill-hover: #7fd8b0; --edge-hover: #7fd8b0; --fill-press: #3dba82;
  --o-pop: 4px 5px 0 0 #0f2418;
}

/* ---------------------------------------------------------------- sizes */
.o-btn--sm { --h: var(--o-btn-h-sm); --px: 16px; --fs: .9375rem; --gap: 7px; --icon: 20px; }
.o-btn--lg { --h: var(--o-btn-h-lg); --px: 28px; --fs: 1.125rem; --gap: 10px; --icon: 24px; }
.o-btn--block { display: flex; width: 100%; }

/* Round icon button: sound, motion, menu, close */
.o-icon-btn { --px: 0px; --icon: 26px; width: var(--h); min-width: var(--h); padding: 0; }
.o-icon-btn.o-btn--sm { --icon: 24px; }
.o-icon-btn .o-btn__icon { margin: 0; }

/* Nav pill: text at rest, a sticker when you point at it */
.o-nav-pill {
  --fill: transparent; --edge: transparent; --lip: 0px; --label: var(--o-ink);
  --fill-hover: var(--o-surface); --edge-hover: var(--o-ink); --fill-press: var(--o-warm);
  --h: 44px; --px: 14px; --fs: 1rem; --gap: 7px; --icon: 28px;
  padding-inline: 8px 14px; font-weight: 600;
}
.o-nav-pill .o-btn__icon { margin: 0; }
.o-nav-pill[aria-current="page"] { --fill: var(--o-warm); --edge: var(--o-warm-high); }

/* ------------------------------------------------------------------ states
   Hover only exists for a mouse or trackpad. .is-hover / .is-focus /
   .is-pressed pin a state for specimens and are set by press.js. */
@media (hover: hover) and (pointer: fine) {
  .o-btn:hover { background-color: var(--fill-hover); border-color: var(--edge-hover); color: var(--label-hover); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop); }
}
.o-btn.is-hover { background-color: var(--fill-hover); border-color: var(--edge-hover); color: var(--label-hover); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop); }

/* Keyboard: the same lift as hover, plus the ring. */
.o-btn:focus-visible, .o-btn.is-focus {
  background-color: var(--fill-hover); border-color: var(--edge-hover); color: var(--label-hover);
  translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop);
  outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset);
}

/* Press: flat on the page. Quicker down than up. */
.o-btn:active, .o-btn.is-pressed {
  background-color: var(--fill-press); border-color: var(--edge-hover);
  translate: 0 var(--lip); scale: var(--o-press-scale);
  box-shadow: 0 0 0 0 var(--lip-colour);
  transition-duration: var(--o-t-press);
}
.o-btn--primary:active, .o-btn--primary.is-pressed { border-color: var(--o-action-press); }

/* Toggle buttons (sound, motion menu open) */
.o-btn[aria-pressed="true"], .o-btn[aria-expanded="true"] { --fill: var(--o-warm); --edge: var(--o-ink); --fill-hover: var(--o-warm); }

/* Disabled: no lip, no lift, no press */
.o-btn:disabled, .o-btn[aria-disabled="true"] {
  --fill: var(--o-disabled-fill); --fill-hover: var(--o-disabled-fill); --fill-press: var(--o-disabled-fill);
  --edge: var(--o-disabled-fill); --edge-hover: var(--o-disabled-fill); --label: var(--o-disabled-label); --label-hover: var(--o-disabled-label);
  --lip: 0px; cursor: not-allowed;
}
.o-btn:disabled, .o-btn[aria-disabled="true"], .o-btn:disabled:hover, .o-btn[aria-disabled="true"]:hover,
.o-btn:disabled:active, .o-btn[aria-disabled="true"]:active, .o-btn[aria-disabled="true"].is-pressed {
  translate: none; scale: none; box-shadow: none;
}

/* Loading: warm and quiet, a Little lift Orli before the label. Set
   aria-busy="true" and aria-disabled="true"; keep the label meaningful. */
.o-btn[aria-busy="true"] {
  --fill: var(--o-warm); --fill-hover: var(--o-warm); --fill-press: var(--o-warm);
  --edge: var(--o-warm-high); --edge-hover: var(--o-warm-high); --lip-colour: var(--o-warm-high);
  --label: var(--o-ink-2); --label-hover: var(--o-ink-2);
  cursor: progress;
}
.o-btn[aria-busy="true"], .o-btn[aria-busy="true"]:hover, .o-btn[aria-busy="true"]:active, .o-btn[aria-busy="true"].is-pressed {
  translate: none; scale: none; box-shadow: 0 var(--lip) 0 0 var(--lip-colour);
}
.o-btn .o-lift { display: none; }
.o-btn[aria-busy="true"] .o-lift { display: inline-block; margin-inline-start: -6px; }
.o-btn[aria-busy="true"] .o-btn__icon { display: none; }

/* Done: a quiet confirmed state after a real success */
.o-btn[data-state="done"] { --fill: var(--o-surface); --fill-hover: var(--o-surface); --edge: var(--o-action); --edge-hover: var(--o-action); --label: var(--o-action); --label-hover: var(--o-action); --lip-colour: var(--o-action); }

/* ----------------------------------------------------------------- entrance */
.o-enter { animation: o-enter var(--o-t-enter) var(--o-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes o-enter { from { opacity: 0; translate: 0 8px; } }

/* ------------------------------------------------- Little lift (inline Orli) */
.o-lift { --lift-size: 30px; --lift-accent: #3e9a74; display: inline-block; width: var(--lift-size); height: calc(var(--lift-size) * .92857143); flex: none; vertical-align: middle; }
.o-lift__stage { position: relative; display: block; width: 100%; height: 100%; }
.o-lift__character { position: absolute; inset: 14.9% 21.43% 19.87% 17.86%; animation: o-lift-y 2400ms ease-in-out 200ms infinite, o-lift-shape 2400ms ease-in-out 200ms infinite; }
.o-lift__character img { display: block; width: 100%; height: 100%; object-fit: contain; }
.o-lift__ground { position: absolute; left: 29.0179%; top: 81.25%; width: 40.1786%; height: 4.8077%; border-radius: 50%; background: var(--lift-accent); opacity: .16; animation: o-lift-shadow 2400ms ease-in-out 200ms infinite; }
.o-lift__dot { position: absolute; left: 80.8036%; top: 62.5%; width: 7.1429%; aspect-ratio: 1; border-radius: 50%; background: var(--lift-accent); animation: o-lift-dot-y 2400ms ease-in-out 200ms infinite, o-lift-dot-scale 2400ms ease-in-out 200ms infinite; }
@keyframes o-lift-y {
  0%, 37.5%, 54.16%, 100% { translate: 0 0; }
  8.34% { translate: 0 calc(var(--lift-size) * .01785714); }
  22.92% { translate: 0 calc(var(--lift-size) * -.07142857); }
  45% { translate: 0 calc(var(--lift-size) * .00714286); }
}
@keyframes o-lift-shape {
  0%, 54.16%, 100% { rotate: 0deg; scale: 1 1; }
  8.34% { rotate: 2deg; scale: 1.045 .96; }
  22.92% { rotate: -3deg; scale: .97 1.035; }
  37.5% { rotate: 1deg; scale: 1.04 .97; }
}
@keyframes o-lift-shadow { 0%, 54.16%, 100% { scale: 1 1; } 8.34% { scale: 1.05 1; } 22.92% { scale: .7 1; } 37.5% { scale: 1.07 1; } }
@keyframes o-lift-dot-y { 0%, 10.42%, 42.5%, 59.16%, 100% { translate: 0 0; } 25.84% { translate: 0 calc(var(--lift-size) * -.09285714); } 51.26% { translate: 0 calc(var(--lift-size) * -.02142857); } }
@keyframes o-lift-dot-scale { 0%, 59.16%, 100% { scale: 1; } 25.84% { scale: .85; } 42.5% { scale: 1.1; } }

/* ------------------------------------------------------------ motion levels */
html[data-motion="reduced"] .o-btn, html[data-motion="still"] .o-btn { translate: none !important; scale: none !important; }
html[data-motion="reduced"] .o-btn:is(:hover, .is-hover, :focus-visible, .is-focus),
html[data-motion="still"] .o-btn:is(:hover, .is-hover, :focus-visible, .is-focus) { box-shadow: 0 var(--lip) 0 0 var(--lip-colour); }
html[data-motion="reduced"] .o-btn:is(:active, .is-pressed),
html[data-motion="still"] .o-btn:is(:active, .is-pressed) { box-shadow: 0 var(--lip) 0 0 var(--lip-colour); }
html[data-motion="still"] .o-btn { transition: none !important; }
html[data-motion="reduced"] .o-enter { animation-name: o-fade; }
html[data-motion="still"] .o-enter { animation: none; }
html[data-motion="reduced"] .o-lift *, html[data-motion="still"] .o-lift * { animation: none !important; }
@keyframes o-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .o-btn { translate: none !important; scale: none !important; }
  html:not([data-motion]) .o-btn:is(:hover, :focus-visible, :active) { box-shadow: 0 var(--lip) 0 0 var(--lip-colour); }
  html:not([data-motion]) .o-lift * { animation: none !important; }
  html:not([data-motion]) .o-enter { animation-name: o-fade; }
}

/* ------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .o-btn { border-color: ButtonText; box-shadow: none !important; }
  .o-btn:focus-visible { outline: 3px solid Highlight; }
  .o-btn:disabled, .o-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
  .o-doodle { background-color: CanvasText; }
}

/* ------------------------------------------------- Free trial (free-trial.js) */
.o-trial { isolation: isolate; }
.o-trial__window { position: absolute; pointer-events: none; display: block; }
.o-trial__orli { position: absolute; left: 0; top: 0; display: block; width: 100%; will-change: transform; }
.o-trial__squash { display: block; transform-origin: 50% 92%; }
.o-trial__art { display: block; width: 100%; height: auto; overflow: visible; }
.o-trial__eyes { transform-box: fill-box; transform-origin: 50% 50%; }

/* Peek: a window above the pill's top edge; Orla stands behind the edge.
   The window is her height plus 8px, so the spring's overshoot is never clipped.
   At rest she shows about two thirds of herself: eyes, smile, a hint of blush. */
.o-trial__window--peek { left: 50%; bottom: calc(100% - 1px); width: 48px; height: 48px; margin-left: -24px; overflow: hidden; z-index: -1; }
.o-trial__window--peek .o-trial__orli { width: 40px; left: 4px; top: 8px; }
.o-btn--sm .o-trial__window--peek { width: 40px; height: 40px; margin-left: -20px; }
.o-btn--sm .o-trial__window--peek .o-trial__orli { width: 32px; }

/* Pocket: a felt pocket at the start of the pill; Orla sits low in it. */
.o-trial--pocket { padding-inline-start: 7px; }
.o-btn--lg.o-trial--pocket { padding-inline-start: 9px; }
.o-trial__window--pocket {
  position: relative; flex: none; width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; overflow: hidden;
  background: #c4f0dd;
  box-shadow: inset 0 2px 0 rgb(17 50 35 / .22), inset 0 -1px 0 rgb(255 255 255 / .5);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: clip the round window during transforms */
}
.o-trial__window--pocket .o-trial__orli { width: 92%; left: 4%; }
.o-trial--pocket .o-btn__icon { display: none; }
.o-btn[aria-busy="true"].o-trial--pocket .o-trial__window { display: none; }

/* Felt bits for a real success (celebrate) */
.o-felt-bit {
  position: fixed; z-index: 200; pointer-events: none; border-radius: 50% 46% 52% 44%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 82%, #2f2e2b));
  box-shadow: 0 1px 1px rgb(47 46 43 / .18);
}

/* Keyboard focus on the trial button: the ring is drawn as a box-shadow so it
   sits under Orla. An outline would paint over her and hide her eyes. */
html .o-btn.o-trial:is(:focus-visible, .is-focus) {
  outline: none;
  box-shadow: 0 0 0 var(--o-focus-offset) var(--o-ring-gap, var(--o-canvas)), 0 0 0 calc(var(--o-focus-offset) + 3px) var(--o-focus);
}
@media (forced-colors: active) { html .o-btn.o-trial:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; } }