/* The portal in the style of its glass folders: everything sits on the same
   generated marble (painted by glass-theme.js), and every surface is a pane
   of frosted glass with a lit top edge and a soft, deep shadow. Buttons have
   a glossy face, fields are set into the glass, and things that can be
   picked up lift with the folders' spring.

   Loaded last on every portal page. It only changes how things look: no
   sizes, positions or behaviour. Every rule is scoped with html:not(#gx) so
   it wins over each page's own styles; states (pressed, current, open) are
   restated here so they still show. */

:root{
  --gx-base:#121110;
  --gx-pane:rgba(40,38,35,.5);
  --gx-pane-strong:rgba(26,25,23,.84);
  --gx-pane-soft:rgba(242,240,236,.04);
  --gx-edge:rgba(242,240,236,.11);
  --gx-field-edge:rgba(242,240,236,.4);
  --gx-rim:rgba(255,255,255,.1);
  --gx-shadow:0 26px 60px -32px rgba(0,0,0,.85),0 3px 10px -4px rgba(0,0,0,.4);
  --gx-shadow-lift:0 34px 70px -30px rgba(0,0,0,.9),0 6px 16px -6px rgba(0,0,0,.45);
  --gx-field:rgba(0,0,0,.24);
  --gx-field-inset:inset 0 1px 2px rgba(0,0,0,.35);
  --gx-gloss:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 52%);
  --gx-sheen:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 38%);
  --gx-blur:blur(22px) saturate(1.35);
  --gx-blur-strong:blur(34px) saturate(1.4);
  --gx-glow:0 0 0 1px rgba(242,240,236,.75),0 0 0 5px rgba(242,240,236,.12);
  --gx-spring:cubic-bezier(.34,1.36,.5,1);
  --gx-ease:cubic-bezier(.2,.8,.2,1);
}
html[data-theme="light"]{
  --gx-base:#E8E5DF;
  --gx-pane:rgba(255,255,255,.56);
  --gx-pane-strong:rgba(255,255,255,.86);
  --gx-pane-soft:rgba(255,255,255,.42);
  --gx-edge:rgba(20,18,16,.075);
  --gx-field-edge:rgba(20,18,16,.5);
  --gx-rim:rgba(255,255,255,.95);
  --gx-shadow:0 24px 50px -30px rgba(52,44,34,.38),0 2px 8px -3px rgba(52,44,34,.14);
  --gx-shadow-lift:0 32px 64px -28px rgba(52,44,34,.45),0 5px 14px -5px rgba(52,44,34,.18);
  --gx-field:rgba(255,255,255,.6);
  --gx-field-inset:inset 0 1px 2px rgba(52,44,34,.12);
  --gx-gloss:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 52%);
  --gx-sheen:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%);
  --gx-glow:0 0 0 1px rgba(20,18,16,.7),0 0 0 5px rgba(20,18,16,.08);
}

/* ---- the marble behind the app ---- */
html:not(#gx):has(body .sidebar),html:not(#gx):has(body.embedded){background:var(--gx-base)}
html:not(#gx) body:has(.sidebar),html:not(#gx) body.embedded{background:transparent}
.gx-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.gx-art{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--gx-ease),transform 1.6s var(--gx-ease)}
.gx-art[data-ready]{opacity:1;transform:none}
.gx-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 0%,rgba(18,17,16,0) 0%,rgba(18,17,16,.38) 70%,rgba(14,13,12,.6) 100%)}
html[data-theme="light"] .gx-veil{background:linear-gradient(180deg,rgba(244,242,238,.35),rgba(244,242,238,.15) 40%,rgba(236,233,227,.3)),radial-gradient(120% 90% at 18% 0%,rgba(244,242,238,0) 0%,rgba(236,233,227,.3) 70%,rgba(228,224,217,.5) 100%)}
@media (prefers-reduced-motion:reduce){.gx-art{transition:opacity .4s linear;transform:none}}

/* ---- panes of glass ---- */
html:not(#gx) :is(.panel,.stat,.stat-card,.home-stat,.inbox,.bill-item,.status-banner,.lock-icon){
  background-color:var(--gx-pane);background-image:var(--gx-sheen);
  border-color:var(--gx-edge);
  box-shadow:inset 0 1px 0 var(--gx-rim),var(--gx-shadow);
  -webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur);
}
html:not(#gx) .sidebar{
  background-color:var(--gx-pane);background-image:var(--gx-sheen);
  border-right-color:var(--gx-edge);
  box-shadow:inset -1px 0 0 var(--gx-rim),18px 0 50px -40px rgba(0,0,0,.6);
  -webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur);
}
html:not(#gx) .sidebar-brand,html:not(#gx) .sidebar-foot{border-color:var(--gx-edge)}
/* Tinted notes keep their colour, frosted underneath. */
html:not(#gx) .notice{border:1px solid var(--gx-edge);box-shadow:inset 0 1px 0 var(--gx-rim),var(--gx-shadow);-webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur)}
/* Cards in a list: lighter glass, so a long list stays quick. */
html:not(#gx) :is(.card,.fb-card:not(.fb-folder-card),.folder-card){
  background-color:var(--gx-pane);background-image:var(--gx-sheen);
  border-color:var(--gx-edge);
  box-shadow:inset 0 1px 0 var(--gx-rim),var(--gx-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
}
/* Things you open lift toward you, with the folders' spring. Numbers and
   bills you can't click stay put. */
html:not(#gx) :is(.folder-card,.fb-card:not(.fb-folder-card),.home-stat,:is(.stat,.stat-card,.bill-item):is(a,button,[role="button"])){
  transition:transform .55s var(--gx-spring),box-shadow .55s var(--gx-ease),border-color .3s var(--gx-ease);
}
@media (hover:hover){
  html:not(#gx) :is(.folder-card,.fb-card:not(.fb-folder-card)):hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 var(--gx-rim),var(--gx-shadow-lift);border-color:rgba(var(--ink-rgb),.2)}
  html:not(#gx) :is(.home-stat,:is(.stat,.stat-card,.bill-item):is(a,button,[role="button"])):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--gx-rim),var(--gx-shadow-lift)}
}
/* The lead number: a polished slab of the accent. It sits above the glass
   cards beside it, so their shadows don't smudge its edge. */
html:not(#gx) .stat.is-lead{background-color:var(--accent);background-image:var(--gx-gloss);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;position:relative;z-index:1}
html:not(#gx) .stat-value{letter-spacing:-.025em}

/* Messages: the thread is a darker sheet inside the pane. */
html:not(#gx) :is(.thread,.inbox-thread){background:rgba(var(--ink-rgb),.025)}
html:not(#gx) :is(.inbox-list,.thread-head,.thread-compose,.inbox-thread-head,.inbox-thread-compose,.messages-compose){border-color:var(--gx-edge)}
html:not(#gx) :is(.inbox-row){border-color:var(--gx-edge);transition:background .25s var(--gx-ease)}
html:not(#gx) :is(.inbox-row[aria-current="true"],.inbox-row.active){background:rgba(var(--ink-rgb),.08);box-shadow:inset 0 1px 0 var(--gx-rim)}
html:not(#gx) :is(.avatar,.inbox-avatar){background:rgba(var(--ink-rgb),.08);box-shadow:inset 0 1px 0 var(--gx-rim),0 0 0 1px var(--gx-edge)}
html:not(#gx) :is(.bubble,.msg-bubble.admin,.assistant-msg.bot,.assistant-typing){background:rgba(var(--ink-rgb),.075);box-shadow:inset 0 1px 0 var(--gx-rim)}
html:not(#gx) :is(.bubble.mine,.msg-bubble.client,.assistant-msg.user){background-color:var(--accent);background-image:var(--gx-gloss);box-shadow:0 8px 22px -14px rgba(0,0,0,.55)}
/* Admin shows the client on the left and the studio on the right. */
html:not(#gx) .inbox-thread-body .msg-bubble.client,html:not(#gx) .msg-list .msg-bubble.client,html:not(#gx) .msg-bubble.user{background:rgba(var(--ink-rgb),.075);background-image:none;box-shadow:inset 0 1px 0 var(--gx-rim)}
html:not(#gx) .inbox-thread-body .msg-bubble.admin,html:not(#gx) .msg-list .msg-bubble.admin,html:not(#gx) .msg-bubble.assistant{background-color:var(--accent);background-image:var(--gx-gloss);box-shadow:0 8px 22px -14px rgba(0,0,0,.55)}

/* ---- the sidebar's links ---- */
html:not(#gx) .sidebar-link{transition:background .3s var(--gx-ease),color .3s var(--gx-ease),box-shadow .3s var(--gx-ease)}
html:not(#gx) .sidebar-link svg{transition:transform .5s var(--gx-spring)}
@media (hover:hover){html:not(#gx) .sidebar-link:hover svg{transform:translateY(-1px) scale(1.08)}}
html:not(#gx) :is(.sidebar-link.active,.sidebar-link[aria-current="page"]){
  background:rgba(var(--ink-rgb),.1);color:var(--dark-ink);
  box-shadow:inset 0 1px 0 var(--gx-rim),0 0 0 1px var(--gx-edge),0 10px 24px -16px rgba(0,0,0,.6);
}
html:not(#gx) :is(.sidebar-link .count,.inbox-row .count){background-image:var(--gx-gloss)}
html:not(#gx) .sidebar-toggle{border-color:var(--gx-edge);background:rgba(var(--ink-rgb),.03);box-shadow:inset 0 1px 0 var(--gx-rim)}
html:not(#gx) .sidebar.menu-open .sidebar-menu{background:var(--gx-pane-strong);-webkit-backdrop-filter:var(--gx-blur-strong);backdrop-filter:var(--gx-blur-strong);border-color:var(--gx-edge);box-shadow:var(--gx-shadow)}

/* ---- page titles: etched into the glass ---- */
html:not(#gx) .main-head h1{
  background:linear-gradient(180deg,var(--dark-ink) 35%,rgba(var(--ink-rgb),.8) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--dark-ink);
}

/* ---- buttons: a glossy face that springs ---- */
html:not(#gx) :is(.btn:not(.btn-quiet):not(.btn-danger),.account-submit,.pay-btn,.schedule-fallback,.assistant-send,.portal-submit,.fb-move-foot .fb-primary){
  background-image:var(--gx-gloss);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12),0 10px 24px -14px rgba(0,0,0,.7);
  transition:background-color .25s var(--gx-ease),transform .45s var(--gx-spring),box-shadow .45s var(--gx-ease),opacity .2s;
}
@media (hover:hover){
  html:not(#gx) :is(.btn:not(.btn-quiet):not(.btn-danger),.account-submit,.pay-btn,.schedule-fallback,.portal-submit):not(:disabled):hover{transform:translateY(-1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.12),0 14px 30px -14px rgba(0,0,0,.75)}
}
html:not(#gx) :is(.btn,.account-submit,.pay-btn,.portal-submit):not(:disabled):active{transform:translateY(0) scale(.98)}
/* Quiet buttons, chips and small controls: clear glass. */
html:not(#gx) :is(.btn-quiet,.btn-danger,.drive-quiet,.chip,.scope-chip,.fb-btn:not(.fb-primary),.icon-btn,.drawer-close,.ec-nav,.fb-views){
  background-color:rgba(var(--ink-rgb),.035);border-color:var(--gx-edge);
  box-shadow:inset 0 1px 0 var(--gx-rim);
  transition:background-color .25s var(--gx-ease),color .25s var(--gx-ease),transform .45s var(--gx-spring);
}
html:not(#gx) :is(.btn-quiet,.drive-quiet,.chip,.scope-chip,.fb-btn:not(.fb-primary),.icon-btn,.drawer-close,.ec-nav):hover{background-color:rgba(var(--ink-rgb),.08)}
html:not(#gx) .btn-danger:hover{background-color:var(--bad-bg)}
html:not(#gx) :is(.chip[aria-pressed="true"],.scope-chip[aria-pressed="true"],.fin-bar .chip[aria-current="page"]){
  background-color:var(--accent);background-image:var(--gx-gloss);color:var(--ink);border-color:transparent;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.6);
}
html:not(#gx) .fb-views button[aria-pressed="true"]{background:rgba(var(--ink-rgb),.12);box-shadow:inset 0 1px 0 var(--gx-rim)}
html:not(#gx) .ec-day[aria-selected="true"]{background-color:var(--accent);background-image:var(--gx-gloss);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
html:not(#gx) .ec-day{transition:background .2s var(--gx-ease),transform .45s var(--gx-spring)}

/* ---- fields: set into the glass ---- */
html:not(#gx) :is(.field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),.field select,.field textarea,.add-field input,.add-field select,.drawer-field input,.drawer-field select,.account-field input,.activity-add input,.new-message select,.search,.thread-compose textarea,.inbox-thread-compose textarea,.messages-compose textarea,.fb-new input,.ec-add input,.ai-add input,.ai-add select,.ai-add textarea,.ai-edit input,.ai-edit textarea){
  background-color:var(--gx-field);border-color:var(--gx-field-edge);box-shadow:var(--gx-field-inset);
  transition:border-color .25s var(--gx-ease),box-shadow .25s var(--gx-ease),background-color .25s var(--gx-ease);
}
html:not(#gx) :is(.field input,.field select,.field textarea,.add-field input,.add-field select,.drawer-field input,.drawer-field select,.account-field input,.activity-add input,.new-message select,.search,.thread-compose textarea,.inbox-thread-compose textarea,.messages-compose textarea,.fb-new input,.ec-add input,.ai-add input,.ai-add select,.ai-add textarea,.ai-edit input,.ai-edit textarea):focus{
  border-color:transparent;box-shadow:var(--gx-field-inset),var(--gx-glow);outline:none;
}
html:not(#gx) .assistant-inputwrap{background:var(--gx-field);border-color:var(--gx-field-edge);box-shadow:var(--gx-field-inset)}
html:not(#gx) .assistant-inputwrap:focus-within{border-color:transparent;box-shadow:var(--gx-field-inset),var(--gx-glow)}
html:not(#gx) .radio-row label{background:rgba(var(--ink-rgb),.03);border-color:var(--gx-edge);box-shadow:inset 0 1px 0 var(--gx-rim)}
html:not(#gx) .radio-row label:has(input:checked){background:rgba(var(--ink-rgb),.12);border-color:rgba(var(--ink-rgb),.3)}
html:not(#gx) :is(.picker,.drive-dropzone,.fb-drop){background-color:rgba(var(--ink-rgb),.025);border-color:rgba(var(--ink-rgb),.16)}
html:not(#gx) :is(.empty,.empty-state){background:rgba(var(--ink-rgb),.025);border-color:rgba(var(--ink-rgb),.14)}

/* ---- tables and rows ---- */
html:not(#gx) :is(table.list th,table.list td,.client-table th,.client-table td,.row,.inv-list li,.bill-history li,.activity-item,.drive-file){border-color:var(--gx-edge)}
html:not(#gx) :is(table.list tr.is-clickable,.client-table tr.is-clickable) td{transition:background .25s var(--gx-ease)}
html:not(#gx) :is(.d-project,.meeting-card,.tier,.ec-event){background:rgba(var(--ink-rgb),.03);border-color:var(--gx-edge);box-shadow:inset 0 1px 0 var(--gx-rim)}

/* ---- drawers, menus, dialogs: heavier glass ---- */
html:not(#gx) .drawer{
  background-color:var(--gx-pane-strong);background-image:var(--gx-sheen);border-left-color:var(--gx-edge);
  box-shadow:inset 1px 0 0 var(--gx-rim),-30px 0 80px -40px rgba(0,0,0,.8);
  -webkit-backdrop-filter:var(--gx-blur-strong);backdrop-filter:var(--gx-blur-strong);
}
html:not(#gx) .drawer-backdrop{background:rgba(10,9,8,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html[data-theme="light"]:not(#gx) .drawer-backdrop{background:rgba(60,52,42,.22)}
html:not(#gx) :is(.assistant-panel,.fb-move-box,.mt-menu){
  background-color:var(--gx-pane-strong);background-image:var(--gx-sheen);
  box-shadow:inset 0 1px 0 var(--gx-rim),0 0 0 1px var(--gx-edge),0 30px 70px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter:var(--gx-blur-strong);backdrop-filter:var(--gx-blur-strong);
}
html:not(#gx) .fb-move{background:rgba(10,9,8,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html:not(#gx) .assistant-launcher{background-image:var(--gx-gloss);box-shadow:0 14px 34px -12px rgba(0,0,0,.6);transition:background-color .2s var(--gx-ease),transform .5s var(--gx-spring)}
@media (hover:hover){html:not(#gx) .assistant-launcher:hover{transform:translateY(-2px) scale(1.04)}}
html:not(#gx) .toast{background-image:var(--gx-gloss);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:opacity .3s var(--gx-ease),transform .5s var(--gx-spring)}
html:not(#gx) .mt-more{background:var(--gx-pane-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---- the files area ---- */
html:not(#gx) .fb-preview{background:rgba(var(--ink-rgb),.05)}
html:not(#gx) .fb-card-body{background:linear-gradient(180deg,rgba(var(--ink-rgb),.02),rgba(var(--ink-rgb),0))}

/* ---- sign in and password pages: a glass card on the photo ---- */
html:not(#gx) .portal-card{
  background:rgba(24,23,21,.5);background-image:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 40%);
  border-color:rgba(242,240,236,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -40px rgba(0,0,0,.9),0 4px 14px -6px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
}
html:not(#gx) .portal-field input{box-shadow:inset 0 1px 2px rgba(0,0,0,.35);background:rgba(0,0,0,.26)}
html:not(#gx) .portal-field input:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.85),0 0 0 5px rgba(255,255,255,.12)}
html:not(#gx) .portal-status{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---- small things ---- */
html:not(#gx) ::selection{background:rgba(var(--ink-rgb),.22)}
html:not(#gx) *{scrollbar-width:thin;scrollbar-color:rgba(var(--ink-rgb),.22) transparent}
html:not(#gx) ::-webkit-scrollbar{width:10px;height:10px}
html:not(#gx) ::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
html:not(#gx) ::-webkit-scrollbar-track{background:transparent}

/* ---- phones and tablets ----
   iPhones zoom the page in when you tap a field whose text is under 16px,
   and the field stops fitting the screen. On touch screens every field
   uses 16px text. */
@media (pointer:coarse){
  html:not(#gx) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),textarea,select){font-size:16px}
}

/* Without frosted glass (older browsers, or "reduce transparency"), the
   panes are solid so text stays readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(#gx) :is(.panel,.stat,.stat-card,.inbox,.bill-item,.status-banner,.lock-icon,.sidebar,.card,.fb-card:not(.fb-folder-card),.folder-card){background-color:var(--panel)}
  html:not(#gx) :is(.drawer,.assistant-panel,.fb-move-box,.mt-menu){background-color:var(--dark)}
}
@media (prefers-reduced-transparency:reduce){
  html:not(#gx) :is(.panel,.stat,.stat-card,.inbox,.bill-item,.status-banner,.lock-icon,.sidebar,.card,.fb-card:not(.fb-folder-card),.folder-card){background-color:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
  html:not(#gx) :is(.drawer,.assistant-panel,.fb-move-box,.mt-menu){background-color:var(--dark)}
}
@media (prefers-reduced-motion:reduce){
  html:not(#gx) *{transition-duration:.01ms!important}
}