/* ===========================================================================
   Practice OS brand style guide.

   Shared by the Practice OS landing (/practice-os) and every provider platform
   page (/jack-zamora-md, and the providers after him). Load it once per page;
   do NOT re-declare these rules in a page's inline <style>, or the two drift
   and every brand change has to be made twice.

   Brand values are CSS custom properties. A provider page keeps the shared
   components and carries its own palette by overriding the variables in its own
   :root block, so a change to a component here reaches every page, while a
   provider's colours stay theirs.

   Tokens are prefixed --pos- so they cannot collide with Tailwind or a page.
   =========================================================================== */

:root {
  /* Palette: Practice OS default (clinical luxury).

     Colours used with Tailwind opacity modifiers (bg-teal/15, border-ink/25, ...) are
     ALSO published as space-separated RGB triplets, because Tailwind composes those as
     rgb(<triplet> / <alpha>). A plain hex or rgba() var silently breaks every modifier,
     so keep the pair in sync. */
  --pos-ink-rgb:    28 24 20;
  --pos-teal-rgb:   12 125 123;
  --pos-teal-bright-rgb: 17 168 166;
  --pos-blush-rgb:  231 198 182;
  --pos-cream-rgb:  255 253 250;
  --pos-ivory-rgb:  250 246 241;
  --pos-gold-rgb:   176 138 94;

  --pos-ink:        #1c1814;
  --pos-cream:      #fffdfa;
  --pos-ivory:      #faf6f1;
  --pos-line:       rgba(28, 24, 20, 0.10);
  --pos-mute:       rgba(28, 24, 20, 0.68);
  /* Two teals: --pos-teal is the TEXT/UI teal and must pass 4.5:1 on light; --pos-teal-bright
     is decorative only (fills, orbs, dark sections). Kickers and the focus ring use --pos-teal;
     never put --pos-teal-bright on small text on a light surface. */
  --pos-teal:        #0c7d7b;
  --pos-teal-bright: #11a8a6;
  --pos-blush:      #e7c6b6;
  --pos-blush-soft: #f5e8e0;
  --pos-gold:       #b08a5e;

  /* Selection + focus derive from the brand, so a palette override carries. */
  --pos-select:     rgba(12, 125, 123, 0.18);

  /* Type scale. Change here, changes on every Practice OS page. */
  --pos-kicker-size:    0.68rem;
  --pos-kicker-size-sm: 0.725rem;
  --pos-kicker-size-xs: 0.55rem;
  --pos-kicker-track:   0.26em;

  /* Motion. */
  --pos-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* The agent orb gradient. One definition, used by the full orb and the small
     badge mark, so an agent looks like the same entity at every size. */
  --pos-orb-gradient:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0) 26%),
    radial-gradient(circle at 30% 34%, #99d2ff, rgba(153,210,255,0) 56%),
    radial-gradient(circle at 69% 68%, #245d3a, rgba(36,93,58,0) 42%),
    radial-gradient(circle at 56% 75%, #c7e79b, rgba(199,231,155,0) 38%),
    linear-gradient(145deg, #c2e6f2 0%, #85bde6 30%, #7fc6cf 48%, #2f653e 80%, #1e4832 100%);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pos-select); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pos-teal);
  outline-offset: 3px;
}

/* --- Type ---------------------------------------------------------------- */

.kicker {
  font-family: "Lato", sans-serif;
  letter-spacing: var(--pos-kicker-track);
  text-transform: uppercase;
  font-size: var(--pos-kicker-size);
  font-weight: 600;
}
.kicker-sm { font-size: var(--pos-kicker-size-sm); }
.kicker-xs { font-size: var(--pos-kicker-size-xs); }

.h-display {
  font-family: "Tenor Sans", serif;
  letter-spacing: 0.01em;
  line-height: 1.08;
}

/* --- Icons --------------------------------------------------------------- */

/* One icon style for every Practice OS page: thin stroke, round caps, currentColor,
   optically aligned to the cap height of the label beside it.
   Usage:  <svg class="pos-icon" viewBox="0 0 16 16" aria-hidden="true"> ... </svg>
   The icon never carries meaning on its own, so it is always aria-hidden and always
   sits beside a text label. Size with .pos-icon-sm / -lg rather than ad hoc classes. */
.pos-icon {
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pos-icon-sm { width: 0.8rem;  height: 0.8rem; stroke-width: 1.75; }
.pos-icon-lg { width: 1.35rem; height: 1.35rem; stroke-width: 1.35; }

/* A kicker with an icon in front of it. Keeps the gap and the baseline consistent
   wherever the pattern is used. */
.kicker-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

/* --- Buttons ------------------------------------------------------------- */

.btn-teal {
  background: var(--pos-teal);
  color: var(--pos-cream);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-teal:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px rgba(12, 125, 123, .5);
}

/* Secondary CTA: reads clearly without competing with the teal primary. */
.btn-blush {
  background: var(--pos-blush);
  color: var(--pos-ink);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-blush:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px rgba(176, 138, 94, .45);
}

.btn-ghost { transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.btn-ghost:hover { background: rgba(28, 24, 20, .04); transform: translateY(-2px); }

/* --- Surfaces ------------------------------------------------------------ */

.tile { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .38); }

.softshadow { box-shadow: 0 1px 0 rgba(28,24,20,0.03), 0 30px 60px -34px rgba(28,24,20,0.22); }
.ring-line  { box-shadow: inset 0 0 0 1px rgba(28,24,20,0.08); }

/* --- Agent signatures ---------------------------------------------------- */

/* The live dot and the orb are how an agent reads as present and working. */
@keyframes pos-pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.live-dot { animation: pos-pulse-dot 1.6s ease-in-out infinite; }

@keyframes pos-orb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--pos-teal-bright-rgb) / .55); }
  70%      { box-shadow: 0 0 0 9px rgb(var(--pos-teal-bright-rgb) / 0); }
}
.orb { animation: pos-orb-pulse 2.4s ease-out infinite; }

/* --- Agent orb ----------------------------------------------------------- */

/* The voice agent's signature, ported from the Hello hero demo (hello_marketing
   public_html/scratch/cro/hello_hero_demo_v6), minus the demo's dropdowns and
   workflow pickers: here it is an illustration, not a control.

   Deliberately NOT re-tinted per provider. The orb is the agent's identity across
   Practice OS, the way the live dot is; a practice's palette dresses the page around
   it. Sizing is driven by --pos-orb-size so a page can scale it without a fork. */
.agent-orb {
  --pos-orb-size: 200px;
  position: relative;
  width: var(--pos-orb-size);
  height: var(--pos-orb-size);
  display: grid;
  place-items: center;
  flex: none;
}
.agent-orb-core {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pos-orb-gradient);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.24), 0 22px 44px rgba(18,18,18,0.11);
}
.agent-orb-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  animation: pos-orb-ring 2.8s ease-in-out infinite;
}
.agent-orb-ring-b { inset: 19%; animation-duration: 2.1s; animation-direction: reverse; opacity: .7; }
@keyframes pos-orb-ring {
  0%, 100% { transform: scale(.98); opacity: .55; }
  50%      { transform: scale(1.035); opacity: 1; }
}

/* The bars are the agent speaking. */
.agent-orb-bars {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 40px;
}
.agent-orb-bars i {
  display: block;
  width: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 0 16px rgba(255,255,255,.18);
  transform-origin: bottom;
  animation: pos-orb-talk 1.15s ease-in-out infinite;
}
.agent-orb-bars i:nth-child(1) { height: 12px; animation-delay: .05s; }
.agent-orb-bars i:nth-child(2) { height: 23px; animation-delay: .16s; }
.agent-orb-bars i:nth-child(3) { height: 31px; animation-delay: .08s; }
.agent-orb-bars i:nth-child(4) { height: 20px; animation-delay: .20s; }
.agent-orb-bars i:nth-child(5) { height: 13px; animation-delay: .11s; }
@keyframes pos-orb-talk {
  0%, 100% { transform: scaleY(.55); opacity: .7; }
  50%      { transform: scaleY(1.18); opacity: 1; }
}

.agent-orb-badge {
  position: absolute;
  bottom: 8%;
  width: 21%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  color: #fff;
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.2);
}

/* The orb at badge size: the AI cue wherever an agent is listed beside its name.
   No human on the page has one, which is the point: the name says colleague, the orb
   says AI, and neither is hidden. Rings and bars are dropped here because they do not
   read below ~40px; the gradient alone still reads as the same entity. */
.orb-mark {
  border-radius: 50%;
  background: var(--pos-orb-gradient);
  box-shadow: inset 0 0 6px rgba(255,255,255,0.3), 0 2px 6px rgba(18,18,18,0.14);
  flex: none;
}

/* --- Team flip ----------------------------------------------------------- */

/* The person on the front, the team they gain on the back. Each card carries
   its own inline animation-delay so the grid never flips in unison. */
.flip { perspective: 1200px; }
/* Both faces occupy the SAME grid cell, so the card sizes to the TALLER of the two.
   Absolute-positioning the back (the old approach) sized the card to the front only, so a
   short front (an icon + label) clipped a tall back (the agent list). Grid-stack fixes it
   on every card regardless of which face is taller. */
.flip-inner {
  display: grid;
  transform-style: preserve-3d;
  animation: pos-flip-cycle 13s ease-in-out infinite;
}
@keyframes pos-flip-cycle {
  0%, 38%  { transform: rotateY(0deg); }
  50%, 88% { transform: rotateY(180deg); }
  100%     { transform: rotateY(360deg); }
}
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip:hover .flip-inner { animation-play-state: paused; }

/* --- Split screen -------------------------------------------------------- */

/* Messages sit in the DOM and are revealed in order by the page script. */
.msg { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.msg.in { opacity: 1; transform: none; }

/* --- Reveal on scroll ---------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--pos-ease), transform .7s var(--pos-ease);
}
.reveal.in { opacity: 1; transform: none; }

/* --- Motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .tile:hover, .btn-teal:hover, .btn-blush:hover, .btn-ghost:hover { transform: none; }
  .live-dot, .orb, .agent-orb-ring, .agent-orb-bars i { animation: none; }
  .msg { opacity: 1; transform: none; transition: none; }

  /* Do not just freeze the flip: that leaves the card face-up with the back (the agents
     each person gains) unreachable by any means. Stack both faces in flow so nothing is
     lost (block, not the grid-stack overlap used for the animation). */
  .flip-inner { display: block; animation: none; transform: none; }
  .flip-face { -webkit-backface-visibility: visible; backface-visibility: visible; }
  .flip-back { transform: none; border-top: 1px solid var(--pos-line); }

  /* Tailwind's .scroll-smooth on <html> outranks a bare html rule inside the query. */
  html, html.scroll-smooth { scroll-behavior: auto !important; }
}