/* MyReach shared UI system.
   Shared structure and responsive controls. Keep MyReach colors, themes, copy
   and behavior. Admin-only refinements live in admin/ui-*.css. */

body[data-ui-experiment]{
  --ui-glass:rgba(255,255,255,.68);
  --ui-glass-strong:rgba(255,255,255,.84);
  --ui-border:rgba(23,23,23,.12);
  --ui-shadow:0 18px 50px rgba(23,23,23,.12);
  --ui-shadow-soft:0 8px 24px rgba(23,23,23,.08);
  --ui-radius-sm:12px;
  --ui-radius-md:16px;
  --ui-radius-lg:24px;
  --ui-motion:180ms;
  scrollbar-gutter:stable;
}

body[data-ui-experiment] :where(button,a,input,select,textarea){
  -webkit-tap-highlight-color:transparent;
}

body[data-ui-experiment] :where(button,a,input,select,textarea):focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent,#7C5CFF) 42%,transparent);
  outline-offset:3px;
}

body[data-ui-experiment] :where(button,a){
  transition:background var(--ui-motion) ease,border-color var(--ui-motion) ease,
    box-shadow var(--ui-motion) ease,transform var(--ui-motion) ease,color var(--ui-motion) ease;
}

body[data-ui-experiment] :where(input,select,textarea){
  min-height:44px;
  border-radius:var(--ui-radius-sm);
}

/* Shared glass headers and bars. */
body[data-ui-experiment] :where(header.site,.top,.top-in,.hdr,.admin-head){
  -webkit-backdrop-filter:blur(22px) saturate(1.18);
  backdrop-filter:blur(22px) saturate(1.18);
}

body[data-ui-experiment] :where(header.site,.top){
  box-shadow:0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(23,23,23,.06);
}

/* Public creator page: preserve each theme, add layered material and calmer
   grouped controls. */
body[data-ui-page="creator"] .hdr.scrolled{
  border-bottom:1px solid color-mix(in srgb,var(--hairline) 72%,transparent);
  box-shadow:0 12px 32px rgba(23,23,23,.12);
}

body[data-ui-page="creator"] :where(.card,.row-link,.tst-card){
  border-color:color-mix(in srgb,var(--hairline) 76%,transparent);
  box-shadow:var(--ui-shadow-soft);
}

body[data-ui-page="creator"] :where(.card,.row-link,.tst-card):hover{
  transform:translateY(-2px);
  box-shadow:var(--ui-shadow);
}

body[data-ui-page="creator"] :where(.soc,.hsoc,.cal-btn,.m-close){
  min-width:44px;
  min-height:44px;
  border-color:color-mix(in srgb,var(--hairline) 78%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
}

body[data-ui-page="creator"] :where(.overlay,.modal){
  -webkit-backdrop-filter:blur(12px) saturate(.9);
  backdrop-filter:blur(12px) saturate(.9);
}

body[data-ui-page="creator"] .panel{
  box-shadow:0 -18px 60px rgba(23,23,23,.2);
}

/* Admin: macOS-like rail, toolbar and grouped window panels. */
body[data-admin][data-ui-experiment]{
  /* Admin is a dark glass workspace in both browser color schemes. The
     previous light fallback leaked through the page gutters and inherited
     into modal text when the OS used light mode. */
  --bg:#0B0D12;
  --card:#151821;
  --ink:#F4F5F7;
  --muted:#AEB6C7;
  --hairline:#303646;
  background:
    radial-gradient(circle at 88% 0%,rgba(124,92,255,.16),transparent 32rem),
    radial-gradient(circle at 12% 100%,rgba(0,212,184,.07),transparent 28rem),
    var(--bg);
}

body[data-admin][data-ui-experiment] .side{
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2);
  background:linear-gradient(180deg,rgba(14,15,19,.9),rgba(14,15,19,.76));
  box-shadow:18px 0 60px rgba(0,0,0,.18);
}

body[data-admin][data-ui-experiment] .admin-head{
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(14,15,19,.9) 72%,rgba(14,15,19,0));
}

body[data-admin][data-ui-experiment] .admin-card{
  background:linear-gradient(145deg,rgba(22,24,31,.94),rgba(15,17,23,.88));
  border-color:rgba(255,255,255,.09);
  box-shadow:0 18px 55px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035);
}

body[data-admin][data-ui-experiment] .admin-card h2,
body[data-admin][data-ui-experiment] .admin-card h3,
body[data-admin][data-ui-experiment] .admin-card b,
body[data-admin][data-ui-experiment] .admin-card label{
  color:#F4F5F7;
}

body[data-admin][data-ui-experiment] .admin-card .hint,
body[data-admin][data-ui-experiment] .admin-card .section-intro,
body[data-admin][data-ui-experiment] .admin-card .empty-state,
body[data-admin][data-ui-experiment] .admin-card .stat-l,
body[data-admin][data-ui-experiment] .admin-card .setup-row small{
  color:#AEB6C7;
}

body[data-admin][data-ui-experiment] .home-stats-card .stat{
  color:#171717;
}

body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(1){
  color:#fff;
}

body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(1) .stat-n,
body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(1) .stat-l{
  color:#fff;
}

body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(2) .stat-l,
body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(3) .stat-l,
body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(4) .stat-l{
  color:#686865;
}

body[data-admin][data-ui-experiment] .activity-chart{
  overflow:hidden;
}

body[data-admin][data-ui-experiment] .activity-col small{
  color:#AEB6C7;
  font-size:9px;
}

body[data-admin][data-ui-experiment] .availability-row .availability-day b,
body[data-admin][data-ui-experiment] .week-row .week-date b{
  color:#171717!important;
}

body[data-admin][data-ui-experiment] .availability-row .availability-day small,
body[data-admin][data-ui-experiment] .week-row .week-date small{
  color:#686865!important;
}

body[data-admin][data-ui-experiment] :where(.card-item,.stat,.analytics-row,.provider-row,.plan-box){
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

body[data-admin][data-ui-experiment] :where(.side-pop,.admin-select-menu,.modal-box,.confirm-box,.booking-drawer){
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
}

body[data-admin][data-ui-experiment] :where(.btn,.icon-btn,.side-item,.side-profile){
  min-height:44px;
}

/* Auth and long-form pages: make the existing colors feel like grouped
   windows, sheets and system forms. */
body[data-ui-page="auth"] :where(.choice,.card-editor,.type-row,.kit-row,.auth,.dialog,.done-card,.providers a),
body[data-ui-page="course"] :where(.progress-card,.module,.doc-card),
body[data-ui-page="docs"] :where(.card,.ep,.tip,.search-results a),
body[data-ui-page="funnel"] :where(.card,.form-card,.success,.offer),
body[data-ui-page="legal"] main{
  border:1px solid var(--ui-border,#E7E5DF);
  box-shadow:var(--ui-shadow-soft);
}

body[data-ui-page="course"] :where(.top,.progress-card,.module,.doc-card),
body[data-ui-page="docs"] :where(.card,.ep,.tip),
body[data-ui-page="funnel"] :where(.card,.form-card,.offer),
body[data-ui-page="legal"] main{
  border-radius:var(--ui-radius-lg);
}
/* The docs top bar stays squared (no radius), by request. */
body[data-ui-page="docs"] header.site{border-radius:0}

body[data-ui-page="course"] .top,
body[data-ui-page="docs"] header.site,
body[data-ui-page="funnel"] .top{
  background:color-mix(in srgb,var(--paper,#fff) 78%,transparent);
}

body[data-ui-page="legal"] main{
  margin-top:clamp(18px,5vw,56px);
  padding:clamp(24px,5vw,52px);
  background:linear-gradient(145deg,color-mix(in srgb,var(--card,#16181f) 96%,transparent),var(--card,#16181f));
}

body[data-ui-page="legal"] .top{margin-bottom:36px}

/* iOS-like bottom sheets and touch layout. */
@media (max-width:620px){
  body[data-ui-experiment]{
    --ui-radius-lg:20px;
    --ui-shadow:0 16px 42px rgba(23,23,23,.16);
  }

  body[data-admin][data-ui-experiment]{
    padding:0 12px calc(92px + env(safe-area-inset-bottom));
  }

  body[data-admin][data-ui-experiment] .side{
    position:fixed;
    inset:auto 0 0;
    width:100%;
    height:calc(74px + env(safe-area-inset-bottom));
    margin:0;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:2px;
    overflow-x:auto;
    overflow-y:hidden;
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:0;
    border-right:0;
    z-index:100;
  }

  body[data-admin][data-ui-experiment] .side-brand{display:none}
  body[data-admin][data-ui-experiment] .side-item{
    flex:0 0 72px;
    min-height:58px;
    padding:8px 5px 6px;
    border-radius:14px;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    font-size:10px;
    text-align:center;
  }
  body[data-admin][data-ui-experiment] .side-item span{display:block}
  body[data-admin][data-ui-experiment] .side-item > span:first-of-type svg{width:21px;height:21px}
  body[data-admin][data-ui-experiment] .side-item[data-pane="settings"],
  body[data-admin][data-ui-experiment] .side-item[data-pane="growth"]{display:flex}
  body[data-admin][data-ui-experiment] .admin-head{padding-top:18px}
  body[data-admin][data-ui-experiment] .admin-card{border-radius:20px;padding:18px}

  body[data-admin][data-ui-experiment] .activity-chart{
    gap:2px;
    padding-inline:4px;
  }

  body[data-admin][data-ui-experiment] .activity-col small{
    font-size:6px;
    letter-spacing:-.02em;
  }

  body[data-ui-page="creator"] :where(.card,.row-link,.tst-card){border-radius:18px}
  body[data-ui-page="creator"] .panel,
  body[data-ui-page="auth"] .dialog,
  body[data-ui-page="funnel"] .modal > *,
  body[data-ui-page="course"] .sheet{
    border-radius:24px 24px 0 0;
  }

  body[data-ui-page="creator"] .panel,
  body[data-ui-page="auth"] .dialog{
    max-height:calc(100vh - env(safe-area-inset-top) - 10px);
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }

  body[data-ui-page="auth"] :where(.providers,.choices,.fields){grid-template-columns:1fr}
  body[data-ui-page="auth"] :where(.actions,.publish-row){flex-wrap:wrap}
  body[data-ui-page="auth"] :where(.actions button,.publish-row button,.publish-row a){min-height:46px;flex:1 1 150px}
  body[data-ui-page="legal"] main{margin:12px;padding:24px 18px 44px;border-radius:22px}
}

@media (prefers-color-scheme:dark){
  body[data-admin][data-ui-experiment]{
    --bg:#0B0D12;
    --card:#151821;
    --ink:#F4F5F7;
    --muted:#AEB6C7;
  }

  body[data-admin][data-ui-experiment] .admin-head{
    background:linear-gradient(180deg,rgba(11,13,18,.94) 72%,rgba(11,13,18,0));
  }

  body[data-admin][data-ui-experiment] .admin-head h1,
  body[data-admin][data-ui-experiment] .admin-sub{
    color:#F4F5F7;
  }

  body[data-admin][data-ui-experiment] .icon-action{
    background:#171A22;
    border-color:rgba(255,255,255,.12);
    color:#F4F5F7;
  }

  body[data-admin][data-ui-experiment] .activity-chart{
    background:linear-gradient(145deg,#171A22,#12151C);
    border:1px solid #2A3040;
  }

  body[data-admin][data-ui-experiment] .activity-col small{
    color:#AEB6C7;
  }

  body[data-admin][data-ui-experiment] :where(.availability-row,.week-row){
    background:#1A1E27;
    border-color:#303646;
    color:#F4F5F7;
  }

  body[data-admin][data-ui-experiment] .availability-row .availability-day b,
  body[data-admin][data-ui-experiment] .week-row .week-date b{
    color:#F4F5F7!important;
  }

  body[data-admin][data-ui-experiment] .availability-row .availability-day small,
  body[data-admin][data-ui-experiment] .week-row .week-date small{
    color:#AEB6C7!important;
  }

  body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(3),
  body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(4){
    background:#1A1E27;
    border-color:#303646;
    color:#F4F5F7;
  }

  body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(3) .stat-n,
  body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(4) .stat-n{
    color:#F4F5F7;
  }

  body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(3) .stat-l,
  body[data-admin][data-ui-experiment] .home-stats-card .stat:nth-child(4) .stat-l{
    color:#AEB6C7;
  }

  body[data-admin][data-ui-experiment] .mini-status:not(.ok){
    background:#202532;
    border-color:#303646;
    color:#AEB6C7;
  }
}

/* Second pass: shared system geometry. Inter is open source and already
   loaded by the shells; it gives controls the compact, neutral Apple-like
   rhythm without changing each creator theme's display face. */
body[data-ui-experiment]{
  --ui-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --ui-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --ui-control-radius:14px;
  --ui-card-radius:18px;
}

body[data-ui-experiment] :where(button,input,select,textarea){
  font-family:var(--ui-font);
}

body[data-admin][data-ui-experiment],
body[data-admin][data-ui-experiment] :where(button,input,select,textarea){
  font-family:var(--ui-font);
}

body[data-admin][data-ui-experiment] :where(.admin-head h1,.admin-card h2,.admin-card h3,.side-brand){
  font-family:var(--ui-display);
}

/* Creator pages keep their selected theme fonts, but share control rhythm. */
body[data-ui-page="creator"] :where(.hero-name,.hdr-brand,.card h2,.card h3,.tst h2,.m-head h3,.ok h3){
  font-family:var(--display-font,var(--ui-display));
}

body[data-ui-page="creator"] :where(.card,.row-link,.tst-card){
  border-radius:var(--card-radius,var(--ui-card-radius));
}

body[data-ui-page="creator"] :where(.cta,.btn-ghost,.slot,.cal-btn){
  min-height:44px;
  border-radius:var(--button-radius,var(--ui-control-radius));
  font-family:var(--ui-font);
}

body[data-ui-page="creator"] .sheet{
  gap:18px;
  padding-inline:clamp(16px,4vw,24px);
}

body[data-ui-page="creator"] .links{gap:12px}

body[data-ui-page="creator"] .more-pop{
  border-radius:18px;
  padding:7px;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  border-color:color-mix(in srgb,var(--hairline) 82%,transparent);
  box-shadow:0 24px 60px rgba(23,23,23,.22),inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  backdrop-filter:blur(24px) saturate(1.2);
}

body[data-ui-page="creator"] .more-item{
  min-height:42px;
  border-radius:12px;
  font-family:var(--ui-font);
}

body[data-ui-page="creator"] .lang-seg{
  padding:4px;
  border-radius:15px;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

body[data-ui-page="creator"] .lang-btn{
  min-width:36px;
  min-height:34px;
  border-radius:11px;
}

body[data-ui-page="creator"] .overlay{
  background:rgba(15,23,42,.42);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  backdrop-filter:blur(18px) saturate(1.05);
}

body[data-ui-page="creator"] .panel{
  border:1px solid color-mix(in srgb,var(--hairline) 82%,transparent);
  box-shadow:0 -24px 70px rgba(23,23,23,.24),inset 0 1px 0 rgba(255,255,255,.35);
}

body[data-ui-page="creator"] .m-head{
  padding-bottom:14px;
  border-bottom:1px solid color-mix(in srgb,var(--hairline) 76%,transparent);
}

body[data-ui-page="creator"] .m-close{
  min-width:44px;
  min-height:44px;
  border-radius:50%;
}

/* Auth, funnel, course, docs and legal controls use the same open-source
   type, touch size and sheet geometry. */
body[data-ui-page] :where(.pbtn,.magic,.primary,.next,.btn,.btn-acc,.btn-ghost,.ghost){
  min-height:46px;
  border-radius:var(--ui-control-radius);
  font-family:var(--ui-font);
}

body[data-ui-page] :where(.dialog,.done-card,.form-card,.offer,.progress-card,.module,.doc-card){
  border-radius:var(--ui-card-radius);
}

body[data-ui-page="auth"] :where(.pbtn,.magic,.primary){
  box-shadow:0 10px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.1);
}

body[data-ui-page="docs"] :where(.search input,.search-results a,.devtoggle),
body[data-ui-page="funnel"] :where(input,select,textarea),
body[data-ui-page="course"] :where(button,input,select,textarea){
  border-radius:var(--ui-control-radius);
}

@media (max-width:620px){
  body[data-ui-page="creator"] .panel::before,
  body[data-ui-page="auth"] .dialog::before,
  body[data-ui-page="funnel"] .modal > *::before,
  body[data-ui-page="course"] .sheet::before,
  body[data-admin][data-ui-experiment] .modal-box::before,
  body[data-admin][data-ui-experiment] .confirm-box::before,
  body[data-admin][data-ui-experiment] .booking-drawer-panel::before{
    content:"";
    display:block;
    width:36px;
    height:4px;
    margin:0 auto 14px;
    border-radius:999px;
    background:currentColor;
    opacity:.22;
  }
}


/* Docs dark theme — user choice. [data-theme="dark"] sits on <html>, set by the
   header toggle and persisted in localStorage ("mr-theme"); the OS preference
   is the initial default. Covers vars + every literal surface on the docs
   pages (help, ai-agents). */
html[data-theme="dark"] body[data-ui-page="docs"]{
  --bg:#0E0F13;--card:#16181F;--ink:#F4F5F7;--mut:#9BA0AE;--line:#2A2D38;
  color-scheme:dark;
}
html[data-theme="dark"] body[data-ui-page="docs"] header.site{background:rgba(14,15,19,.94)}
html[data-theme="dark"] body[data-ui-page="docs"] code:not(pre code){background:#232838;color:#E6E9F2}
html[data-theme="dark"] body[data-ui-page="docs"] :where(.ep p,.step p,.faq-item p){color:#B9BEC9}
html[data-theme="dark"] body[data-ui-page="docs"] .sidenav a:hover{background:#232838}
html[data-theme="dark"] body[data-ui-page="docs"] .auth{background:#232838}
html[data-theme="dark"] body[data-ui-page="docs"] .auth.sess{background:rgba(124,92,255,.22);color:#C7BCFF}
html[data-theme="dark"] body[data-ui-page="docs"] .m.get{color:#C9F27D}
html[data-theme="dark"] body[data-ui-page="docs"] .m.post{color:#B9AEFF}
html[data-theme="dark"] body[data-ui-page="docs"] .m.put{color:#7FD3E8}
html[data-theme="dark"] body[data-ui-page="docs"] .m.del{color:#FF9C96}
html[data-theme="dark"] body[data-ui-page="docs"] .devtoggle{background:#232838}
html[data-theme="dark"] body[data-ui-page="docs"] .devtoggle button[aria-pressed="true"]{background:#3D4457;color:#fff}

/* Theme toggle button (docs headers). */
.doc-theme{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .15s}
.doc-theme:hover{border-color:var(--acc)}
.doc-theme svg{width:18px;height:18px;display:block}
.doc-theme .i-moon{display:none}
html[data-theme="dark"] .doc-theme .i-moon{display:block}
html[data-theme="dark"] .doc-theme .i-sun{display:none}

/* Docs header logo — variant follows the theme (on-light ink / on-dark ink). */
body[data-ui-page="docs"] .logo img{display:block;width:auto;height:30px}
body[data-ui-page="docs"] .logo .logo-on-dark{display:none}
html[data-theme="dark"] body[data-ui-page="docs"] .logo .logo-on-light{display:none}
html[data-theme="dark"] body[data-ui-page="docs"] .logo .logo-on-dark{display:block}

/* Docs header floats over the hero: the dark band starts at the very top
   (--docs-hdr is set from JS to the real header height) and the bar is
   transparent until you scroll, then glass. */
body[data-ui-page="docs"] .hero{
  margin-top:calc(-1 * var(--docs-hdr,75px));
  padding-top:calc(clamp(44px,7vw,72px) + var(--docs-hdr,75px));
}
body[data-ui-page="docs"] header.site:not(.scrolled){background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-ui-page="docs"] header.site:not(.scrolled) .bar nav a{color:rgba(244,245,247,.78)}
body[data-ui-page="docs"] header.site:not(.scrolled) .bar nav a:hover{color:#fff}
body[data-ui-page="docs"] header.site:not(.scrolled) .doc-theme{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#F4F5F7}
body[data-ui-page="docs"] header.site:not(.scrolled) .logo-on-light{display:none}
body[data-ui-page="docs"] header.site:not(.scrolled) .logo-on-dark{display:block}
html[data-theme="dark"] body[data-ui-page="docs"] header.site:not(.scrolled){background:transparent}