/* =============================================================================
 *  Liquid glass: the CONTROL layer of MedBase as a translucent material.
 *
 *  Loaded after app.css on every page. It changes how things look, never where
 *  they are or what they do, and it can be removed by deleting one <link>.
 *
 *  What is glass and what is not (the materials rule: glass is for the layer
 *  you steer with, not the layer you read):
 *    - glass: the tab strip and the desktop rail, the language / theme / range
 *      switches, the masthead's chips and links, secondary buttons, date and
 *      time chips on the booking page, tooltips;
 *    - solid: cards, notes, tables, forms, anything clinical or financial. A
 *      figure is never read through a blur.
 *  The page gets a soft, fixed wash of the brand's teal and navy for the glass
 *  to catch; it is pale enough that ink keeps its measured contrast.
 *
 *  Honoured, in this order: prefers-reduced-transparency (solid, no blur),
 *  prefers-contrast: more (solid with a hard edge), forced-colors (system
 *  colours), no backdrop-filter support (solid), print (none of it), and
 *  prefers-reduced-motion (no press scaling).
 * ============================================================================= */

:root{
  /* the wash behind everything */
  --wash-a:rgba(32,178,170,.16);      /* brand teal */
  --wash-b:rgba(40,117,209,.12);      /* diagnosis blue */
  --wash-c:rgba(11,37,69,.06);        /* navy */
  /* the material */
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.80);
  --glass-strip:rgba(255,255,255,.88);   /* legible even where a device blurs weakly */
  --glass-edge:rgba(255,255,255,.75);          /* light catching the rim */
  --glass-edge-low:rgba(11,37,69,.08);         /* the rim's shaded side */
  --glass-shine:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);
  --glass-shadow:0 1px 1px rgba(11,37,69,.04),0 6px 18px -6px rgba(11,37,69,.18);
  --glass-shadow-lg:0 2px 2px rgba(11,37,69,.04),0 14px 34px -10px rgba(11,37,69,.28);
  --glass-blur:blur(18px) saturate(175%);
  --glass-blur-lg:blur(28px) saturate(185%);
  /* the chosen segment: a brighter lens sitting on the strip */
  --lens:rgba(255,255,255,.92);
  --lens-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(11,37,69,.06) inset,
                0 2px 6px rgba(11,37,69,.14),0 0 0 .5px rgba(11,37,69,.06);
  /* a teal fill that looks like liquid rather than paint */
  --gloss:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.10));
  --gloss-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.08) inset,0 4px 12px -4px rgba(8,125,118,.55);
  /* the rail on wide screens: navy glass, heavier because it is structure */
  --rail-glass:rgba(11,37,69,.92);
  --press:cubic-bezier(.3,.7,.4,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --wash-a:rgba(32,178,170,.14); --wash-b:rgba(40,117,209,.14); --wash-c:rgba(0,0,0,.25);
    --glass:rgba(30,42,58,.55); --glass-strong:rgba(26,37,52,.82); --glass-strip:rgba(22,32,46,.9);
    --glass-edge:rgba(255,255,255,.14); --glass-edge-low:rgba(0,0,0,.35);
    --glass-shine:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);
    --glass-shadow:0 1px 1px rgba(0,0,0,.25),0 8px 20px -8px rgba(0,0,0,.6);
    --glass-shadow-lg:0 2px 2px rgba(0,0,0,.25),0 16px 36px -12px rgba(0,0,0,.7);
    --lens:rgba(70,86,108,.85);
    --lens-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 2px 8px rgba(0,0,0,.45);
    --gloss:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.06));
    --gloss-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -1px 0 rgba(0,0,0,.2) inset,0 4px 14px -4px rgba(0,0,0,.6);
    --rail-glass:rgba(8,16,28,.88);
  }
}
:root[data-theme=dark]{
  --wash-a:rgba(32,178,170,.14); --wash-b:rgba(40,117,209,.14); --wash-c:rgba(0,0,0,.25);
  --glass:rgba(30,42,58,.55); --glass-strong:rgba(26,37,52,.82); --glass-strip:rgba(22,32,46,.9);
  --glass-edge:rgba(255,255,255,.14); --glass-edge-low:rgba(0,0,0,.35);
  --glass-shine:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);
  --glass-shadow:0 1px 1px rgba(0,0,0,.25),0 8px 20px -8px rgba(0,0,0,.6);
  --glass-shadow-lg:0 2px 2px rgba(0,0,0,.25),0 16px 36px -12px rgba(0,0,0,.7);
  --lens:rgba(70,86,108,.85);
  --lens-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 2px 8px rgba(0,0,0,.45);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.06));
  --gloss-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -1px 0 rgba(0,0,0,.2) inset,0 4px 14px -4px rgba(0,0,0,.6);
  --rail-glass:rgba(8,16,28,.88);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
@media screen{

  /* ---- the wash: fixed, so the glass has something to catch as you scroll ---- */
  body{background:var(--bg);}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(60vmax 45vmax at 8% -6%,var(--wash-a),transparent 62%),
      radial-gradient(55vmax 40vmax at 100% 18%,var(--wash-b),transparent 60%),
      radial-gradient(70vmax 50vmax at 40% 110%,var(--wash-c),transparent 65%);}

  /* ---- the material ---- */
  .tabbar,.langswitch,.themeswitch,.rangepick,.whochip,.crosslink,.act:not(.primary),.btn-quiet,
  .daybtn,.slot,.tooltip,.railtoggle{
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);}

  .langswitch,.themeswitch,.rangepick{
    background:var(--glass) var(--glass-shine);
    border:1px solid var(--glass-edge);
    box-shadow:var(--glass-shadow),0 0 0 .5px var(--glass-edge-low);}
  .langswitch button[aria-pressed=true],.themeswitch button[aria-pressed=true]{
    background:var(--lens);box-shadow:var(--lens-shadow);}
  .rangepick button[aria-pressed=true]{background-image:var(--gloss);box-shadow:var(--gloss-shadow);}

  .whochip{background:var(--glass) var(--glass-shine);border-color:var(--glass-edge);
    box-shadow:var(--glass-shadow),0 0 0 .5px var(--glass-edge-low);}
  .crosslink,.btn-quiet{background:var(--glass) var(--glass-shine);
    box-shadow:0 0 0 1px var(--glass-edge) inset,var(--glass-shadow);}
  .crosslink:hover,.btn-quiet:hover{background:var(--glass-strong) var(--glass-shine);}

  .act:not(.primary):not(.quiet){background:var(--glass-strong) var(--glass-shine);
    border-color:var(--glass-edge);box-shadow:var(--glass-shadow),0 0 0 .5px var(--glass-edge-low);}
  .act:not(.primary):not(.quiet):hover{background:var(--lens) var(--glass-shine);}

  /* the one thing to press: teal, glossed like liquid */
  .act.primary,.btn-primary,.tabbar button[aria-selected=true]{
    background-image:var(--gloss);box-shadow:var(--gloss-shadow);}

  /* ---- the tab strip: floats over the content, which scrolls beneath it ---- */
  /* The strip floats over text, so it is the thickest glass on the page: more
     blur and a denser tint, or the words scrolling under it read through the
     tab names. */
  .tabbar{background-color:var(--glass-strip);border:1px solid var(--glass-edge);
    -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
    box-shadow:var(--glass-shadow-lg),0 0 0 .5px var(--glass-edge-low);
    --fill-4:var(--glass-strong);}         /* its scroll-edge covers, in the same material */
  @media (max-width:59.999rem){
    .tabbar{position:sticky;top:.5rem;z-index:20;}
  }
  /* ---- the rail on wide screens: navy glass, heavier because it is structure ---- */
  @media (min-width:60rem){
    .wrap.shell > .railhead,.wrap.shell > .tabbar{
      background-color:var(--rail-glass);border-color:transparent;
      -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
      box-shadow:1px 0 0 rgba(255,255,255,.06) inset;}
  }

  /* ---- booking: dates and times are chips of glass; the chosen one is teal ---- */
  .daybtn,.slot{background:var(--glass-strong) var(--glass-shine);
    border-color:var(--glass-edge);box-shadow:var(--glass-shadow),0 0 0 .5px var(--glass-edge-low);}
  .daybtn[aria-pressed=true],.slot[aria-pressed=true],.slotpick button[aria-pressed=true]{
    background-image:var(--gloss);box-shadow:var(--gloss-shadow);}

  /* ---- tooltips materialise instead of simply appearing ---- */
  .tooltip{background:rgba(11,37,69,.82);box-shadow:var(--glass-shadow-lg),0 0 0 .5px rgba(255,255,255,.12) inset;
    transform-origin:50% 100%;transition:opacity 140ms ease,transform 180ms var(--press),
      -webkit-backdrop-filter 180ms ease,backdrop-filter 180ms ease;}
  .tooltip:not(.on){transform:scale(.96);}
}
}

/* ---- pressing is felt on the way down, not on release ---- */
.tabbar button,.langswitch button,.themeswitch button,.rangepick button,.act,.btn,.crosslink,
.daybtn,.slot{transition:background .18s ease,box-shadow .18s ease,transform 120ms var(--press);}
.tabbar button:active,.langswitch button:active,.themeswitch button:active,.rangepick button:active,
.act:not(:disabled):active,.btn:active,.crosslink:active,.daybtn:active,.slot:active{transform:scale(.97);}
@media (prefers-reduced-motion:reduce){
  .tabbar button:active,.langswitch button:active,.themeswitch button:active,.rangepick button:active,
  .act:active,.btn:active,.crosslink:active,.daybtn:active,.slot:active{transform:none;}
}

/* ---- less transparency asked for: the same controls, frosted solid ---- */
@media (prefers-reduced-transparency:reduce){
  body::before{display:none;}
  .tabbar,.langswitch,.themeswitch,.rangepick,.whochip,.crosslink,.act,.btn-quiet,.daybtn,.slot,.tooltip,
  .wrap.shell > .railhead{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  .langswitch,.themeswitch{background-color:var(--switch-track)!important;}
  .rangepick,.tabbar{background-color:var(--fill-4)!important;}
  .whochip,.crosslink,.btn-quiet,.act:not(.primary),.daybtn,.slot{background-color:var(--card)!important;}
  .tabbar{--fill-4:var(--card);}
  .wrap.shell > .railhead,.wrap.shell > .tabbar{background-color:var(--rail)!important;}
}

/* ---- more contrast asked for: solid surfaces with a hard edge ---- */
@media (prefers-contrast:more){
  body::before{display:none;}
  .tabbar,.langswitch,.themeswitch,.rangepick,.whochip,.crosslink,.act,.btn-quiet,.daybtn,.slot{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-image:none!important;
    box-shadow:none!important;border:1px solid var(--ink)!important;}
}
@media (forced-colors:active){
  body::before{display:none;}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
}
@media print{
  body::before{display:none!important;}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
}