/* The look, third layer (loaded last): light, glass and motion on top of the components in base / app / v2.
   Everything takes its colour from the site's (or a company's) colours: --tea (main), --turmeric (accent) and
   --glow-2 (a bright version of the main colour), so changing Settings > Look > Colours changes all of it.
   Only transforms and opacity animate (cheap on phones); prefers-reduced-motion and "animations off" stop them. */

:root{
  --fx-edge:linear-gradient(140deg,color-mix(in srgb,var(--tea-2) 45%,transparent),var(--line) 28%,var(--line) 72%,color-mix(in srgb,var(--turmeric) 42%,transparent));
  --fx-lift:0 22px 44px -24px color-mix(in srgb,var(--tea) 60%,transparent),0 3px 10px -4px rgba(0,0,0,.10);
  --fx-shine:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);
}

/* ---------- background: a third, slow glow in the main colour ---------- */
.fx-c{width:72vmax;height:72vmax;border-radius:50%;left:25%;bottom:-52vmax;opacity:.55;will-change:transform;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow-2) 26%,transparent),transparent);animation:drift 40s ease-in-out infinite alternate}
html.no-anim .fx-c{animation:none}
::selection{background:color-mix(in srgb,var(--turmeric) 34%,transparent)}
/* scrollbars: slim and rounded, no arrow buttons. Chrome / Edge / Safari use the ::-webkit-scrollbar parts (when
   scrollbar-width is set they fall back to the system bar with arrows, so it is set only where those parts do not
   exist, i.e. Firefox). Scroll areas inside a page show their bar only while the pointer is over them. */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}}
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;background:color-mix(in srgb,var(--ink) 22%,transparent) padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 38%,transparent) padding-box}
body *::-webkit-scrollbar{width:8px;height:8px}
body *::-webkit-scrollbar-thumb{border-width:2px;background:transparent padding-box}
body *:hover::-webkit-scrollbar-thumb,body *:focus-within::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent) padding-box}
body *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 38%,transparent) padding-box}

/* ---------- app bar: a light running along its edge ---------- */
.bar::after{height:1.5px;opacity:.9;background:linear-gradient(90deg,transparent,var(--turmeric),var(--glow-2),transparent);background-size:220% 100%;animation:fxLine 7s linear infinite}
@keyframes fxLine{from{background-position:120% 0}to{background-position:-120% 0}}
@media (display-mode: standalone){.bar{padding-top:env(safe-area-inset-top,0px)}}

/* ---------- surfaces: a fine edge that catches the light, a soft lift where they can be pressed ---------- */
.a-card,.tile,.plan,.ex-card,.bank{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--fx-edge) border-box;box-shadow:var(--shadow)}
.stat{border:1px solid transparent;background:linear-gradient(var(--glass),var(--glass)) padding-box,var(--fx-edge) border-box}
/* hover: the edge firms up a little; nothing jumps or glows */
a.tile,button.plan,a.ex-card,.pl-card,a.acct{transition:background .2s,border-color .2s}
@media (hover:hover){
  a.tile:hover,button.plan:not([disabled]):hover,a.ex-card:hover,a.acct:hover{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(var(--line-2),var(--line-2)) border-box}
}
.tile .ti,.ord-ic,.fsd-ic{box-shadow:0 0 0 1px color-mix(in srgb,var(--c,var(--tea)) 22%,transparent) inset,0 10px 22px -14px var(--c,var(--tea))}
.stat b{background:linear-gradient(120deg,var(--ink) 20%,color-mix(in srgb,var(--tea-2) 85%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- titles ---------- */
.phead h2{background:linear-gradient(105deg,var(--ink) 35%,color-mix(in srgb,var(--tea-2) 75%,var(--ink)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:2px}
.hero h2 em{background:linear-gradient(95deg,var(--turmeric),color-mix(in srgb,var(--turmeric) 50%,var(--glow-2)));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-top h3 > .ic:first-child{color:var(--turmeric-ink)}

/* ---------- buttons: a light that sweeps over, a press that answers, a ripple where you touch ---------- */
.btn,.iconbtn,.chip,.bn,.tab,.choice,.ib-i,.seg2 button,.pl-h{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s var(--ease),box-shadow .25s var(--ease),filter .2s,background-position .6s var(--ease)}
.btn:active:not([disabled]),.iconbtn:active,.chip:active{transform:scale(.97)}
.btn.accent{background:var(--turmeric);color:var(--on-turmeric)}
@media (hover:hover){
  .btn.accent:hover{filter:brightness(1.05)}
  .btn.ghost:hover{background:var(--surface-2)}
}
.btn:focus-visible,.iconbtn:focus-visible,.chip:focus-visible,.choice:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--turmeric)}
.rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.12;transform:scale(0);animation:fxRip .55s var(--ease) forwards;z-index:0}
@keyframes fxRip{to{transform:scale(1);opacity:0}}
.iconbtn,.chip,.bn,.choice{position:relative;overflow:hidden}

/* ---------- chips and choices ---------- */
.chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--tea),color-mix(in srgb,var(--tea) 62%,var(--glow-2)));color:var(--on-tea);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--tea) 85%,transparent)}
.chip[aria-pressed="true"] .k{background:rgba(255,255,255,.18);color:inherit}
.choice[aria-pressed="true"]{box-shadow:0 0 0 2px var(--turmeric) inset,0 14px 30px -18px var(--glow)}

/* ---------- inputs: a soft glow while typing ---------- */
.inp,.sel,.ta,.csel,.search input{transition:box-shadow .2s var(--ease),background .2s}
.inp:focus,.ta:focus,.search input:focus{background:var(--surface)}

/* ---------- tables: the row under the pointer is marked at its start ---------- */
.dt tbody tr{transition:background .15s}

/* ---------- dialogs and messages: glass with a line of light on top ---------- */
.mdl{background:linear-gradient(90deg,transparent,var(--turmeric),var(--glow-2),transparent) top / 100% 2px no-repeat,color-mix(in srgb,var(--surface) 94%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 0 0 1px var(--line) inset,var(--shadow-lg)}
.mdl-scrim{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.toast{background:color-mix(in srgb,var(--ink) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,var(--shadow-lg);border-radius:16px}
.cpop{-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);background:color-mix(in srgb,var(--surface) 94%,transparent)}


/* ---------- phones: a floating glass dock like an app ---------- */
@media (max-width:760px){
  :root{--bnav-h:74px}
  .bnav{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:62px;padding:6px;border-radius:22px;
    box-shadow:0 0 0 1px var(--line) inset,0 18px 40px -16px rgba(0,0,0,.45)}
  .bn{border-radius:16px}
  .bn[aria-current="page"] .ic{box-shadow:0 6px 16px -6px var(--glow)}
  .bn[aria-current="page"] span{color:var(--ink)}
  .a-card,.tile,.plan,.ex-card{box-shadow:0 1px 1px rgba(0,0,0,.03),0 10px 26px -18px rgba(0,0,0,.35)}
}

@media (prefers-reduced-motion: reduce){
  .bar::after,.fx-c{animation:none}
  .rip{display:none}
}
html.no-anim .bar::after,html.no-anim .rip{animation:none}

/* ================================================================ the top bar
   A website's header on every screen: the brand, search, switches and the user, with the sections below it
   (phones have the bottom dock instead). Light glass, coloured only by its details. */

/* the top bar: light glass on every screen, coloured only by its details */
.bar{--bar:color-mix(in srgb,var(--bg) 72%,transparent);--bar-ink:var(--ink);box-shadow:0 1px 0 var(--line),0 12px 30px -26px color-mix(in srgb,var(--ink) 50%,transparent)}
.bar .seal{background:linear-gradient(140deg,var(--tea),color-mix(in srgb,var(--tea) 45%,var(--turmeric)));color:var(--on-tea);box-shadow:0 10px 24px -12px var(--tea),0 0 0 1px color-mix(in srgb,#fff 18%,transparent) inset}
.bar .seal img{background:var(--surface)}
.bar .iconbtn,.bar .userbtn{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line) inset,0 4px 12px -8px color-mix(in srgb,var(--ink) 40%,transparent)}
.bar .iconbtn:hover,.bar .userbtn:hover{background:var(--surface-2)}
.bar .seg{background:var(--surface-2);box-shadow:0 0 0 1px var(--line) inset;color:var(--ink)}
.bar .sub{color:var(--muted);opacity:1}
kbd{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2) inset;color:var(--muted)}


/* the sections in the top bar: plain words; the one you are on sits on the accent, in a colour that reads on it */
.tabs .tab{color:var(--ink);opacity:.72}
.tabs .tab:hover{opacity:1}
.tabs .tab[aria-selected="true"]{opacity:1;color:var(--on-turmeric)}
.tabs .ink{background:var(--turmeric);box-shadow:none}
.tabs .tab .n{background:color-mix(in srgb,var(--ink) 8%,transparent);color:inherit}
.tabs .tab[aria-selected="true"] .n{background:color-mix(in srgb,var(--on-turmeric) 14%,transparent)}

/* ---------- hover, everywhere: one quiet answer. The edge firms up and the surface takes a faint tint; nothing moves,
   glows or changes colour (cards, tiles, documents, plans, files, table rows). */
@media (hover:hover){
  .card:hover,.slsc:hover,.tile:hover,.kpi:hover,button.plan:hover,a.acct:hover,.ex-card:hover,.fs-f:hover,.fs-img:hover,a.gz:hover,button.bank:hover,.latest a:hover,.pl-card:hover{
    transform:none;box-shadow:0 0 0 1px var(--line-2) inset,var(--shadow)}
  a.tile:hover,button.plan:not([disabled]):hover,a.ex-card:hover,a.acct:hover,.card:hover,.slsc:hover,a.gz:hover{
    background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,linear-gradient(var(--line-2),var(--line-2)) border-box}
  .dt tr.link:hover td,.gd-t tbody tr:hover td{background:var(--surface-2)}
  .btn:hover{filter:none}
  .btn.accent:hover{filter:brightness(1.04)}
  .chip:hover,.pk-i:hover,.x:hover,.mini:hover,.admin-link:hover,.csel:hover{box-shadow:0 0 0 1px var(--line-2) inset}
  .brand:hover .seal{transform:none}
}