/* web-shell-sidebar.css - PLAN 002, THE THREE BROWSER LAYOUTS.
 *
 * ADDITIVE OVERRIDE LAYER. member.html's own <style> block is owned by other agents right now, so nothing
 * in this file edits an existing rule - every rule here is a NEW rule that beats an old one on natural
 * specificity. There is not one !important in this file. Where a base rule had to be beaten the winning
 * selector is written out and its specificity is noted in the comment above it.
 *
 * SCOPE, AND IT IS THE WHOLE SAFETY ARGUMENT. Every selector below starts with
 * :root[data-ui-surface="web-app"]. There are ZERO exceptions in this file - the three agreed unscoped
 * exceptions (the --web-surface-css sentinel, #webRail[hidden], #webScrim[hidden]) all live in
 * web-surface.css and are not repeated here. member.html and widget.html are loaded verbatim by the
 * packaged Android app, the packaged iOS app, the marketing shell, the floating launcher and the
 * in-course embeds. None of those five ever carries the marker, so none of them can see a single
 * declaration in this file. An unscoped rule here would change all five.
 *
 * NO MEDIA QUERIES, DELIBERATELY. The width bands are data-ui-layout="wide"|"rail"|"narrow", set once by
 * web-surface.js from root.clientWidth. A @media block here would be a SECOND width authority, and this
 * file already has the receipt for what that costs: member.html:1467 records the day drawerMode()'s
 * predicate and the min-width:1025px CSS block disagreed and the sidebar opened on top of the chat.
 * One owner. The CSS reads the attribute; it never measures.
 *
 * LOADS AFTER web-surface.css (which defines every --web-* token used here) and pairs with
 * web-shell-sidebar.js, which owns data-ui-nav.
 */

/* Sidebar-only type steps. The base web layer deliberately has no history/secondary pair. */
:root[data-ui-surface="web-app"]{
  --web-fs-history:var(--fs-nav-control); --web-lh-history:var(--line-compact);
  --web-fs-secondary:var(--fs-plan-caption); --web-lh-secondary:var(--line-compact)
}

/* ==================================================================================================
 * 1. THE CONTENT OFFSET - 240 / 56 / 56 / 0
 * ================================================================================================
 * Beats, in the base file:
 *   @media(min-width:1025px){ .main{margin-left:var(--sidew)} }          (0,1,0)
 *   @media(min-width:1025px){ .side.collapsed ~ .main{margin-left:0} }   (0,3,0)
 * with (0,4,0) and (0,5,0). A @media block adds no specificity, so no !important is needed to win.
 *
 * transition:none is plan 002's "main width changes once, not each animation frame". The base file
 * animates margin-left over --dur-pop, which relayouts and repaints the whole conversation - including
 * the iframe - on every frame of the slide. The contract's sidebar role (200ms translate) moves the
 * DRAWER only; content geometry changes immediately. */
:root[data-ui-surface="web-app"] .main{ transition:none; min-width:0 }

:root[data-ui-surface="web-app"][data-ui-nav="expanded"] .main{ margin-left:var(--web-sidebar-expanded) }

/* wide+rail and wide+overlay both keep the measured rail column; at layout=rail the rail offset is
   permanent - opening the sidebar OVERLAYS its extra width rather than squeezing the conversation
   (contract: "expansion overlays its additional width ... rather than squeezing the conversation"). */
:root[data-ui-surface="web-app"][data-ui-layout="wide"][data-ui-nav="rail"] .main,
:root[data-ui-surface="web-app"][data-ui-layout="wide"][data-ui-nav="overlay"] .main,
:root[data-ui-surface="web-app"][data-ui-layout="rail"] .main{ margin-left:var(--web-sidebar-rail) }

/* Below 900 there is no permanent rail, so the conversation owns the full width in every nav state. */
:root[data-ui-surface="web-app"][data-ui-layout="narrow"] .main{ margin-left:0 }

/* ==================================================================================================
 * 2. THE SIDEBAR ITSELF - 240..360 expanded, min(280, 100vw-32px) as an overlay drawer
 * ================================================================================================
 * #side is (1,1,0)/(1,2,0) against .side's (0,1,0), so the id alone carries it.
 * box-shadow:none at rest: the base file paints a 24px ambient shadow on a sidebar that is a docked
 * COLUMN at desktop widths, where there is nothing to cast onto. The shadow comes back below, only in
 * the state that is genuinely floating over the conversation. */
:root[data-ui-surface="web-app"] #side{ width:var(--web-sidebar-expanded); box-shadow:none }

/* 280px, capped so a 280px-wide viewport still exposes 32px of scrim to tap out on (contract line 18,
   plan 002 acceptance: "at 280px viewport width 248px, with 32px visible scrim"). */
:root[data-ui-surface="web-app"][data-ui-layout="narrow"] #side{
  width:min(var(--web-drawer),var(--web-drawer-cap))
}

/* THE ONLY FLOATING STATE. Above the rail (30) and above the scrim (40). The elevation shadow is the
   base file's own overlay value, not a new one - it is what separates a drawer from the page once the
   drawer is opaque and can no longer be seen through (member.html's D3 note). */
:root[data-ui-surface="web-app"][data-ui-nav="overlay"] #side{
  z-index:45; box-shadow:0 0 40px rgba(0,0,0,.18)
}

/* KEYBOARD STATE CHANGES ARE IMMEDIATE, POINTER ONES SLIDE (plan 002: "Sidebar travel uses existing
   transform 200ms only when user clicks/taps; keyboard state change is immediate"). The attribute is
   set by web-shell-sidebar.js for exactly one frame around a keyboard-driven change. Scoped, so it can
   never reach a surface without the marker even if the attribute leaked. */
:root[data-ui-surface="web-app"][data-web-nav-immediate] #side{ transition:none }

/* ==================================================================================================
 * 3. THE SCRIM
 * ================================================================================================
 * The base file only ever declares .scrim.show inside @media(max-width:820px) and the short-landscape
 * block; everywhere else .scrim is display:none (member.html:1448). So between 821 and 1199 - which is
 * most of the rail band and the top of the narrow band - an overlay drawer had NO scrim at all: nothing
 * dimmed, and nothing to click to get out. (0,4,0) beats both .scrim (0,1,0) and .scrim.show (0,2,0). */
:root[data-ui-surface="web-app"] .scrim.show{
  display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40
}

/* ==================================================================================================
 * 4. THE MEASURED RAIL
 * ================================================================================================
 * #webRail is built by web-shell-sidebar.js and exists in no other surface. It defaults to hidden;
 * web-surface.css's unscoped #webRail[hidden]{display:none!important} is what guarantees that a
 * teardown - or a marker that never arrives - can never leave an unstyled rail on screen.
 *
 * width:56px WITH box-sizing:border-box and a 1px border = 56px of occupied column, which is exactly
 * the --web-sidebar-rail that .main is offset by. (The base file sets *{box-sizing:border-box} at
 * member.html:177, but this element is new, so it says so itself rather than inheriting an assumption.) */
:root[data-ui-surface="web-app"] #webRail{
  position:fixed; inset:0 auto 0 0; box-sizing:border-box;
  width:var(--web-sidebar-rail); z-index:30;
  background:var(--side); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding:calc(8px + var(--sat,0px)) 0 calc(8px + var(--sab,0px)); gap:4px;
  overflow:hidden
}

/* R2-W-06/W-12 Table 1: the rail follows ChatGPT's measured 36px row with a 20px glyph. */
:root[data-ui-surface="web-app"] #webRail .web-rail-btn{
  box-sizing:border-box; width:var(--sb-nav-row-h-web); height:var(--sb-nav-row-h-web);
  min-width:var(--sb-nav-row-h-web); min-height:var(--sb-nav-row-h-web); flex:none;
  padding:0; border:0; border-radius:10px; background:transparent; color:var(--txt);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font:inherit; line-height:1
}
/* R3-W-15a, THE ROOT CAUSE OF THE ROUND 2 MISS. syncRailAvailability() has always set b.hidden on a
 * rail button it does not want, and that has always done NOTHING here: the rule above declares
 * display:inline-flex at (1 id, 2 class) and the UA's [hidden]{display:none} is (0,1,0), so the
 * button kept painting while its `hidden` property read true. Every rig that asked the DOM agreed
 * the button was hidden; Aye's screen showed six. That is why R2-W-05c's locked answer looked
 * shipped and was not. This rule is (1 id, 3 class) and it is what actually removes the button.
 * The same fix retires the signed-in blind spot - a rail action whose original is unavailable was
 * equally still clickable. */
:root[data-ui-surface="web-app"] #webRail .web-rail-btn[hidden]{ display:none }
:root[data-ui-surface="web-app"] #webRail .web-rail-btn svg{
  width:var(--sb-icon-rail); height:var(--sb-icon-rail); display:block; flex:none; fill:none; stroke:currentColor
}
/* R3-W-03 (Aye: "when side bar is closed I want the profile logo to be the logo we have on main page
   when side menu is opened. not generic human logo"). The rail's bottom control is the SAME disc as the
   expanded footer, built from #avatar's own children so a photo, a letter or a future change to either
   cannot make the two surfaces disagree. Signed-in only - R3-W-15a leaves the signed-out rail with a
   drawer glyph and a settings glyph and nothing else, so a signed-out student never reaches this. */
:root[data-ui-surface="web-app"] #webRail .web-rail-av{
  box-sizing:border-box; width:var(--sb-avatar-web); height:var(--sb-avatar-web); flex:none;
  border-radius:50%; background:var(--av-bg); color:var(--av-ink);
  display:grid; place-items:center; overflow:hidden;
  font-weight:800; font-size:var(--fs-sub); line-height:1
}
:root[data-ui-surface="web-app"] #webRail .web-rail-av img{ width:100%; height:100%; object-fit:cover; display:block }
:root[data-ui-surface="web-app"] #webRail .web-rail-btn:hover{ background:var(--line2) }
:root[data-ui-surface="web-app"] #webRail .web-rail-btn:active{ transform:scale(.96) }
:root[data-ui-surface="web-app"] #webRail .web-rail-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px
}
/* Account actions stay at the bottom (contract: "Keep account actions at the bottom"). */
:root[data-ui-surface="web-app"] #webRail .web-rail-gap{ flex:1 1 auto; min-height:8px }

/* Belt and braces behind the hidden attribute the JS owns. If the two ever disagree the rail is
   invisible, which is the safe direction. */
:root[data-ui-surface="web-app"][data-ui-layout="narrow"] #webRail,
:root[data-ui-surface="web-app"][data-ui-nav="expanded"] #webRail{ display:none }

/* ==================================================================================================
 * 5. ONE VISIBLE TOGGLE
 * ================================================================================================
 * The base file shows BOTH the header hamburger (#menu, display:inline-flex at member.html:742, with
 * no desktop rule hiding it) and the in-sidebar collapse chevron (#collapse). At wide and rail that is
 * two controls for one job sitting 240px apart. Plan 002: at wide/rail the sidebar's own collapse (or,
 * when the sidebar is away, the rail's Menu) is THE toggle; below 900 the header Menu is.
 *
 * (0,3,1) against .menu (0,1,0) and .bar .menu (0,2,0) inside @media(max-width:820px).
 * web-shell-sidebar.js moves focus off #menu before this rule can hide a focused button. */
:root[data-ui-surface="web-app"][data-ui-layout="wide"] #menu,
:root[data-ui-surface="web-app"][data-ui-layout="rail"] #menu{ display:none }
:root[data-ui-surface="web-app"][data-ui-layout="narrow"] #menu{
  display:inline-flex; width:44px; height:44px
}

/* ==================================================================================================
 * 6. SIDEBAR DENSITY - 14/20 navigation, 8px horizontal inset, 32px lockup
 * ================================================================================================
 * R2-W-06/W-12 Table 1: web nav is the measured 36px row at 14/20; Android retains its own 44px floor. */
:root[data-ui-surface="web-app"] .navlink,
:root[data-ui-surface="web-app"] .newchat{
  box-sizing:border-box; font-size:var(--web-fs-nav); line-height:var(--web-lh-nav);
  font-weight:var(--fw-sb-row-web);min-height:var(--sb-nav-row-h-web)
}
:root[data-ui-surface="web-app"] .navlink{ margin:0 8px; padding:6px 10px }
:root[data-ui-surface="web-app"] .newchat{ margin:6px 8px 8px; padding:7px 12px }

/* R2-W-06/W-12 Table 1: 44px collapse control inside the 48px measured top bar. */
:root[data-ui-surface="web-app"] .side .top{box-sizing:border-box;height:var(--sb-topbar-web);min-height:var(--sb-topbar-web);padding:2px 8px}
:root[data-ui-surface="web-app"] .side .top img{ height:var(--sb-logo-h-web) }
:root[data-ui-surface="web-app"] .side .pbh{ padding:0 10px 8px }
:root[data-ui-surface="web-app"] .side .scroll{
  padding:4px 0 8px; scrollbar-width:thin; scrollbar-color:var(--mut) transparent; scrollbar-gutter:stable
}
:root[data-ui-surface="web-app"] #scroll::-webkit-scrollbar{ width:8px }
:root[data-ui-surface="web-app"] #scroll::-webkit-scrollbar-thumb{
  background:var(--mut); border-radius:var(--r-pill); border:2px solid transparent; background-clip:padding-box
}
/* R3-W-05a: 14px/500 is ChatGPT web's MEASURED section header (REFERENCE-SIZES Table 1). The 24px
   box is unchanged - Aye's complaint was the WORD, and Claude's box is 24px. */
:root[data-ui-surface="web-app"] .seclabel{height:var(--sb-section-box-web);min-height:var(--sb-section-box-web);padding:0 12px;font-size:var(--fs-sb-section-web);font-weight:var(--fw-sb-section-web);text-transform:none}
:root[data-ui-surface="web-app"] .section-toggle{min-height:var(--sb-section-box-web)}
:root[data-ui-surface="web-app"] .section-open{flex-basis:24px;width:24px;height:24px}
:root[data-ui-surface="web-app"] .view-all-conversations{min-height:32px;font-size:var(--fs-sb-row-web);font-weight:400}
:root[data-ui-surface="web-app"] .side .foot{ box-sizing:border-box;min-height:var(--sb-footer-h-web);padding:4px 8px }

/* The web footer keeps identity at bottom-left and Download App at bottom-right. Membership is inside
   Profile, so the existing entitlement owner remains callable but no longer competes as a footer row. */
:root[data-ui-surface="web-app"] #sideFoot{
  display:flex; align-items:center; justify-content:space-between; gap:8px
}
:root[data-ui-surface="web-app"] #sideFoot > :not(#acct):not(#getApp):not(#signupSettings){
  position:absolute; visibility:hidden; pointer-events:none
}
:root[data-ui-surface="web-app"] #sideFoot #lifeBtn{
  display:none
}
:root[data-ui-surface="web-app"] #sideFoot #acct{
  box-sizing:border-box; order:1;flex:1 1 auto; width:auto; min-width:0; min-height:44px;
  margin:0; padding:4px 8px; justify-content:flex-start; gap:8px; border-radius:10px; cursor:pointer;
  transition:transform var(--dur-tap) var(--ease-out)
}
:root[data-ui-surface="web-app"] #sideFoot #acct:hover{ background:var(--line2) }
:root[data-ui-surface="web-app"] #sideFoot #acct:active{ transform:scale(.96) }
:root[data-ui-surface="web-app"] #sideFoot #acct:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px
}
:root[data-ui-surface="web-app"] #acct .who{display:flex;min-width:0;flex:1 1 auto}
:root[data-ui-surface="web-app"] #acctName,
:root[data-ui-surface="web-app"] #acctPlan{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-ui-surface="web-app"] #acctName{font-size:var(--fs-sb-name);font-weight:400}
:root[data-ui-surface="web-app"] #acctPlan{font-size:var(--fs-sb-plan)}
/* THE WEB FOOTER LETTER WAS NOT CENTRED EITHER, AND NOBODY HAD SEEN IT (R3-W-02d, 2026-09-10).
   member.html:2014 records this exact defect on the ANDROID footer: .acct .av centres with display:grid
   + place-items:center, and place-items' justify half is `justify-items`, which a FLEX container simply
   ignores. This line re-declares display:inline-flex on the web footer avatar, so the web disc had the
   identical bug - the initial sat hard against the left edge, half of it clipped by the border-radius.
   MEASURED, not eyeballed: the glyph's own centre was 8.37px left of the 24px disc's centre, in BOTH
   themes. The gradient and the ring this replaces hid how wrong it looked; a flat fill does not.
   The Android rule was fixed by adding the flex-axis pair; this is the same fix on the same class of
   container. Any future rule that changes `display` here must bring its own centring with it. */
:root[data-ui-surface="web-app"] #avatar{
  display:inline-flex; flex:none;
  align-items:center; justify-content:center; text-align:center; line-height:1
}
:root[data-ui-surface="web-app"] #avatar{width:var(--sb-avatar-web);height:var(--sb-avatar-web)}
:root[data-ui-surface="web-app"] #sideFoot #getApp{display:block;order:2;flex:none;margin:0}
:root[data-ui-surface="web-app"] #sideFoot #getAppBtn{
  box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
  border:0;border-radius:10px;background:transparent;color:var(--txt);display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer
}
:root[data-ui-surface="web-app"] #sideFoot #getAppBtn:hover{background:var(--line2)}
:root[data-ui-surface="web-app"] #sideFoot #getAppBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* SB-10: one 8px pointer strip belongs to the wide expanded sidebar only. Its visible affordance is
   deliberately the separator focus ring; no decorative rule is left under Resources. */
:root[data-ui-surface="web-app"] .web-sidebar-resize{
  display:none;position:absolute;top:0;right:-4px;bottom:0;width:8px;z-index:2;cursor:ew-resize;touch-action:none
}
:root[data-ui-surface="web-app"][data-ui-layout="wide"][data-ui-nav="expanded"] .web-sidebar-resize{display:block}
:root[data-ui-surface="web-app"] .web-sidebar-resize:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px
}
:root[data-ui-surface="web-app"][data-web-resizing] #side,
:root[data-ui-surface="web-app"][data-web-resizing] #side *{user-select:none}

/* C03: one anchored account menu, clamped in JS because its anchor and the saved sidebar width move. */
:root[data-ui-surface="web-app"] .web-account-menu{
  position:fixed;z-index:92;width:264px;padding:var(--space-1);border:var(--stroke) solid var(--line);
  border-radius:var(--r-card);background:var(--bg);box-shadow:0 var(--space-4) var(--space-6)
    color-mix(in srgb,var(--txt) 24%,transparent)
}
:root[data-ui-surface="web-app"] .web-account-menu[hidden]{display:none}
/* R3-W-04 / R3-W-15b (Aye: "the logo and text is too large, the logo and it's too close").
 * The 20px glyph below was ALREADY the measured target (REFERENCE-SIZES Table 1, "Profile popup":
 * Claude rows 264x32, icon 20px, label 14px). Two things had drifted:
 *   weight - 700 against a measured 400. At 14px a bold label reads a size larger than it is, which
 *            is why "too large" was said about text that is already 14px.
 *   gap    - there was none. display:flex with no gap put the glyph's ink against the word's ink.
 * 8px is MEASURED off scratchpad/ref-real/web/claude-04-profile-menu.png (1440x900, DPR 1): on the
 * Settings / Language / Get help / Upgrade plan rows the icon box runs x=22..42 (16px of ink at
 * 24..39, centred in its 20px box) and every label's first ink column is x=51 with ~1px of left side
 * bearing, so the text box starts at 50. 50 - 42 = 8px. Not picked, read.
 * The 44px row height is deliberately NOT reduced to the reference's 32px: this file's touch floor
 * outranks it and the exit test does not ask for it. Named here so it is a choice, not an oversight. */
:root[data-ui-surface="web-app"] .web-account-menu button,
:root[data-ui-surface="web-app"] .web-account-menu a{
  display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 var(--space-3);border:0;
  border-radius:var(--r-row);background:transparent;color:var(--txt);font:inherit;
  font-size:var(--fs-nav-control);font-weight:400;text-align:left;text-decoration:none;cursor:pointer
}
:root[data-ui-surface="web-app"] .web-account-menu .ic{width:20px;height:20px;flex:none;color:var(--mut)}
:root[data-ui-surface="web-app"] .web-account-menu button:hover,
:root[data-ui-surface="web-app"] .web-account-menu a:hover,
:root[data-ui-surface="web-app"] .web-account-menu button:focus-visible,
:root[data-ui-surface="web-app"] .web-account-menu a:focus-visible{background:var(--line2)}
:root[data-ui-surface="web-app"] .web-account-menu .danger{color:var(--danger)}
:root[data-ui-surface="web-app"] .web-account-about{padding:0 var(--space-2) var(--space-1)}
:root[data-ui-surface="web-app"] .web-account-about[hidden]{display:none}
:root[data-ui-surface="web-app"] .web-account-about a{font-weight:400}
:root[data-ui-surface="web-app"] .rowmenu{min-width:var(--sb-menu-w-web)}
:root[data-ui-surface="web-app"] .rowmenu button{min-height:max(44px,var(--sb-menu-row-h-web));font-size:var(--fs-sb-row-web)}
:root[data-ui-surface="web-app"] .rowmenu button .ic{width:var(--sb-icon-menu-web);height:var(--sb-icon-menu-web)}

/* ==================================================================================================
 * 7. THE SAVED ROWS - a real primary button, and the reason this plan exists
 * ================================================================================================
 * The base row is a <div class="item"> carrying an onclick, with a <button class="kebab"> inside it.
 * A div with an onclick is not focusable and not activatable from a keyboard, so the ONLY thing Tab
 * could reach in a saved row was More. Plan 002's live-browser receipt: "Saved title DIVs are skipped
 * while More is reachable."
 *
 * web-shell-sidebar.js wraps the existing verdict/label/pin children in a real <button
 * class="web-history-open">, leaving the kebab as its SIBLING - never nested, which is the other half
 * of the defect. The row's own handler is left in place and the button's click bubbles into it, so the
 * open path, its guards and its markActive/closeSet/openInWidget sequence are the file's own code,
 * unchanged and un-duplicated.
 *
 * padding:0 on .item, padding:0 8px on the button: the button now owns the whole hit area, so the row's
 * padding would be dead space outside the control. Table 1 fixes the web row at the measured 36px. */
:root[data-ui-surface="web-app"] .item{
  box-sizing:border-box; margin:0 8px; padding:0 4px; gap:0; min-height:var(--sb-row-h-web);
  font-size:var(--fs-sb-row-web);line-height:var(--lh-sb-row-web)
}
:root[data-ui-surface="web-app"] .web-history-open{
  font:inherit; font-size:var(--web-fs-history); line-height:var(--web-lh-history);
  display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; min-height:var(--sb-row-h-web);
  border:0; background:transparent; color:inherit; text-align:left; padding:0 8px;
  cursor:pointer; overflow:hidden
}
:root[data-ui-surface="web-app"] .web-history-open .lbl{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}
:root[data-ui-surface="web-app"] .web-history-open .vb{ flex:none }
:root[data-ui-surface="web-app"] .web-history-open .vb{
  font-size:var(--web-fs-secondary); line-height:var(--web-lh-secondary)
}
:root[data-ui-surface="web-app"] .web-history-open:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px; border-radius:8px
}
/* The kebab keeps its own 44px ::after hit area and its own reveal rules from the base file; it only
   needs to stop being pushed around by the row gap this file just removed. */
:root[data-ui-surface="web-app"] .item .kebab{ width:var(--sb-dots-web);height:var(--sb-dots-web);margin:-4px 0 -4px 2px }

@media (hover:none){
  :root[data-ui-surface="web-app"] .section-open{position:absolute;right:0;flex-basis:44px;width:44px;height:44px}
  :root[data-ui-surface="web-app"] .view-all-conversations{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  :root[data-ui-surface="web-app"] #sideFoot #acct{ transition:none }
  :root[data-ui-surface="web-app"] #sideFoot #acct:active{ transform:none }
}