/* ===========================================================================
   Glass, 2026-10-26 (owner: the entire website and the Handling Plan platform with
   an iOS glass feel, and a smooth transition on the Sign in / Open a plan switch).
   One layer, loaded last (functions.php), over lux.css (the site), lux-app.css (the
   account screens) and lux-ws.css (the workspace and the carer's plan).
   - The ground is a pale, fixed light field (mint, sky, a trace of gold) so glass has
     something to sit on. It stays light enough that ink and muted ink keep their
     contrast on the palest pane (ink over 15:1, muted over 5.6:1).
   - Chrome that content scrolls under (headers, sticky bars, menus, the account card)
     is frosted: blur and saturation. Cards are glass without the blur, because only
     the ground is under them, and fifty blurred cards cost a phone dearly.
   - Every pane has a lit top edge and a soft shadow, the way glass catches light.
   - Never a backdrop-filter on anything holding a position:fixed child (it becomes
     their containing block): the phone menu and the filter sheet are left alone.
   - Status pill colours are untouched (plan-state.css, tuned by ΔE). Screen only:
     the printed plan is a clinical document and never sees this sheet.
   - Reduced transparency, or no backdrop-filter at all, falls back to solid panes.
   Selectors lead with :root so they outrank the html-led rules of the other sheets.
   Not the plan platform (owner, 2026-10-26: "remove the liquid glass from the plan
   platform"): the signed-in workspace and the plan a care team opens (anything with a
   .tp app) are solid again, as lux-ws.css draws them. The sign-in screens keep it.
   ========================================================================= */

:root{
  --g-ground:#F3F7F5;
  --g-pane:linear-gradient(160deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.58) 100%);
  /* Headers pass over the deep green bands too: at .80 the muted nav ink still reads
     at 4.6:1 or better over the darkest of them. */
  --g-chrome:rgba(255,255,255,.80);
  --g-chrome-strong:rgba(255,255,255,.78);
  --g-field:rgba(255,255,255,.76);
  --g-soft:rgba(255,255,255,.36);
  --g-edge:rgba(255,255,255,.82);
  --g-hair:rgba(11,31,25,.09);
  --g-blur:saturate(180%) blur(22px);
  --g-blur-sm:saturate(160%) blur(12px);
  --g-lit:inset 0 1px 0 rgba(255,255,255,.92),inset 0 0 0 1px rgba(255,255,255,.28);
  --g-drop:0 1px 2px rgba(11,31,25,.04),0 14px 34px -16px rgba(11,31,25,.20);
  --g-drop-lg:0 2px 6px rgba(11,31,25,.04),0 34px 64px -32px rgba(11,31,25,.30);
  --g-green:linear-gradient(180deg,#1A7A5A 0%,#0F5740 100%);
  --g-green-hi:linear-gradient(180deg,#1E8A66 0%,#126647 100%);
  --g-green-lit:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.14),0 10px 22px -12px rgba(15,87,64,.65);
  --g-track:rgba(118,132,126,.14);
}

@media screen{

/* ---- The ground ----------------------------------------------------------- */
html:root{background:var(--g-ground)!important}
html:root::before{content:"";position:fixed;inset:-12vmax;z-index:-1;pointer-events:none;background:
  radial-gradient(40vmax 30vmax at 8% 4%,rgba(168,235,203,.55),transparent 70%),
  radial-gradient(36vmax 28vmax at 94% 8%,rgba(186,221,250,.50),transparent 70%),
  radial-gradient(42vmax 34vmax at 86% 92%,rgba(201,233,217,.62),transparent 72%),
  radial-gradient(30vmax 26vmax at 4% 94%,rgba(244,224,180,.36),transparent 70%),
  linear-gradient(180deg,#F7FAF9 0%,#F0F6F2 100%)}
:root body.lx-site,:root body.tp-body:not(:has(.tp)),:root body.tp-body:has(.lx-wide){background:transparent!important;background-image:none!important}
html:root:has(body.tp-body .tp)::before{display:none}
:root .lx,:root .lx .lp__tiles,:root .lx .lp__tile,:root .lx .hp__hero,:root .lx-case,:root .tp-auth,:root body .tp-auth.lx-wide{background:transparent!important}
:root .lx-sec--soft,:root .lx .lp__tile:nth-of-type(even),:root .lx-guides{background:var(--g-soft)!important}

/* ---- Headers and menus: frosted chrome ------------------------------------ */
:root .lx-head:not(.is-open){background:var(--g-chrome);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-bottom:1px solid rgba(255,255,255,.55);box-shadow:inset 0 -1px 0 var(--g-hair),0 10px 30px -24px rgba(11,31,25,.35)}
@media (min-width:901px){
  :root .lx-dd__panel{background:var(--g-chrome-strong);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);box-shadow:var(--g-lit),var(--g-drop-lg)}
}
@media (max-width:900px){
  :root .lx-head.is-open .lx-nav{background:rgba(250,252,251,.92);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
}
:root .lx-dd__btn:hover,:root .lx-dd.is-open .lx-dd__btn,:root .lx-dd__btn.is-here{background:rgba(15,87,64,.08)}
:root body .lx-dd__col a:hover,:root body .lx-dd__col a[aria-current="page"]{background:rgba(255,255,255,.7)}

/* ---- Buttons: green glass, and clear glass for the quiet ones ---------------- */
:root .lx-btn:not(.lx-btn--ghost),
:root .lx .lp__btn:not(.lp__btn--ghost),
:root body .tp-auth__btn:not(.tp-auth__btn--ghost){background:var(--g-green)!important;border-color:transparent!important;box-shadow:var(--g-green-lit)!important;transition:background .25s ease,transform .25s cubic-bezier(.32,.72,0,1),box-shadow .25s ease}
:root .lx-btn:not(.lx-btn--ghost):hover,
:root .lx .lp__btn:not(.lp__btn--ghost):hover,
:root body .tp-auth__btn:not(.tp-auth__btn--ghost):hover{background:var(--g-green-hi)!important;transform:translateY(-1px)}
:root .lx-btn:not(.lx-btn--ghost):active,:root body .tp-auth__btn:active{transform:scale(.98)}
:root body a.lx-btn--ghost,:root .lx .lp__btn--ghost,:root body .tp-auth__btn--ghost,:root .lx .lx-pills a,:root .lx-car__btn,:root .lx .hp__libBar button:not(.is-on):not([aria-pressed="true"]),:root .lx .hp__chips button:not(.is-on):not([aria-pressed="true"]){background:rgba(255,255,255,.62)!important;-webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm);border-color:rgba(15,87,64,.16)!important;box-shadow:var(--g-lit),0 6px 16px -12px rgba(11,31,25,.30)!important}
:root body a.lx-btn--ghost:hover,:root .lx .lp__btn--ghost:hover,:root body .tp-auth__btn--ghost:hover,:root .lx .lx-pills a:hover,:root .lx-car__btn:hover{background:rgba(255,255,255,.86)!important}
/* On the deep band the buttons are light glass on dark. */
:root .lx .hp__cta .lp__btn:not(.lp__btn--ghost){background:rgba(255,255,255,.94)!important;box-shadow:inset 0 1px 0 #FFFFFF,0 10px 24px -12px rgba(0,0,0,.45)!important}
:root .lx .hp__cta .lp__btn--ghost{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important}

/* ---- Panes: the site ------------------------------------------------------ */
:root .lx-card,:root .lx .lp__moreItem,:root .lx .hp__linkCard,:root .lx .hp__post,:root .lx .hp__libGroup,:root .lx .lp__factCol,:root .lx .hp__stepList li,:root .lx-pr__card,:root .lx-pr__card.is-ent,:root .lx-case__facts li,:root .lx-plan{background:var(--g-pane);border:1px solid var(--g-edge);box-shadow:var(--g-lit),var(--g-drop)}
:root .lx-pr__card.is-main{border:1.5px solid rgba(15,87,64,.55);box-shadow:var(--g-lit),0 30px 60px -34px rgba(15,87,64,.45)}
:root .lx-stage{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28));-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);box-shadow:var(--g-lit),var(--g-drop-lg)}
:root .lx .hp__cover{background:linear-gradient(160deg,rgba(227,242,233,.9),rgba(201,233,217,.55))}
:root .lx-foot{background:rgba(255,255,255,.42);border-top:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 var(--g-hair)}
:root .lx .lp__vBtn{background:rgba(11,31,25,.48);-webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* No blur on the search fields: a filter on the input lifted it over its own icon. */
:root .lx .hp__libSearch input,:root .lx .hp__search input{background:var(--g-field);border-color:var(--g-hair);box-shadow:var(--g-lit)}
:root .lx .hp__libSearch svg,:root .lx .hp__search svg{z-index:1}
/* The deep band: dark glass tiles with a lit edge. */
:root .lx-tiles{gap:12px;background:transparent;overflow:visible;border-radius:0}
:root .lx-tiles li{border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(168,235,203,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
:root .lx-tiles li:hover{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}

/* ---- Panes: the account screens -------------------------------------------- */
:root body .tp-auth__card{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.54))!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge)!important;box-shadow:var(--g-lit),var(--g-drop-lg)!important}
:root body .tp-auth__form input[type="email"],:root body .tp-auth__form input[type="password"],:root body .tp-auth__form input[type="text"],:root body .tp-auth__form input[type="tel"],:root body .tp-auth__form input:not([type]),:root body .tp-auth__form select,:root body .tp-done__resend input{background:var(--g-field)!important;border-color:rgba(11,31,25,.12)!important;box-shadow:inset 0 1px 2px rgba(11,31,25,.05)!important}
:root body .tp-auth__form input:focus,:root body .tp-auth__form select:focus{background:#FFFFFF!important}

/* ---- Segmented controls: a glass thumb that slides (assets/js/lux-glass.js) --- */
:root body .tp-auth__tabs,:root .lx-pr__toggle{background:var(--g-track)!important;box-shadow:inset 0 1px 2px rgba(11,31,25,.06)!important}
.tp-auth__tabs.lg-seg,.lx-pr__toggle.lg-seg{position:relative;isolation:isolate}
.lg-seg > .lg-thumb{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:999px;opacity:0;background:rgba(255,255,255,.96);box-shadow:inset 0 1px 0 #FFFFFF,0 0 0 .5px rgba(11,31,25,.06),0 3px 10px -2px rgba(11,31,25,.18);transition:transform .46s cubic-bezier(.32,.72,0,1),width .46s cubic-bezier(.32,.72,0,1),height .3s ease,opacity .2s ease;will-change:transform}
.lg-seg > .lg-thumb.is-still{transition:none}
.lg-seg > a,.lg-seg > button{position:relative;z-index:1;transition:color .3s ease}
:root body .tp-auth__tabs.lg-seg a[aria-current="page"],:root .lx-pr__toggle.lg-seg button[aria-pressed="true"]{background:transparent!important;box-shadow:none!important}
:root body .tp-auth__tabs.is-going a[aria-current="page"]{color:#4E625C!important}
:root body .tp-auth__tabs a.lg-to{color:#0B1F19!important}
/* ---- Moving between pages: the page settles in, the header and the switch hold --- */
/* The headers are not named: a view-transition-name makes an element a backdrop root, so
   the menus inside the header could no longer blur the page under them (the phone menu
   showed the page through it). An identical header cross-fades invisibly anyway. */
@view-transition{navigation:auto}
.tp-auth__logo{view-transition-name:lg-logo}
.tp-auth__tabs{view-transition-name:lg-seg}
::view-transition-old(root){animation:lg-out .2s ease both}
::view-transition-new(root){animation:lg-in .38s cubic-bezier(.32,.72,0,1) both}
::view-transition-group(*){animation-duration:.38s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
@keyframes lg-out{to{opacity:0;filter:blur(6px)}}
@keyframes lg-in{from{opacity:0;filter:blur(8px);transform:translateY(6px)}}

/* ---- Fallbacks -------------------------------------------------------------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--g-chrome:rgba(255,255,255,.95);--g-chrome-strong:#FFFFFF}
}
@media (prefers-reduced-transparency:reduce){
  :root{--g-pane:#FFFFFF;--g-chrome:#FFFFFF;--g-chrome-strong:#FFFFFF;--g-field:#FFFFFF;--g-soft:#FFFFFF;--g-blur:none;--g-blur-sm:none}
  html:root::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-seg > .lg-thumb,.lg-seg > a,.lg-seg > button{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

}

/* Sign-in on a phone, 27 Oct 2026. The ground and the blooms were fixed layers, and iOS
   Safari ends fixed layers above its floating toolbar, so the screen showed a hard edge
   with plain ground below it. On a phone they are painted on the page itself, which runs
   under the toolbar, and stand still. The tab beside "Sign in" stays on one line. */
@media screen and (max-width:900px){
  html:root:has(body > main.tp-auth){background:
    radial-gradient(38% 42% at 18% 22%,rgba(44,107,82,.15),transparent 70%),
    radial-gradient(34% 38% at 82% 16%,rgba(217,164,65,.12),transparent 70%),
    radial-gradient(46% 48% at 74% 84%,rgba(13,61,53,.11),transparent 72%),
    radial-gradient(30% 34% at 26% 88%,rgba(44,107,82,.10),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%230d3d35' fill-opacity='0.05'/%3E%3Ccircle cx='16' cy='16' r='1.1' fill='%232c6b52' fill-opacity='0.04'/%3E%3C/svg%3E") 0 0/28px 28px,
    linear-gradient(180deg,#F7FAF9 0%,#F0F6F2 100%)!important}
  html:root:has(body > main.tp-auth)::before,html body .tp-auth::before,html body .tp-auth::after{display:none!important}
  html body .tp-auth__tabs a{white-space:nowrap;padding-left:8px!important;padding-right:8px!important}
}

/* Account cards, 27 Oct 2026 (owner: "make the box outline sharp and darker, very clean
   and professional"). The card was frosted glass with a white edge, so its outline was
   only a blur of shadow. Now solid white with a crisp 1px line and a tight shadow, and
   the fields and the keep-me-signed-in row drawn with the same line. */
html:root body .tp-auth__card{background:#FFFFFF!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #C3CEC8!important;border-radius:20px!important;box-shadow:0 1px 2px rgba(11,31,25,.06),0 16px 36px -24px rgba(11,31,25,.28)!important}
html:root body .tp-auth__form input[type="email"],html:root body .tp-auth__form input[type="password"],html:root body .tp-auth__form input[type="text"],html:root body .tp-auth__form input[type="tel"],html:root body .tp-auth__form input:not([type]),html:root body .tp-auth__form select,html:root body .tp-done__resend input{background:#FFFFFF!important;border:1px solid #AEBCB5!important;border-radius:12px!important;box-shadow:none!important}
html:root body .tp-auth__form input:focus,html:root body .tp-auth__form select:focus{border-color:#0F5740!important;outline:2px solid rgba(15,87,64,.18)!important;outline-offset:0!important}
html:root body .tp-auth__remember{background:#F6F8F7!important;border:1px solid #D3DCD7!important;border-radius:12px!important}