/* =====================================================================
   Browns Digital — Refine layer (Studio + Staff)
   Builds on the existing light-glass look: same brand blue, floating
   pill bar and glass sidebar. Adds depth to components, one motion
   language, and touch-safe states. Loads last. Identical copy in
   studio.brownsdigital.org and staff.brownsdigital.org: keep in sync.
===================================================================== */

:root{
  --rf-ease:cubic-bezier(.22,1,.36,1);       /* entrances, hovers */
  --rf-ease-press:cubic-bezier(.3,0,.5,1);   /* presses */
  --rf-fast:140ms; --rf-mid:240ms; --rf-slow:420ms;
  --rf-brand:#355cff; --rf-brand-2:#5b7bff; --rf-brand-deep:#2443d6;
  --rf-ink:#1d1d1f; --rf-ink-2:#55555c; --rf-ink-3:#76767d;
  --rf-line:rgba(15,23,42,.08); --rf-line-2:rgba(15,23,42,.13);
  --rf-card:rgba(255,255,255,.78);
  --rf-card-hi:rgba(255,255,255,.92);
  --rf-lift:0 1px 1px rgba(15,23,42,.03),0 2px 6px rgba(15,23,42,.04),0 12px 28px -8px rgba(15,23,42,.10);
  --rf-lift-hi:0 1px 1px rgba(15,23,42,.04),0 6px 14px rgba(15,23,42,.06),0 22px 44px -12px rgba(15,23,42,.18);
  --rf-ring:0 0 0 3px rgba(53,92,255,.22);
}
html[data-theme="dark"],html[data-bd-theme*="dark"]{
  --rf-ink:#f5f5f7; --rf-ink-2:#b4b4bb; --rf-ink-3:#8e8e95;
  --rf-line:rgba(255,255,255,.08); --rf-line-2:rgba(255,255,255,.14);
  --rf-card:rgba(28,28,30,.66); --rf-card-hi:rgba(36,36,40,.8);
  --rf-lift:0 0 0 1px rgba(255,255,255,.04),0 12px 28px -8px rgba(0,0,0,.5);
  --rf-lift-hi:0 0 0 1px rgba(255,255,255,.06),0 22px 44px -12px rgba(0,0,0,.65);
  --rf-ring:0 0 0 3px rgba(91,140,255,.32);
}

/* ---------- Buttons: real depth, tactile press ---------- */
#view-app .btn,#modal-veil .btn{
  position:relative;
  transition:transform var(--rf-fast) var(--rf-ease-press),box-shadow var(--rf-mid) var(--rf-ease),background-color var(--rf-fast) ease,border-color var(--rf-fast) ease,color var(--rf-fast) ease !important;
}
#view-app .btn:active:not(:disabled),#modal-veil .btn:active:not(:disabled){transform:scale(.97) !important}
#view-app :is(.btn-brand,.btn-cta,.btn-primary),
#modal-veil :is(.btn-brand,.btn-cta,.btn-primary,.ns-btn-solid),
#view-onboard .ob-sheet-cta--solid{
  background:linear-gradient(180deg,var(--rf-brand-2),var(--rf-brand) 55%,var(--rf-brand-deep)) !important;
  border-color:transparent !important;color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(36,67,214,.3),0 6px 16px -4px rgba(53,92,255,.45) !important;
}
#view-onboard.ob-on-welcome .ob-welcome-cta{
  background:#355cff !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  filter:none !important;
}
#view-app :is(.btn-brand,.btn-cta,.btn-primary):hover:not(:disabled),
#modal-veil :is(.btn-brand,.btn-cta,.btn-primary,.ns-btn-solid):hover:not(:disabled),
#view-onboard .ob-sheet-cta--solid:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12),0 2px 4px rgba(36,67,214,.3),0 12px 24px -6px rgba(53,92,255,.55) !important;
  filter:saturate(1.08) brightness(1.03);
}
#view-onboard.ob-on-welcome .ob-welcome-cta:hover{
  background:#2f53e6 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
#view-app :is(.btn-ghost,.btn-dark):not(.btn-brand),
#modal-veil :is(.btn-ghost,.ns-btn-ghost){
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,248,250,.92)) !important;
  border:1px solid var(--rf-line-2) !important;color:var(--rf-ink) !important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06) !important;
}
html[data-theme="dark"] #view-app :is(.btn-ghost,.btn-dark):not(.btn-brand),
html[data-theme="dark"] #modal-veil :is(.btn-ghost,.ns-btn-ghost){
  background:linear-gradient(180deg,rgba(58,58,62,.9),rgba(44,44,48,.9)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.4) !important;
}
#view-app :is(.btn-ghost,.btn-dark):not(.btn-brand):hover,
#modal-veil :is(.btn-ghost,.ns-btn-ghost):hover{border-color:rgba(15,23,42,.22) !important}
#view-app .btn:focus-visible,#modal-veil .btn:focus-visible{outline:none !important;box-shadow:var(--rf-ring) !important}

/* ---------- Cards and tiles: crisper glass, gentle lift ---------- */
#view-app .page :is(.card,.console-panel,.dash-stat,.settings-card,.site-card,.health-hero,.health-findings){
  border-color:var(--rf-line) !important;
  box-shadow:var(--rf-lift) !important;
  transition:transform var(--rf-mid) var(--rf-ease),box-shadow var(--rf-mid) var(--rf-ease),border-color var(--rf-mid) ease !important;
}
@media (hover:hover){
  #view-app .page :is(.dash-stat,.site-card,button.staff-dash-stat):hover{
    transform:translateY(-2px) !important;box-shadow:var(--rf-lift-hi) !important;border-color:var(--rf-line-2) !important;
  }
}
#view-app .dash-stat-n{
  font-size:28px !important;font-weight:650 !important;letter-spacing:-.035em !important;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--rf-ink),color-mix(in srgb,var(--rf-ink) 72%,var(--rf-brand)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#view-app :is(.dash-stat-ico,.dash-stat-top > .ic){
  background:linear-gradient(180deg,#fff,#f2f4f8) !important;
  box-shadow:inset 0 0 0 1px var(--rf-line),0 1px 2px rgba(15,23,42,.05) !important;
  color:var(--rf-brand) !important;border-radius:8px !important;
}
html[data-theme="dark"] #view-app :is(.dash-stat-ico,.dash-stat-top > .ic){background:linear-gradient(180deg,#2c2c30,#232327) !important}

/* ---------- Sidebar nav: brand-tinted active pill with indicator ---------- */
#view-app .side-nav > button{position:relative;transition:background-color var(--rf-fast) ease,color var(--rf-fast) ease,transform var(--rf-fast) var(--rf-ease-press) !important}
#view-app .side-nav > button:active{transform:scale(.985)}
#view-app .side-nav > button.on{
  background:linear-gradient(180deg,rgba(53,92,255,.13),rgba(53,92,255,.08)) !important;
  color:var(--rf-brand-deep) !important;font-weight:600 !important;
  box-shadow:inset 0 0 0 1px rgba(53,92,255,.14) !important;
}
html[data-theme="dark"] #view-app .side-nav > button.on{color:#a8bcff !important;background:rgba(91,140,255,.16) !important}
#view-app .side-nav > button.on svg{color:currentColor !important;stroke:currentColor !important}
#view-app .side-nav > button.on::before{
  content:"";position:absolute;left:-6px;top:50%;width:3px;height:16px;border-radius:3px;
  background:var(--rf-brand);transform:translateY(-50%);
  animation:rfBar var(--rf-mid) var(--rf-ease) both;
}
@keyframes rfBar{from{height:0;opacity:0}to{height:16px;opacity:1}}

/* ---------- Floating pill bar: deeper glass ---------- */
#view-app .page > .pill-notch,#view-app .page > .topbar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,23,42,.04),0 10px 30px -10px rgba(15,23,42,.18) !important;
  -webkit-backdrop-filter:blur(28px) saturate(190%) !important;backdrop-filter:blur(28px) saturate(190%) !important;
}
#view-app .search-pill{transition:background-color var(--rf-fast) ease,box-shadow var(--rf-mid) var(--rf-ease) !important}
#view-app .search-pill:hover{box-shadow:inset 0 0 0 1px var(--rf-line-2) !important}

/* ---------- Inputs: inset field, brand focus ---------- */
#view-app :is(.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,.settings-input),
#modal-veil :is(.field input:not([type=checkbox]):not([type=radio]),.field textarea){
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05) !important;
  transition:border-color var(--rf-fast) ease,box-shadow var(--rf-mid) var(--rf-ease),background-color var(--rf-fast) ease !important;
}
#view-app :is(.field input,.field select,.field textarea,.settings-input):focus,
#modal-veil :is(.field input,.field textarea):focus{
  border-color:var(--rf-brand) !important;box-shadow:var(--rf-ring) !important;outline:none !important;
}

/* ---------- Segmented controls: elevated thumb ---------- */
#view-app :is(.tabs,.seg,.settings-nav-track,.health-find-filter) > :is(button,.settings-tab).on,
#view-app .settings-tab.on{
  box-shadow:0 1px 2px rgba(15,23,42,.1),0 2px 6px -1px rgba(15,23,42,.08),inset 0 0 0 .5px rgba(15,23,42,.06) !important;
  transition:background-color var(--rf-mid) var(--rf-ease),box-shadow var(--rf-mid) var(--rf-ease) !important;
}

/* ---------- Badges: crisp status dots ---------- */
#view-app :is(.badge.live,.plan-status.active)::before,
#view-app .live-chip.on .dot{box-shadow:0 0 0 3px rgba(34,197,94,.18)}

/* ---------- Motion language ---------- */
@keyframes rfRise{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes rfPop{from{opacity:0;transform:scale(.96) translate3d(0,6px,0)}to{opacity:1;transform:none}}
@keyframes rfSheen{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes rfRing{0%{stroke-dashoffset:var(--len)}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){
  /* Page content enters in a short stagger on every navigation */
  #view-app .page > :not(.pill-notch):not(.topbar),
  #view-app .page > .page-host > *{animation:rfRise var(--rf-slow) var(--rf-ease) both}
  #view-app .page > :nth-child(3),#view-app .page > .page-host > :nth-child(2){animation-delay:40ms}
  #view-app .page > :nth-child(4),#view-app .page > .page-host > :nth-child(3){animation-delay:80ms}
  #view-app .page > :nth-child(n+5),#view-app .page > .page-host > :nth-child(n+4){animation-delay:120ms}
  /* Stat tiles cascade */
  #view-app .dash-stats > *{animation:rfRise var(--rf-slow) var(--rf-ease) both}
  #view-app .dash-stats > :nth-child(2){animation-delay:50ms}
  #view-app .dash-stats > :nth-child(3){animation-delay:100ms}
  #view-app .dash-stats > :nth-child(4){animation-delay:150ms}
  #view-app .dash-stats > :nth-child(n+5){animation-delay:200ms}
  /* Floating layers */
  #modal-veil .modal,#cmdk-veil .cmdk{animation:rfPop var(--rf-slow) var(--rf-ease) both}
  #view-app :is(.user-menu,.bell-menu,.site-menu):not([hidden]),#popover-root > div:not([hidden]){animation:rfPop var(--rf-mid) var(--rf-ease) both;transform-origin:top left}
  #toast:not([hidden]){animation:rfPop var(--rf-mid) var(--rf-ease) both}
  /* Skeletons shimmer */
  #view-app :is(.skeleton,.sk,.is-skeleton,[aria-busy="true"] .sk-line){
    background:linear-gradient(90deg,rgba(15,23,42,.05) 25%,rgba(15,23,42,.1) 37%,rgba(15,23,42,.05) 63%) !important;
    background-size:200% 100% !important;animation:rfSheen 1.4s ease-in-out infinite !important;
  }
}
@media (prefers-reduced-motion:reduce){
  #view-app *,#modal-veil *,#view-onboard *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- Signature: the ring mark draws itself on welcome ---------- */
@media (prefers-reduced-motion:no-preference){
  #view-onboard .ob-split-logo{transition:transform var(--rf-slow) var(--rf-ease)}
}

/* ---------- Touch: no hover-lift jank, bigger targets ---------- */
@media (hover:none){
  #view-app .side-nav > button,#view-app .side-ext{min-height:44px !important}
  #view-app .icon-btn,#view-app .pill-hit{min-width:40px !important;min-height:40px !important}
}