/* Glimpse web — the Glimpse app's look (Nov 10 2026 preview): Gmail's Material 3 layout in Glimpse wine.
   Values from the app (files/glimpse-app/native ui/Theme.kt, style "Glimpse" = the app's default). Loaded after app.css. */
:root{--a:#6A1835;--page:#F8F2F3;--surf:#fff;--cLow:#FCF8F8;--cHigh:#F4EBEC;--cHighest:#EBE0E2;--pc:#FFD8DF;--onPc:#6A1835;--sc:#FCDDE2;--onSc:#32101A;--ink:#1F1F1F;--mut:#484546;--line:#E6E0E1;--outline:#CAC4C5;--gold:#DDB25F;--goldL:#F9E9BF;--goldD:#8A6516;--r:16px;--side:256px}
html.dark{--page:#131314;--surf:#1E1F20;--cLow:#1B1B1B;--cHigh:#282A2C;--cHighest:#353334;--pc:#6A1835;--onPc:#FFD8DF;--sc:#733144;--onSc:#FFD8DF;--ink:#E3E3E3;--mut:#C8C4C5;--line:#353334;--outline:#474445;--bg:#131314;--card:#1E1F20;--grey:#282A2C}
html{--bg:var(--page);--card:var(--surf);--grey:var(--cHigh);--aSoft:var(--sc)}
html,body{background:var(--page);color:var(--ink);font-family:"Google Sans","Roboto",system-ui,-apple-system,"Segoe UI",sans-serif}
.gw .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;height:64px;padding:8px 12px;background:var(--page);color:var(--ink);box-shadow:none}
.gw .top .iconbtn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.gw .top .lockup{height:30px;display:block}
.gw .brandbox{display:flex;align-items:center;gap:6px;min-width:0}
.gw .brandbox a{display:flex}
html:not(.dark) .gw .lk-dark,html.dark .gw .lk-light{display:none}
.gw .topfill{flex:1}
.gw .prevtag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--goldL);color:#3A2A00;white-space:nowrap}
html.dark .gw .prevtag{background:#5A4513;color:var(--goldL)}
.gw .who{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--a);color:#fff;font-weight:600;font-size:15px}
#app.gw{display:block}
.gw .layout{display:block}
.gw .side{display:block;position:fixed;top:64px;left:0;bottom:0;width:var(--side);padding:8px 12px 16px 8px;overflow-y:auto;background:var(--page);z-index:15;height:auto;border-right:0;flex-direction:column;transform:translateX(-105%);transition:transform .2s}
.gw.drawer .side{transform:none;box-shadow:0 8px 28px rgba(0,0,0,.25);border-radius:0 16px 16px 0}
.gw .scrim{display:none}.gw.drawer .scrim{display:block;position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.32);z-index:14}
.gw .nav{display:flex;flex-direction:column;gap:0}
.gw .nav a{flex:none;flex-direction:row;justify-content:flex-start;gap:14px;height:40px;padding:0 16px 0 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;align-items:center}
.gw .nav a svg{width:20px;height:20px;flex:none}
.gw .nav a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.gw .nav a.on{background:var(--sc);color:var(--onSc);font-weight:700}
.gw .nav .navsec{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:14px 18px 6px}
.gw .nav .navhr{height:1px;background:var(--line);margin:8px 12px}
.gw .nav .pro{margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--goldL);color:#3A2A00}
.gw .nav .cnt{margin-left:auto;font-size:12px;font-weight:600;color:var(--mut)}
.gw .tabs{display:none}
.gw .mainwrap{flex:1;min-width:0;padding:0 12px 24px}
.gw .pagehead{display:flex;align-items:center;gap:6px;padding:4px 4px 10px}
.gw .pagehead h1{margin:0;font-size:22px;font-weight:400;flex:1}
.gw main{max-width:none;padding:0;margin:0}
.gw .card{background:var(--surf);border:0;border-radius:var(--r);box-shadow:none}
.gw .sec{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--a);margin:20px 8px 8px}
html.dark .gw .sec{color:#FFB0C2}
.gw .search{background:var(--cHigh);border:0;border-radius:999px;box-shadow:none;padding:0 16px;height:48px}
.gw .chip{background:transparent;border:1px solid var(--outline);border-radius:8px;color:var(--ink);font-weight:500}
.gw .chip.on{background:var(--sc);border-color:var(--sc);color:var(--onSc)}
.gw .btn{border-radius:999px;padding:10px 20px;background:var(--a);font-weight:600}
.gw .btn.danger{background:var(--badS);color:var(--bad)}
.gw .sec small{margin-left:8px;color:var(--mut)}
.gw .btn.sec2{background:var(--pc);color:var(--onPc)}
.gw .btn.ghost{background:transparent;color:var(--a);border:1px solid var(--outline)}
html.dark .gw .btn.ghost{color:#FFB0C2}
.gw .row{background:transparent;border-bottom:1px solid var(--line)}
.gw .row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.gw .row.sel{background:var(--sc)}
.gw .st.acc{background:var(--sc);color:var(--onSc)}
.gw .list{background:var(--surf)}
.gw .hero{background:var(--a);color:#fff;border-radius:20px;padding:18px 20px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:12px}
.gw .hero .big1{font-size:34px;font-weight:800;line-height:1}
.gw .hero .of{font-size:16px;opacity:.9;margin-left:6px}
.gw .hero .hs{display:flex;gap:18px;margin-left:auto;font-size:13px;opacity:.95}
.gw .hero .hs b{display:block;font-size:20px;font-weight:700}
.gw .hero .bar{flex-basis:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}.gw .hero .bar i{display:block;height:100%;background:var(--gold)}
.gw .split{gap:16px}
.gw .detailpane{background:var(--surf)}
.gw .ev .evi{background:#C4EED0;color:#146C2E}
.gw .si{border-color:var(--line)}
/* new web screens */
.gw .tlist .titem{display:flex;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;color:inherit;text-decoration:none}
.gw .tlist .titem:last-child{border-bottom:0}
.gw .tlist .titem:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.gw .tlist .titem.on{background:var(--sc)}
.gw .tlist .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pc);color:var(--onPc)}
.gw .tlist .ic svg{width:20px;height:20px}
.gw .tlist .tm{flex:1;min-width:0}.gw .tlist .tt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gw .tlist .ts{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw .tlist .tn{flex:none;font-size:13px;color:var(--mut);text-align:right}
.gw .two{display:grid;grid-template-columns:1fr;gap:16px}
.gw .pane{padding:18px 20px;min-height:200px}
.gw .pane h2{margin:0 0 10px;font-size:20px;font-weight:500}
.gw .fld{display:block;margin:0 0 12px}.gw .fld span{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin:0 0 4px 2px}
.gw .fld input{width:100%;border:1px solid var(--outline);background:var(--surf);border-radius:10px;padding:11px 12px;color:var(--ink)}
.gw .rich{min-height:220px;border:1px solid var(--outline);border-radius:10px;padding:12px;background:var(--surf);color:var(--ink);overflow:auto;line-height:1.5}
.gw .rich:focus{outline:2px solid var(--a)}
.gw .chatq{display:flex;justify-content:flex-end;margin:12px 0}.gw .chatq div{max-width:78%;background:var(--pc);color:var(--onPc);border-radius:18px 18px 4px 18px;padding:10px 14px;white-space:pre-wrap}
.gw .chata{margin:6px 0 16px;display:flex;gap:10px}.gw .chata .spark{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--goldL);color:var(--goldD)}
.gw .chata .spark svg{width:16px;height:16px}
.gw .chata .ans{flex:1;min-width:0;white-space:pre-wrap;line-height:1.55}
.gw .ronly{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mut);background:var(--cHigh);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.gw .lk{word-break:break-all}
.gw .loginwrap{max-width:440px;margin:6vh auto}
@media (min-width:1000px){
  .gw .side{transform:none;box-shadow:none;border-radius:0}
  .gw .mainwrap{margin-left:var(--side);padding:0 16px 24px 4px}
  .gw .menubtn{display:none}
  .gw.drawer .scrim{display:none}
  .gw .two{grid-template-columns:minmax(300px,380px) 1fr}
}
@media (min-width:1000px) and (max-width:1199px){.gw{--side:220px}}
@media (max-width:599px){.gw .prevtag{display:none}.gw .top .lockup{height:26px}}
.gw.nolog .side,.gw.nolog .menubtn{display:none}.gw.nolog .mainwrap{margin-left:0}

/* Nov 10 2026 (Mechel, every website): the menu icon at the top left closes/opens the side menu on a wide screen too; remembered (gwSideMin). */
@media (min-width:1000px){
  .gw .menubtn{display:grid}
  .gw .side{transition:transform .2s ease}
  .gw .mainwrap{transition:margin-left .2s ease}
  .gw.sidemin .side{transform:translateX(-105%)}
  .gw.sidemin .mainwrap{margin-left:0;padding-left:16px}
}
.gw.nolog .menubtn{display:none}

/* Nov 11 2026 (Mechel): the Glimpse logo + wordmark bigger, in proportion to the side menu (≈60% of its width), and it is the menu toggle */
.gw .brandbox a{cursor:pointer;border-radius:12px;padding:2px 4px}
.gw .brandbox a:hover{background:var(--cHigh)}
.gw .top .lockup{height:34px}
@media (min-width:1000px){.gw .top .lockup{height:46px}.gw .menubtn{display:none}.gw .brandbox{width:calc(var(--side) - 12px)}} /* wide: the logo IS the one top-left control (steer 01:54Z) */
@media (min-width:1000px) and (max-width:1199px){.gw .top .lockup{height:40px}}
@media (max-width:599px){.gw .top .lockup{height:32px}}

/* Nov 11 2026 (Mechel 9:02 PM, every site): no hamburger anywhere — the logo is the control. Wide screens: open = logo + wordmark
   and the full menu; pressed = a thin rail (68px) with the app icon on top and section icons only (never hidden completely). Phone:
   the logo opens/closes the drawer. Remembered (gwSideMin). */
.gw .menubtn{display:none!important}
.gw .top .railicon{display:none;width:40px;height:40px;border-radius:11px}
@media (min-width:1000px){
  .gw{--rail:68px}
  .gw .side{transition:transform .2s ease,width .2s ease,padding .2s ease}
  .gw.sidemin .side{transform:none;width:var(--rail);padding:8px 10px 16px;overflow-x:hidden}
  .gw.sidemin .mainwrap{margin-left:var(--rail);padding-left:12px}
  .gw.sidemin .nav a{justify-content:center;gap:0;padding:0;width:48px;height:48px;margin:0 auto 2px;border-radius:14px}
  .gw.sidemin .nav a span,.gw.sidemin .nav .navsec{display:none}
  .gw.sidemin .nav .navhr{margin:8px 4px}
  .gw.sidemin .brandbox{width:44px;justify-content:center}
  .gw.sidemin .brandbox a{padding:0}
  .gw.sidemin .top .lockup{display:none!important}
  .gw.sidemin .top .railicon{display:block}
}

/* Nov 11 2026 (Mechel 9:19 PM — nothing jumps): the email pane / template / chat pane stays in view under the top bar while the
   list scrolls, scrolls inside itself, and never hands its scroll to the page; the menu's own scroll never scrolls the page behind. */
@media (min-width:900px){
  .gw .detailpane{top:76px;max-height:calc(100vh - 88px);overscroll-behavior:contain}
  .gw .two>.pane{position:sticky;top:76px;max-height:calc(100vh - 88px);overflow:auto;overscroll-behavior:contain}
}
.gw .detailpane.stale>*{opacity:.55;transition:opacity .12s}
.gw .side{overscroll-behavior:contain}
.gw .list{overflow-anchor:auto}