/* AfterLeads phone and tablet layer.
   Loaded last. Every signed-in screen is designed here for a phone first:
   one column, thumb sized controls (44px), no sideways page scroll, safe
   areas for notched phones, and layouts that hold in portrait and landscape. */

/* Header icon buttons: fullscreen uses the same circle as the bell. */
body .user-controls #fullscreenToggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:1px solid transparent;border-radius:50%;background:var(--color-surface-muted);color:var(--color-text-secondary,#475467);cursor:pointer}
body .user-controls #fullscreenToggle[hidden]{display:none}
/* Already running from the home screen: the browser bars are gone, so the button has nothing to do. */
@media(display-mode:standalone),(display-mode:fullscreen){body .user-controls #fullscreenToggle,body>#fullscreenToggle.floating-fullscreen{display:none}}
body .user-controls #fullscreenToggle:hover{background:var(--color-accent-surface);color:var(--color-accent)}
body .user-controls #fullscreenToggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
#fullscreenToggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#fullscreenToggle .fullscreen-exit,#fullscreenToggle[data-fullscreen="on"] .fullscreen-enter{display:none}
#fullscreenToggle[data-fullscreen="on"] .fullscreen-exit{display:block}

/* Themes picker in Settings. */
.theme-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 0;padding:0;border:0}
.theme-option{position:relative;display:grid;gap:4px;padding:14px;border:1px solid var(--color-border,#d8deea);border-radius:14px;background:var(--color-surface,#fff);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.theme-option:hover{border-color:var(--color-border-strong,#aeb8cc)}
.theme-option input{position:absolute;opacity:0;pointer-events:none}
.theme-option:has(input:checked){border-color:var(--color-accent,#3047c9);box-shadow:inset 0 0 0 1px var(--color-accent,#3047c9)}
.theme-option:has(input:focus-visible){outline:2px solid var(--color-focus,#244bbb);outline-offset:3px}
.theme-option strong{color:var(--color-text-primary,#17213a);font-size:14px}
.theme-option small{color:var(--color-text-muted,#667085);font-size:12px;line-height:1.4}
.theme-swatch{display:flex;height:56px;margin-bottom:6px;overflow:hidden;border:1px solid var(--color-border,#d8deea);border-radius:10px}
.theme-swatch i{flex:1}
.theme-swatch-light i{background:#f6f7fb}.theme-swatch-light i+i{background:#fff}
.theme-swatch-dark i{background:#0f172a}.theme-swatch-dark i+i{background:#1b2540}
.theme-swatch-system i{background:#f6f7fb}.theme-swatch-system i+i{background:#1b2540}

/* Safe areas for notched phones and home screen use. */
@supports(padding:max(0px)){
  body.signed-in-mode .public-ribbon{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  body.signed-in-mode .app-content,body.signed-in-mode .signed-in-main{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}

@media(max-width:760px){
  /* Header: brand mark stays visible, controls stay 44px. */
  body.signed-in-mode .public-ribbon .brand-link{display:flex;width:auto;min-width:36px}
  body.signed-in-mode .public-ribbon .brand-link .brand-mark-frame{display:inline-flex;width:34px;height:34px}
  body.signed-in-mode .public-ribbon .brand-link .brand-logo{width:34px;height:34px}
  body.signed-in-mode .public-ribbon .brand-link .brand-wordmark,body.signed-in-mode .public-ribbon .brand-link .brand-word{display:none}
  body .user-controls #fullscreenToggle{flex-basis:44px;width:44px;min-width:44px;height:44px;min-height:44px}

  /* Opportunities list: each opportunity becomes a card. */
  #opportunityRegister .register-table-wrap{overflow:visible;border:0}
  #opportunityRegister .register-table,#opportunityRegister .register-table tbody{display:block;width:100%;min-width:0}
  #opportunityRegister .register-table thead{display:none}
  #opportunityRegister .register-table tr[data-register-row]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:16px;border-top:1px solid var(--color-border,#dde2ed)}
  #opportunityRegister .register-table tr[data-register-row] td{display:block;padding:0;border:0;min-width:0;white-space:normal}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(1){grid-column:1;grid-row:1}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(2){grid-column:2;grid-row:1;text-align:right;font-weight:700;font-size:15px}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(3){grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(4){grid-column:1/-1}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(5),#opportunityRegister .register-table tr[data-register-row] td:nth-child(6){grid-column:auto}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(n+4)::before{display:block;margin-bottom:2px;color:var(--color-text-muted,#667085);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(4)::before{content:"Next step"}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(5)::before{content:"When"}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(6)::before{content:"Who"}
  #opportunityRegister .register-table tr[data-register-row] td:nth-child(6){text-align:right}
  #opportunityRegister .register-table tr[data-register-row] .register-identity{width:100%;text-align:left}
  #opportunityRegister .register-table tr[data-register-row] .register-identity strong{font-size:16px}
  #opportunityRegister .register-table td.empty{display:block;padding:24px 16px}
  #opportunityRegister .register-table tr:not([data-register-row]){display:block}

  /* Tabs scroll sideways in one row instead of wrapping. */
  :is(.register-tabs,.register-detail-tabs){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  :is(.register-tabs,.register-detail-tabs)::-webkit-scrollbar{display:none}
  :is(.register-tabs,.register-detail-tabs) button{flex:0 0 auto;white-space:nowrap;min-height:44px;scroll-snap-align:start}

  /* More menu opens under its button, inside the screen. */
  #opportunityRegister .register-more-menu{left:0;right:auto;min-width:min(260px,calc(100vw - 32px))}
  #opportunityRegister .register-more-menu .text-button{min-height:44px;width:100%;text-align:left}

  /* Workspace next steps: the long action gets its own row. */
  .workspace-priority-next>div:has(>[data-workspace-priority-state]){grid-template-columns:1fr 1fr!important}
  .workspace-priority-next>div:has(>[data-workspace-priority-state])>[data-workspace-priority-state]{grid-column:1/-1}
  .workspace-priority-next button{min-height:44px}

  /* Analytics controls: one compact row, a period pill and two small export buttons. */
  body #analytics .analytics-header{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px}
  body #analytics .analytics-header .analytics-controls{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;width:100%;min-width:0}
  body #analytics .analytics-controls .analytics-range{position:relative;display:block!important;flex:1 1 0;min-width:0;width:auto;margin:0}
  body #analytics .analytics-controls .analytics-range-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body #analytics .analytics-controls .analytics-range::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);background:currentColor;color:var(--color-text-secondary,#475467);pointer-events:none;-webkit-mask:var(--al-calendar-icon) center/contain no-repeat;mask:var(--al-calendar-icon) center/contain no-repeat}
  body #analytics .analytics-controls .analytics-range select{width:100%!important;min-height:38px!important;height:38px;padding:0 30px 0 36px;border-radius:999px!important;font-size:13px;font-weight:600}
  body #analytics .analytics-controls .analytics-custom-range{order:3;flex:1 0 100%}
  body #analytics .analytics-controls .analytics-custom-range:not([hidden]){display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  body #analytics .analytics-controls .analytics-custom-range label{display:grid;gap:2px;font-size:11px;font-weight:600;color:var(--color-text-secondary,#475467)}
  body #analytics .analytics-controls .analytics-custom-range input{min-height:36px;height:36px;padding:0 8px;font-size:13px;width:100%;min-width:0}
  body #analytics .analytics-controls .analytics-custom-range small{grid-column:1/-1}
  body #analytics .analytics-controls .analytics-custom-range small:empty{display:none}
  body #analytics .analytics-controls .analytics-export-actions{display:flex!important;flex:0 0 auto;flex-wrap:nowrap!important;gap:6px;margin:0}
  body #analytics .analytics-controls .analytics-export-button{display:inline-flex!important;align-items:center;gap:6px;width:auto!important;flex:0 0 auto!important;min-height:38px!important;height:38px;padding:0 13px!important;border-radius:999px!important;font-size:13px!important;font-weight:600;white-space:nowrap}
  body #analytics .analytics-controls .analytics-export-button:disabled{opacity:.5;background:transparent}
  body #analytics .analytics-controls .analytics-export-long{display:none}
  #analytics details>summary{min-height:44px;display:flex;align-items:center}

  /* Settings: section tabs scroll, the picker stacks. */
  #accountDialog .settings-navigation{scrollbar-width:none;scroll-snap-type:x proximity}
  #accountDialog .settings-navigation::-webkit-scrollbar{display:none}
  #accountDialog .settings-navigation button{min-height:44px;scroll-snap-align:start}
  body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{position:sticky;bottom:0;z-index:5;max-width:none;margin:16px 0 0;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--color-border,#dde2ed);background:var(--color-surface,#fff);box-shadow:0 -10px 24px -20px #17213a55}
  body.signed-in-mode #accountDialog[data-route="settings"] .account-footer .button{flex:1;min-height:44px}
  .theme-choice{grid-template-columns:1fr}
  .theme-option{grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
  .theme-option .theme-swatch{grid-row:1/3;height:48px;margin:0}

  /* Opportunity detail: summary actions share the row. */
  .opportunity-detail-page summary,.opportunity-detail-card summary{min-height:44px;display:flex;align-items:center}


  /* Nothing on a phone is smaller than 11px. */
  body.signed-in-mode :is(.eyebrow,.status-pill,.optional-label,.workspace-priority-reason,.workspace-priority-channel-kicker,.opportunity-position__context,.account-menu-section-label,.channel-detail-heading,.opportunity-position__endpoints span,.workspace-upcoming-buckets article>span){font-size:11px!important}
}

/* Footer links are easy to tap on any touch screen. */
@media(max-width:760px),(pointer:coarse){
  .site-footer-legal{display:flex;flex-wrap:wrap;gap:4px 8px}
  .site-footer-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
}

/* Landscape phones: a slimmer header leaves room for the work. */
@media(max-height:500px) and (orientation:landscape){
  body.signed-in-mode .modern-topbar.public-ribbon{min-height:56px;height:56px;padding-top:6px;padding-bottom:6px}
  body.signed-in-mode .app-sidebar{overflow-y:auto}
  #accountDialog,dialog{max-height:100dvh}
}

@media(prefers-reduced-motion:reduce){.theme-option{transition:none}}

/* ---------------------------------------------------------------------------
   Quieter top bar, a sidebar that is only as wide as it needs to be, and the
   account menu that now holds Settings, Billing and Feedback.
   --------------------------------------------------------------------------- */
:root{--app-bar-h:56px;--al-calendar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E")}
.analytics-export-button .analytics-export-icon{width:16px;height:16px;flex:0 0 16px}
.analytics-export-button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.register-action-button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.register-action-button .register-action-icon{width:16px;height:16px;flex:0 0 16px}
/* Phone: Opportunities actions are two round icon buttons, + to add and ⋯ for more,
   the same size and shape as the Analytics period and export controls. */
@media(max-width:760px){
  body.signed-in-mode .register-header>.register-actions{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:8px;width:100%}
  body.signed-in-mode .register-header .register-action-button{flex:0 0 auto!important;width:40px;height:40px;min-height:40px;min-width:0;padding:0!important;border-radius:999px}
  body.signed-in-mode .register-header .register-action-button .register-action-icon{width:18px;height:18px;flex-basis:18px}
  body.signed-in-mode .register-header .register-action-label{display:none}
  body.signed-in-mode #opportunityRegister .register-header .register-more-menu,body.signed-in-mode .register-header .register-more-menu{left:auto;right:0}
}

/* Top bar: slimmer, flat, a little see-through. */
body.signed-in-mode .shell>.modern-topbar.public-ribbon{min-height:var(--app-bar-h);height:var(--app-bar-h);padding-top:8px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);background:color-mix(in srgb,var(--color-surface,#fff) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:none;transition:transform .22s ease}
body.signed-in-mode .public-ribbon .brand-link .brand-logo,body.signed-in-mode .public-ribbon .brand-link .brand-mark-frame{width:30px;height:30px}
body.signed-in-mode .public-ribbon .user-controls{gap:6px}
body.signed-in-mode .user-controls :is(#notificationBell,#fullscreenToggle){width:36px;min-width:36px;height:36px;min-height:36px;flex-basis:36px;border-color:transparent;background:transparent;color:var(--color-text-muted,#667085)}
body.signed-in-mode .user-controls :is(#notificationBell,#fullscreenToggle):hover{background:var(--color-surface-muted,#f2f4f8);color:var(--color-text-primary,#17213a)}
body.signed-in-mode .user-controls .account-plan-control #accountButton{width:34px;min-width:34px;height:34px;min-height:34px;flex-basis:34px;font-size:13px}
body.signed-in-mode .public-ribbon .mobile-sidebar-toggle{width:40px;height:40px;flex-basis:40px;border-color:transparent;background:transparent;color:var(--color-text-primary,#17213a)}
body.signed-in-mode .public-ribbon .mobile-sidebar-toggle:hover{background:var(--color-surface-muted,#f2f4f8)}
body.signed-in-mode .user-controls .email-verification-status{padding:.36rem .64rem;font-size:12px}

/* Everything that used to assume a 72px bar follows the new height. */
body.signed-in-mode #signedInApp{min-height:calc(100dvh - var(--app-bar-h))}
body.signed-in-mode #appSidebar{top:var(--app-bar-h);height:calc(100dvh - var(--app-bar-h))}

/* Sidebar: as wide as its labels, never a fixed slab. */
@media(min-width:901px){
  body.signed-in-mode #signedInApp,body.signed-in-mode #signedInApp.sidebar-collapsed{grid-template-columns:var(--app-sidebar-width,184px) minmax(0,1fr)}
  body.signed-in-mode #signedInApp #appSidebar{width:max-content;min-width:0;max-width:240px;padding:16px 10px 12px;transition:width .18s ease}
  body.signed-in-mode #signedInApp.sidebar-collapsed #appSidebar{width:64px}
  body.signed-in-mode #appSidebar .app-sidebar-item{padding-right:18px;white-space:nowrap}
  body.signed-in-mode #signedInApp.sidebar-collapsed #appSidebar .app-sidebar-item{padding-right:7px}
  /* The collapse control is a quiet row at the foot of the sidebar. */
  body.signed-in-mode #appSidebar .app-sidebar-collapse{position:static;transform:none;margin-top:auto;width:100%;min-height:40px;justify-content:flex-start;gap:12px;padding:9px 12px;border-radius:10px;opacity:1;color:var(--color-text-muted,#667085);font:600 13px/1.2 inherit}
  body.signed-in-mode #appSidebar .app-sidebar-collapse>span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}
  body.signed-in-mode #appSidebar .app-sidebar-collapse:hover{background:var(--color-surface-muted,#f2f4f8);color:var(--color-text-primary,#17213a)}
  body.signed-in-mode #appSidebar .app-sidebar-collapse:active{transform:none}
  body.signed-in-mode #signedInApp.sidebar-collapsed #appSidebar .app-sidebar-collapse{justify-content:center;padding:9px 7px}
  body.signed-in-mode #signedInApp.sidebar-collapsed #appSidebar .app-sidebar-collapse>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.signed-in-mode .site-footer,body.signed-in-mode:has(#signedInApp.sidebar-collapsed) .site-footer{margin-left:calc(var(--app-sidebar-width,184px) + 32px)}
}

/* Phone and tablet: the sidebar slides in as a drawer sized to its labels. */
@media(max-width:900px){
  body.signed-in-mode #signedInApp #appSidebar{top:0;bottom:0;left:0;height:100dvh;width:max-content;min-width:220px;max-width:calc(100vw - 56px);padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-right:1px solid var(--color-border,#dde2ed);border-radius:0 18px 18px 0;box-shadow:0 20px 60px -20px #0f172a66;transform:translateX(-105%);transition:transform .26s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  body.signed-in-mode.mobile-sidebar-open #signedInApp #appSidebar{transform:none;visibility:visible}
  body.signed-in-mode #signedInApp #appSidebar{transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s}
  body.signed-in-mode.mobile-sidebar-open #signedInApp #appSidebar{transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s}
  body.signed-in-mode #sidebarScrim{display:block;opacity:0;pointer-events:none;transition:opacity .26s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.signed-in-mode.mobile-sidebar-open #sidebarScrim{opacity:1;pointer-events:auto}
  body.signed-in-mode #appSidebar .app-sidebar-item{min-height:48px;font-size:15px}
}

/* Phones: the bar is the same 56px and steps aside while you scroll down. */
@media(max-width:760px){
  body.signed-in-mode .shell>.modern-topbar.public-ribbon{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  body.signed-in-mode .user-controls :is(#notificationBell,#fullscreenToggle){width:40px;min-width:40px;height:40px;min-height:40px;flex-basis:40px}
  body.signed-in-mode .user-controls .account-plan-control #accountButton{width:38px;min-width:38px;height:38px;min-height:38px;flex-basis:38px}
  body.signed-in-mode.ribbon-tucked .shell>.modern-topbar.public-ribbon{transform:translateY(-100%)}
}
@media(max-height:500px) and (orientation:landscape){
  body.signed-in-mode.ribbon-tucked .shell>.modern-topbar.public-ribbon{transform:translateY(-100%)}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar.public-ribbon{position:fixed;top:auto;bottom:0;left:0;right:0;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-bottom:0}
  :root[data-fullscreen="on"] body.signed-in-mode.ribbon-tucked .shell>.modern-topbar.public-ribbon{transform:translateY(100%)}
  :root[data-fullscreen="on"] body.signed-in-mode{padding-bottom:var(--app-bar-h)}
}

/* Phone full screen (or opened from the home screen): the bar moves to the
   bottom, within thumb reach, clear of the home indicator. */
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar.public-ribbon{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;min-height:var(--app-bar-h);padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-bottom:0}
  :root[data-fullscreen="on"] body.signed-in-mode.ribbon-tucked .shell>.modern-topbar.public-ribbon{transform:translateY(100%)}
  :root[data-fullscreen="on"] body.signed-in-mode{padding-bottom:calc(var(--app-bar-h) + env(safe-area-inset-bottom))}
  :root[data-fullscreen="on"] body.signed-in-mode #signedInApp{min-height:100dvh}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{bottom:calc(var(--app-bar-h) + env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode .shell>.modern-topbar.public-ribbon{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;min-height:var(--app-bar-h);padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-bottom:0}
  body.signed-in-mode.ribbon-tucked .shell>.modern-topbar.public-ribbon{transform:translateY(100%)}
  body.signed-in-mode{padding-bottom:calc(var(--app-bar-h) + env(safe-area-inset-bottom))}
  body.signed-in-mode .app-content{padding-top:max(18px,env(safe-area-inset-top))}
  body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{bottom:calc(var(--app-bar-h) + env(safe-area-inset-bottom))}
}

/* With the bar at the bottom, the menu pops up just above it: no dimming, no
   blur, and the page stays scrollable and usable behind it. */
@media(max-width:760px),(max-height:500px) and (orientation:landscape){
  :root[data-fullscreen="on"] body.signed-in-mode #signedInApp #appSidebar{position:fixed;top:auto;bottom:var(--nav-menu-bottom,calc(var(--app-bar-h) + max(8px,env(safe-area-inset-bottom)) + 6px));left:auto;right:max(8px,env(safe-area-inset-right));height:auto;min-height:0;max-height:calc(100dvh - var(--app-bar-h) - 32px);width:max-content;min-width:220px;padding:8px;border:1px solid var(--color-border,#dde2ed);border-radius:16px;box-shadow:0 12px 32px -12px #0f172a59;transform:translateY(12px);opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .2s}
  :root[data-fullscreen="on"] body.signed-in-mode.mobile-sidebar-open #signedInApp #appSidebar{transform:none;opacity:1;visibility:visible;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s}
  :root[data-fullscreen="on"] body.signed-in-mode #sidebarScrim{display:none!important}
  :root[data-fullscreen="on"] body.signed-in-mode.mobile-sidebar-open{overflow:auto}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode #signedInApp #appSidebar{position:fixed;top:auto;bottom:var(--nav-menu-bottom,calc(var(--app-bar-h) + max(8px,env(safe-area-inset-bottom)) + 6px));left:auto;right:max(8px,env(safe-area-inset-right));height:auto;min-height:0;max-height:calc(100dvh - var(--app-bar-h) - 32px);width:max-content;min-width:220px;padding:8px;border:1px solid var(--color-border,#dde2ed);border-radius:16px;box-shadow:0 12px 32px -12px #0f172a59;transform:translateY(12px);opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .2s}
  body.signed-in-mode.mobile-sidebar-open #signedInApp #appSidebar{transform:none;opacity:1;visibility:visible;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s}
  body.signed-in-mode #sidebarScrim{display:none!important}
  body.signed-in-mode.mobile-sidebar-open{overflow:auto}
}

/* Settings in phone full screen: the section tabs become a slim strip just
   above the bottom bar, with Save sitting above them. */
:root{--settings-tabs-h:45px}
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .settings-navigation{position:fixed;top:auto;bottom:calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px));left:0;right:0;z-index:85;width:auto;min-height:0;padding:4px 8px;gap:2px;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-bottom:0;background:color-mix(in srgb,var(--color-surface,#fff) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .settings-navigation button{min-height:36px;padding:6px 10px;font-size:13px;border-radius:9px}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .settings-navigation button[aria-current="page"]{box-shadow:none}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{bottom:0}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .settings-layout{padding-bottom:var(--settings-tabs-h)}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{padding-right:108px}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{min-height:38px}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{position:fixed;right:10px;bottom:calc(calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px)) + 6px);z-index:96;width:auto;gap:6px}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-action-button{width:38px;height:38px;min-height:38px}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-more{position:static}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-more-menu{top:auto;bottom:calc(100% + 10px);left:auto!important;right:0!important}
  :root[data-fullscreen="on"] body.signed-in-mode.ribbon-tucked:has(#accountDialog[data-route="settings"][open]) .shell>.modern-topbar.public-ribbon{transform:none}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode #accountDialog[data-route="settings"] .settings-navigation{position:fixed;top:auto;bottom:calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px));left:0;right:0;z-index:85;width:auto;min-height:0;padding:4px 8px;gap:2px;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-bottom:0;background:color-mix(in srgb,var(--color-surface,#fff) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
  body.signed-in-mode #accountDialog[data-route="settings"] .settings-navigation button{min-height:36px;padding:6px 10px;font-size:13px;border-radius:9px}
  body.signed-in-mode #accountDialog[data-route="settings"] .settings-navigation button[aria-current="page"]{box-shadow:none}
  body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{bottom:0}
  body.signed-in-mode #accountDialog[data-route="settings"] .settings-layout{padding-bottom:var(--settings-tabs-h)}
  body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{padding-right:108px}
  body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{min-height:38px}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{position:fixed;right:10px;bottom:calc(calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px)) + 6px);z-index:96;width:auto;gap:6px}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-action-button{width:38px;height:38px;min-height:38px}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-more{position:static}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-more-menu{top:auto;bottom:calc(100% + 10px);left:auto!important;right:0!important}
  body.signed-in-mode.ribbon-tucked:has(#accountDialog[data-route="settings"][open]) .shell>.modern-topbar.public-ribbon{transform:none}
}

/* Opportunities and Analytics in phone full screen: their tabs and period
   controls join the bottom too, as a slim strip just above the bar. */
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{position:fixed;top:auto;bottom:calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px));left:0;right:0;z-index:85;margin:0;padding:6px 10px;border:0;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-radius:0;background:color-mix(in srgb,var(--color-surface,#fff) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:none;display:flex;gap:2px;overflow-x:auto}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{min-height:36px;padding:6px 10px;font-size:13px;border-radius:9px}
  :root[data-fullscreen="on"] body.signed-in-mode #analytics:not([hidden]) .analytics-header .analytics-controls{position:fixed;top:auto;bottom:calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px));left:0;right:0;z-index:85;margin:0;padding:6px 10px;border:0;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-radius:0;background:color-mix(in srgb,var(--color-surface,#fff) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:none;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;width:auto}
  :root[data-fullscreen="on"] body.signed-in-mode.ribbon-tucked:has(#opportunitiesView:not([hidden]) .register-tabs,#analytics:not([hidden])) .shell>.modern-topbar.public-ribbon{transform:none}
  :root[data-fullscreen="on"] body.signed-in-mode:has(#opportunitiesView:not([hidden]) .register-tabs,#analytics:not([hidden])) .app-content{padding-bottom:calc(var(--settings-tabs-h) + 24px)}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{position:fixed;top:auto;bottom:calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px));left:0;right:0;z-index:85;margin:0;padding:6px 10px;border:0;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-radius:0;background:color-mix(in srgb,var(--color-surface,#fff) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:none;display:flex;gap:2px;overflow-x:auto}
  body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{min-height:36px;padding:6px 10px;font-size:13px;border-radius:9px}
  body.signed-in-mode #analytics:not([hidden]) .analytics-header .analytics-controls{position:fixed;top:auto;bottom:calc(var(--app-bar-h) + max(0px, env(safe-area-inset-bottom) - 8px));left:0;right:0;z-index:85;margin:0;padding:6px 10px;border:0;border-top:1px solid color-mix(in srgb,var(--color-border,#dde2ed) 70%,transparent);border-radius:0;background:color-mix(in srgb,var(--color-surface,#fff) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:none;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;width:auto}
  body.signed-in-mode.ribbon-tucked:has(#opportunitiesView:not([hidden]) .register-tabs,#analytics:not([hidden])) .shell>.modern-topbar.public-ribbon{transform:none}
  body.signed-in-mode:has(#opportunitiesView:not([hidden]) .register-tabs,#analytics:not([hidden])) .app-content{padding-bottom:calc(var(--settings-tabs-h) + 24px)}
}

/* Account menu: identity, then your account, then help, then sign out. */
#accountMenuDialog.opens-up{top:auto;bottom:var(--account-menu-bottom,80px);max-height:calc(100dvh - var(--account-menu-bottom,80px) - 12px)}
#accountMenuDialog .account-profile-art{height:88px;margin-bottom:6px}
#accountMenuDialog .account-profile-art>img{flex-basis:60px;width:60px;height:80px}
#accountMenuDialog .account-menu-section-label{margin:12px 6px 4px}
#accountMenuDialog nav{margin:0;padding:0 0 8px;border-bottom:1px solid var(--color-border,#dde2ed)}
#accountMenuDialog nav :is(a,button),#accountMenuDialog .account-menu-signout{min-height:44px;gap:12px;padding:10px;font-size:14px;font-weight:550}
#accountMenuDialog nav svg,#accountMenuDialog .account-menu-signout svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--color-text-muted,#667085)}
#accountMenuDialog nav :is(a,button)[aria-current="page"]{background:var(--color-accent-surface,#eef2ff);color:var(--color-accent,#3047c9)}
#accountMenuDialog nav :is(a,button)[aria-current="page"] svg{color:inherit}
#accountMenuDialog nav [hidden]{display:none}
#accountMenuDialog .account-menu-signout{margin-top:8px;color:var(--color-danger,#c62f45)}
#accountMenuDialog .account-menu-signout svg{color:inherit}
body.dark-mode #accountMenuDialog .account-profile-art{background:linear-gradient(125deg,#1f2a4a,#18213a)}
body.dark-mode #accountMenuDialog .account-profile-art .account-menu-identity strong{color:#edf2ff}
body.dark-mode #accountMenuDialog .account-profile-art .account-menu-identity span{color:#aeb7c9}
@media(max-width:560px){
  #accountMenuDialog,#accountMenuDialog.opens-up{inset:auto 8px max(8px,env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 24px);border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
  body.signed-in-mode .shell>.modern-topbar.public-ribbon,body.signed-in-mode #signedInApp #appSidebar,body.signed-in-mode #sidebarScrim{transition:none!important}
}
#accountMenuDialog nav.account-menu-links{padding-top:8px}

/* Full screen is the one floating control: a bare, faint symbol with no
   circle behind it (a 40px tap area keeps it easy to hit) that always
   sits in the top right corner, just under the bar when the bar is at the top
   and in the corner itself when the bar is at the bottom. */
body>#fullscreenToggle.floating-fullscreen{position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(var(--app-bar-h) + max(10px,env(safe-area-inset-top)));z-index:95;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;padding:0;border:0!important;border-radius:0;background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--color-text-muted,#667085);box-shadow:none!important;opacity:.6;cursor:pointer;transition:opacity .15s ease,top .2s ease}
body>#fullscreenToggle.floating-fullscreen:hover,body>#fullscreenToggle.floating-fullscreen:focus-visible{opacity:1;background:transparent!important;color:var(--color-text-primary,#17213a)}
body>#fullscreenToggle.floating-fullscreen:focus-visible{outline:2px solid var(--color-focus,#244bbb);outline-offset:3px}
body>#fullscreenToggle.floating-fullscreen[hidden]{display:none}
body.signed-out-mode>#fullscreenToggle.floating-fullscreen{display:none}
@media(max-width:760px),(max-height:500px) and (orientation:landscape){
  :root[data-fullscreen="on"] body.signed-in-mode>#fullscreenToggle.floating-fullscreen{top:max(10px,calc(env(safe-area-inset-top) + 6px))}
}

/* Phone full screen: the bottom bar sits flush on the screen edge. A page's
   tabs or controls (Settings, Opportunities, Analytics) share its background
   with no line between them, so the controls and the bar read as one solid
   piece. Nothing here floats; only the full screen button does. */
body{--dock-bg:color-mix(in srgb,var(--color-surface,#fff) 94%,transparent);--dock-line:color-mix(in srgb,var(--color-border,#dde2ed) 75%,transparent)}
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode{--dock-top:calc(var(--app-bar-h) + env(safe-area-inset-bottom))}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar.public-ribbon{left:0!important;right:0!important;bottom:0!important;height:var(--dock-top)!important;min-height:var(--dock-top)!important;padding-top:6px!important;padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;border:0!important;border-top:1px solid var(--dock-line)!important;border-radius:0;background:var(--dock-bg)!important;box-shadow:none!important}
  :root[data-fullscreen="on"] body.signed-in-mode:has(#accountDialog[data-route="settings"][open],#opportunitiesView:not([hidden]) .register-tabs,#analytics:not([hidden])) .shell>.modern-topbar.public-ribbon{border-top-color:transparent!important}
  :root[data-fullscreen="on"] body.signed-in-mode :is(#accountDialog[data-route="settings"] .settings-navigation,#opportunitiesView:not([hidden]) #opportunityRegister .register-tabs,#analytics:not([hidden]) .analytics-header .analytics-controls){left:0!important;right:0!important;bottom:var(--dock-top)!important;padding:8px 10px 2px!important;border:0!important;border-top:1px solid var(--dock-line)!important;border-radius:0!important;background:var(--dock-bg)!important;box-shadow:none!important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{padding-left:8px!important;padding-right:92px!important;gap:0!important}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{padding:6px 9px!important}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{right:8px!important;bottom:calc(var(--dock-top) + 2px)!important}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{bottom:0}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode{--dock-top:calc(var(--app-bar-h) + env(safe-area-inset-bottom))}
  body.signed-in-mode .shell>.modern-topbar.public-ribbon{left:0!important;right:0!important;bottom:0!important;height:var(--dock-top)!important;min-height:var(--dock-top)!important;padding-top:6px!important;padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;border:0!important;border-top:1px solid var(--dock-line)!important;border-radius:0;background:var(--dock-bg)!important;box-shadow:none!important}
  body.signed-in-mode:has(#accountDialog[data-route="settings"][open],#opportunitiesView:not([hidden]) .register-tabs,#analytics:not([hidden])) .shell>.modern-topbar.public-ribbon{border-top-color:transparent!important}
  body.signed-in-mode :is(#accountDialog[data-route="settings"] .settings-navigation,#opportunitiesView:not([hidden]) #opportunityRegister .register-tabs,#analytics:not([hidden]) .analytics-header .analytics-controls){left:0!important;right:0!important;bottom:var(--dock-top)!important;padding:8px 10px 2px!important;border:0!important;border-top:1px solid var(--dock-line)!important;border-radius:0!important;background:var(--dock-bg)!important;box-shadow:none!important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
  body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{padding-left:8px!important;padding-right:92px!important;gap:0!important}
  body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{padding:6px 9px!important}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{right:8px!important;bottom:calc(var(--dock-top) + 2px)!important}
  body.signed-in-mode #accountDialog[data-route="settings"] .account-footer{bottom:0}
}

/* Phone, normal browser view: Opportunities keeps its tabs, + and ⋯ in one
   solid strip on the bottom edge, the same strip as in full screen. */
@media(max-width:760px) and (display-mode:browser){
  :root:not([data-fullscreen="on"]) body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:85;margin:0;padding:8px 92px calc(8px + env(safe-area-inset-bottom)) 8px;border:0;border-top:1px solid var(--dock-line);border-radius:0;background:var(--dock-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:none;display:flex;gap:0;overflow-x:auto}
  :root:not([data-fullscreen="on"]) body.signed-in-mode #opportunitiesView:not([hidden]) #opportunityRegister .register-tabs button{min-height:38px;padding:6px 9px;font-size:13px;border-radius:9px}
  :root:not([data-fullscreen="on"]) body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{position:fixed;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:96;width:auto;gap:6px;padding:0}
  :root:not([data-fullscreen="on"]) body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-action-button{width:38px;height:38px;min-height:38px}
  :root:not([data-fullscreen="on"]) body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-more{position:static}
  :root:not([data-fullscreen="on"]) body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-more-menu{top:auto;bottom:calc(100% + 10px);left:auto!important;right:0!important}
  :root:not([data-fullscreen="on"]) body.signed-in-mode:has(#opportunitiesView:not([hidden]) .register-tabs) .app-content{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* Phone full screen: the full screen button hides (the phone's own back or
   swipe gesture leaves full screen), and the page starts a little lower so
   nothing sits under the front camera cut-out. */
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode{--top-safe:max(32px,env(safe-area-inset-top))}
  :root[data-fullscreen="on"] body.signed-in-mode .app-content{padding-top:calc(var(--top-safe) + 18px)}
  :root[data-fullscreen="on"] body.signed-in-mode>#fullscreenToggle.floating-fullscreen{display:none!important}
  :root[data-fullscreen="on"] body.signed-in-mode dialog[open]:modal:not(.notification-dialog){padding-top:var(--top-safe)}
  :root[data-fullscreen="on"] body.signed-in-mode dialog.notification-dialog[open]{margin-top:calc(var(--top-safe) + 8px);max-height:calc(100dvh - var(--top-safe) - var(--app-bar-h) - 24px)}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode{--top-safe:max(32px,env(safe-area-inset-top))}
  body.signed-in-mode .app-content{padding-top:calc(var(--top-safe) + 18px)}
  body.signed-in-mode dialog[open]:modal:not(.notification-dialog){padding-top:var(--top-safe)}
  body.signed-in-mode dialog.notification-dialog[open]{margin-top:calc(var(--top-safe) + 8px);max-height:calc(100dvh - var(--top-safe) - var(--app-bar-h) - 24px)}
}
/* Phone full screen: the menu button sits between the notification bell and
   the profile picture, with the logo alone on the left. */
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar.public-ribbon{display:flex;align-items:center}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar .user-controls{display:contents}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar .brand-link{order:1}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar #notificationBell{order:2;margin-left:auto}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar #mobileSidebarToggle{order:3;margin-inline:6px}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar .account-plan-control{order:4}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode .shell>.modern-topbar.public-ribbon{display:flex;align-items:center}
  body.signed-in-mode .shell>.modern-topbar .user-controls{display:contents}
  body.signed-in-mode .shell>.modern-topbar .brand-link{order:1}
  body.signed-in-mode .shell>.modern-topbar #notificationBell{order:2;margin-left:auto}
  body.signed-in-mode .shell>.modern-topbar #mobileSidebarToggle{order:3;margin-inline:6px}
  body.signed-in-mode .shell>.modern-topbar .account-plan-control{order:4}
}
/* Phone full screen: every page's first item starts at the same height, right
   at the top room, with no extra page specific gap above it. */
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode #opportunityRegister{padding-top:0}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunityRegister>.register-header{margin-bottom:0}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog #accountForm{row-gap:0}
  :root[data-fullscreen="on"] body.signed-in-mode #accountDialog .account-sections>.settings-section:first-child{padding-top:0}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode #opportunityRegister{padding-top:0}
  body.signed-in-mode #opportunityRegister>.register-header{margin-bottom:0}
  body.signed-in-mode #accountDialog #accountForm{row-gap:0}
  body.signed-in-mode #accountDialog .account-sections>.settings-section:first-child{padding-top:0}
}
/* Phone full screen: the Opportunities ⋯ and + buttons and the bar's menu
   button and profile picture form one even 2 by 2 square: same 40px size,
   same 12px gap across and down, ⋯ over the menu and + over the picture. */
@media(max-width:760px){
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar #mobileSidebarToggle{width:40px;height:40px;min-width:40px;padding:0;margin:0 4px 0 6px;place-items:center;border:1px solid transparent;border-radius:50%;background:var(--color-accent-surface);color:var(--color-accent)}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar .account-plan-control{flex:0 0 40px;width:40px;min-width:40px;height:40px}
  :root[data-fullscreen="on"] body.signed-in-mode .shell>.modern-topbar #accountButton{width:40px;height:40px;min-width:40px;min-height:40px}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{right:10px!important;bottom:calc(var(--app-bar-h) + 3px + max(0px, env(safe-area-inset-bottom) - 8px))!important;gap:12px}
  :root[data-fullscreen="on"] body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-action-button{width:40px;height:40px;min-height:40px}
}
@media(max-width:760px) and (display-mode:standalone),(max-width:760px) and (display-mode:fullscreen){
  body.signed-in-mode .shell>.modern-topbar #mobileSidebarToggle{width:40px;height:40px;min-width:40px;padding:0;margin:0 4px 0 6px;place-items:center;border:1px solid transparent;border-radius:50%;background:var(--color-accent-surface);color:var(--color-accent)}
  body.signed-in-mode .shell>.modern-topbar .account-plan-control{flex:0 0 40px;width:40px;min-width:40px;height:40px}
  body.signed-in-mode .shell>.modern-topbar #accountButton{width:40px;height:40px;min-width:40px;min-height:40px}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header>.register-actions{right:10px!important;bottom:calc(var(--app-bar-h) + 3px + max(0px, env(safe-area-inset-bottom) - 8px))!important;gap:12px}
  body.signed-in-mode #opportunitiesView:not([hidden]) .register-header .register-action-button{width:40px;height:40px;min-height:40px}
}
/* Tablet and desktop: the full screen symbol sits in the free strip between
   the top bar and the page content, so it never covers page controls such as
   the Analytics period and export buttons. */
@media(min-width:761px){
  body.signed-in-mode>#fullscreenToggle.floating-fullscreen{top:calc(var(--app-bar-h) + 1px);width:20px;height:20px;min-height:0;max-height:20px}
  body.signed-in-mode>#fullscreenToggle.floating-fullscreen svg{width:18px;height:18px}
}
@media(min-width:901px){
  body.signed-in-mode>#fullscreenToggle.floating-fullscreen{top:calc(var(--app-bar-h) + 2px);width:24px;height:24px;max-height:24px}
}