/* =====================================================================
   ProxyFoxy "glass" format – shared by every Foxy site (load it AFTER the site's own css)
   · desktop: a slim icon rail that opens on hover (Customize > Menu > Wide keeps it open)
   · phones: a tab bar at the bottom (built by foxnav.js from the menu), the full menu under "More"
   · glass cards, buttons, fields and windows · every theme, background and accent still works
   ===================================================================== */
:root{--rail:76px;--railw:262px;--gr:20px}
body{--glass:color-mix(in srgb,var(--panel) 88%,transparent);--glass-hi:var(--panel-hi);--gblur:blur(18px) saturate(140%);
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}

/* ---------- surfaces ---------- */
.card,.kpi,.panel{border-radius:var(--gr);background:var(--glass);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -28px rgba(0,0,0,.6)}
body.is-light .card,body.is-light .kpi,body.is-light .panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 36px -26px rgba(30,40,60,.35)}
.card h3{font-size:11.5px;letter-spacing:1.3px;font-weight:650}
.kpi{border-radius:18px;padding:14px 16px}
.kpi::before{top:14px;bottom:auto;left:16px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 18%,transparent)}
.kpi small{font:650 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:1.2px;padding-left:18px}
.kpi b{font-size:21px;font-weight:700;letter-spacing:-.3px}
.btn{border-radius:12px;padding:9px 15px;font-weight:500;backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur)}
.btn.icon{width:40px;height:40px;border-radius:12px}
.btn.primary,.btn.on{box-shadow:0 10px 24px -14px var(--acc)}
.field{border-radius:12px;padding:11px 13px}
.field:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
.modal{border-radius:24px;background:color-mix(in srgb,var(--modal) 92%,transparent);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.8)}
.modal-bg{background:rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.toast{border-radius:14px;padding:11px 18px}
.search{border-radius:14px;background:var(--glass);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur)}
.authcard{border-radius:26px;background:var(--glass);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}

/* ---------- top bar: the page name as a title ---------- */
.topbar{min-height:48px}
.here{font-size:15px}
.here .pulse,.here .lb{display:none}
.here > b,.here #here{font-size:24px;font-weight:700;letter-spacing:-.4px;color:var(--text)}
.topbar .clock{font-size:20px;letter-spacing:-.3px}
.hello{min-width:0}
.hello h1{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hello p{color:var(--muted);font-size:13.5px;margin-top:3px}

/* ---------- the menu ---------- */
.side{background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:var(--gblur);-webkit-backdrop-filter:var(--gblur)}
.nl{border-radius:12px;padding:9px 12px;gap:12px}
.nl svg{width:19px;height:19px}
.nl.on{background:color-mix(in srgb,var(--acc) 12%,var(--panel-hi));box-shadow:none;color:var(--text)}
.nl.on svg{color:var(--acc)}
body[data-theme=fox] .nl.on svg,body[data-theme=silver] .nl.on svg{color:#f28c33}
/* the links to the other Foxy apps: small glass tiles in each app's colour */
.nl[data-app] svg{box-sizing:content-box;padding:6px;margin:-6px 0 -6px -4px;border-radius:9px;width:16px;height:16px;
  color:color-mix(in srgb,var(--tc,#888) 72%,#fff);background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#888) 34%,transparent),color-mix(in srgb,var(--tc,#888) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--tc,#888) 40%,transparent)}
body.is-light .nl[data-app] svg{color:color-mix(in srgb,var(--tc,#888) 80%,#000)}
.nl[data-app].on{background:none;color:var(--text)}
.nl[data-app=apps]{--tc:#f28c33}.nl[data-app=drive]{--tc:#3b82f6}.nl[data-app=planner]{--tc:#8b5cf6}.nl[data-app=go]{--tc:#f59e0b}.nl[data-app=lab]{--tc:#10b981}.nl[data-app=account]{--tc:#ec4899}

@media (min-width:901px){
  /* The slim menu opens in two steps (foxnav.js): pointing at it for a moment adds .opening – it grows;
     when it has grown, .open shows the names. Leaving: the names go first, then it shrinks. */
  body:not(.menu-wide) .shell{grid-template-columns:var(--rail) minmax(0,1fr)}
  body:not(.menu-wide) .side{--ease:cubic-bezier(.22,.9,.24,1);width:var(--rail);overflow:hidden;z-index:40;
    transition:width .28s var(--ease),background-color .28s,box-shadow .28s}
  body:not(.menu-wide) .side.opening{width:var(--railw);background-color:color-mix(in srgb,var(--modal) 90%,transparent);box-shadow:30px 0 60px -30px rgba(0,0,0,.7)}
  body:not(.menu-wide) .sbrand{padding:16px 0 12px;align-items:flex-start;padding-left:17px;border-bottom-color:transparent}
  body:not(.menu-wide) .sbrand .logo{width:42px;height:42px}
  body:not(.menu-wide) .sbrand .logo::before{inset:-20%}
  body:not(.menu-wide) .sbrand h1,body:not(.menu-wide) .sbrand .sub,body:not(.menu-wide) .sbrand .vo{display:none}
  body:not(.menu-wide) .snav{padding:8px 16px;overflow-x:hidden;scrollbar-width:none}
  body:not(.menu-wide) .snav::-webkit-scrollbar{width:0}
  /* menu items: the lit background grows with the menu; names fade in only once it is open */
  body:not(.menu-wide) .nl{width:44px;padding:11px 12px;position:relative;white-space:nowrap;transition:width .28s var(--ease),background-color .2s,color .2s}
  body:not(.menu-wide) .side.opening .nl{width:calc(var(--railw) - 32px)}
  body:not(.menu-wide) .nl :is(span,small),body:not(.menu-wide) .sfoot .btn .lbl,
  body:not(.menu-wide) .side :is(.tree,.meter,.libsel,.mini,.cals,.secbtn,.sidehint,.railhide){opacity:0;transition:opacity .12s}
  body:not(.menu-wide) .side.open .nl :is(span,small),body:not(.menu-wide) .side.open .sfoot .btn .lbl,
  body:not(.menu-wide) .side.open :is(.tree,.meter,.libsel,.mini,.cals,.secbtn,.sidehint,.railhide){opacity:1;transition:opacity .2s ease-out}
  body:not(.menu-wide) .side:not(.open) :is(.tree,.meter,.libsel,.mini,.cals,.secbtn,.sidehint,.railhide){pointer-events:none}
  /* counters: a small bubble on the icon while closed, back in line when open */
  body:not(.menu-wide) .side:not(.open) .nl em{position:absolute;left:27px;top:4px;min-width:16px;height:16px;padding:0 4px;font-size:9.5px;line-height:15px;background:var(--red);border-color:var(--red);color:#fff}
  body:not(.menu-wide) .side:not(.open) .nl em:not(.r){background:var(--panel-hi);border-color:var(--line);color:var(--muted)}
  body:not(.menu-wide) .side.open .nl em{animation:fadein .2s ease-out}
  /* section names: a thin line while closed (same height, so nothing jumps) */
  body:not(.menu-wide) .snav .sec{white-space:nowrap;height:30px;padding:12px 10px 0;position:relative;transition:color .12s}
  body:not(.menu-wide) .side:not(.open) .snav .sec{color:transparent}
  body:not(.menu-wide) .side.open .snav .sec{transition:color .2s ease-out}
  body:not(.menu-wide) .snav .sec::before{content:"";position:absolute;left:8px;top:16px;width:28px;height:1px;background:var(--line);transition:opacity .2s}
  body:not(.menu-wide) .side.open .snav .sec::before{opacity:0}
  /* the buttons at the bottom: one column of equal squares that never move; they widen with the menu, names come after */
  body:not(.menu-wide) .sfoot{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 18px;border-top-color:transparent}
  body:not(.menu-wide) .sfoot span.grow{display:none}
  body:not(.menu-wide) .sfoot .btn{height:40px;min-width:40px;width:40px;padding:0 0 0 11px;justify-content:flex-start;gap:12px;flex:none;overflow:hidden;white-space:nowrap;
    transition:width .28s var(--ease),background-color .2s,border-color .2s}
  body:not(.menu-wide) .sfoot :is(.btn,#custBtn){flex:none;justify-content:flex-start}
  body:not(.menu-wide) .sfoot .btn svg{width:16px;height:16px}
  body:not(.menu-wide) .sfoot .btn .lbl{display:inline}
  body:not(.menu-wide) .side.opening .sfoot .btn:has(.lbl){width:calc(var(--railw) - 36px);padding-right:14px}
  body:not(.menu-wide) .sfoot .btn .lbl.rl{display:inline!important}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){body:not(.menu-wide) .side,body:not(.menu-wide) .side *{transition:none!important}}

/* ---------- profile pictures ---------- */
.nl img.avm{width:28px;height:28px;margin:-5px 0 -5px -4px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--tc,#888) 60%,transparent)}
.sbrand .sub .avs{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.sbrand .sub.has-av > i{display:none}
.ftabs button img.avm{width:24px;height:24px;border-radius:50%;object-fit:cover}

/* ---------- phones: tab bar ---------- */
.sfoot .btn .lbl.rl{display:none!important}
.ftabs{display:none}
@media (max-width:900px){
  body.has-tabs .sidebtn{display:none!important}
  body.has-tabs .main{padding-bottom:100px}
  .ftabs{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;justify-content:space-around;gap:2px;
    padding:8px 6px;border-radius:24px;background:color-mix(in srgb,var(--modal) 82%,transparent);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--line-hi);box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
  body.side-open .ftabs{display:none}
  body.has-tabs .toasts{bottom:calc(96px + env(safe-area-inset-bottom))}
  .ftabs button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;border:0;background:none;color:var(--muted);font-size:10.5px;font-weight:500;cursor:pointer;border-radius:16px;position:relative}
  .ftabs button span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ftabs button svg{width:22px;height:22px}
  .ftabs button.on{color:var(--text)}
  .ftabs button.on svg{color:var(--acc)}
  body[data-theme=fox] .ftabs button.on svg,body[data-theme=silver] .ftabs button.on svg{color:#f28c33}
  .ftabs button em{position:absolute;top:0;left:calc(50% + 6px);font-style:normal;font-size:9.5px;font-weight:700;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff}
  .side{border-radius:0 24px 24px 0}
}

/* ---------- glass icons (app tiles, quick actions …) ---------- */
.gico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;color:color-mix(in srgb,var(--tc,#888) 70%,#fff);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#888) 32%,#1d1d22),color-mix(in srgb,var(--tc,#888) 9%,#111114));
  border:1px solid color-mix(in srgb,var(--tc,#888) 42%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 26px -14px var(--tc,#888);overflow:hidden;position:relative}
.gico svg{width:54%;height:54%}
.gico img{width:66%;height:66%;object-fit:contain}
.gico img.photo{width:100%;height:100%;object-fit:cover}
body.is-light .gico{color:color-mix(in srgb,var(--tc,#888) 85%,#000);background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#888) 22%,#fff),color-mix(in srgb,var(--tc,#888) 8%,#fff));box-shadow:inset 0 1px 0 #fff,0 10px 22px -14px var(--tc,#888)}
body[data-theme=redfox] .gico{background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#888) 40%,#5a1d08),color-mix(in srgb,var(--tc,#888) 14%,#3d1405))}

@media (max-width:560px){.topbar .meta{display:none}}
@media (prefers-reduced-motion:reduce){.side{transition:none!important}}