/* Varelyno: the top bar (12 Oct). PHONES: It was three rows, 168 px: menu,
   Work/Personal and the timer; then Demo, Leave demo and the account; then a
   full search box. Now one row, with search behind a button that opens the
   box over the bar, and in the demo a slim strip under it with the way in
   (Start free) and the way out. Loaded last; phones only. */
#topbar .vx-search-btn,#topbar .vx-search-close{display:none}
#topbar .vx-ws-ico,#topbar .vx-qc-ico{display:none}

/* DESKTOP AND TABLETS (user, 13 Oct): Work and Personal as a larger switch
   with the same soft icons, in the middle of the bar; the pen on Quick
   capture. Icons only below 1200 px, where the bar is tight. */
@media (min-width:701px){
  #topbar .topbar-hdft{order:1}
  #topbar .global-search{order:2}
  html body #topbar .workspace-switch{order:3;margin-inline:auto!important;display:flex;align-items:center;gap:2px;height:46px;padding:4px!important;border-radius:16px!important}
  html body #topbar .workspace-switch button{display:inline-flex!important;align-items:center;gap:8px;height:38px!important;min-height:0!important;padding:0 16px 0 13px!important;
    border-radius:12px!important;font-size:14px!important;font-weight:650!important;line-height:1}
  #topbar .workspace-switch .vx-ws-ico{display:block;width:21px;height:21px;flex:none}
  #topbar .quick-btn{order:4}
  #topbar #v10TmBtn{order:5}
  #topbar #demoBar{order:6}
  #topbar #ownerAccess{order:7}
  html body #topbar .quick-btn{display:inline-flex!important;align-items:center;gap:7px}
  #topbar .quick-btn .vx-qc-ico{display:block;width:18px;height:18px;flex:none}
}
@media (min-width:701px) and (max-width:1199px){
  html body #topbar .workspace-switch button{width:46px;padding:0!important;justify-content:center}
  #topbar .workspace-switch .vx-ws-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:700px){
  html body #topbar.topbar{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    gap:6px!important;padding:8px 12px!important;min-height:0!important;row-gap:6px!important
  }
  html body #topbar.topbar>*{margin:0!important}
  #topbar .menu-toggle{order:1;width:40px!important;height:40px!important;min-height:0!important;padding:0!important;flex:none}
  #topbar .topbar-hdft{order:2;width:26px!important;height:26px!important;flex:none}
  #topbar .workspace-switch{order:3;height:40px!important;padding:3px!important;flex:none}
  #topbar .workspace-switch button{height:34px!important;min-height:0!important;width:42px;padding:0!important;display:inline-grid!important;place-items:center}
  #topbar .workspace-switch .vx-ws-ico{display:block;width:20px;height:20px}
  #topbar .workspace-switch button{border-radius:11px!important}
  #topbar .workspace-switch .vx-ws-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #topbar .vx-search-btn{order:5}
  /* Two minutes starts the right-hand group, so Two minutes, Search, Quick capture and the
     account sit in the right corner on every phone width. As specific as the
     "#topbar.topbar>*{margin:0}" rule above, which had cancelled it (14 Oct). */
  html body #topbar.topbar>#v10TmBtn{margin-left:auto!important}
  html body #topbar.topbar .quick-btn{order:6;display:inline-grid!important;place-items:center;width:40px!important;height:40px!important;min-height:0!important;padding:0!important;flex:none;font-size:0!important}
  #topbar .quick-btn .vx-qc-ico{display:block;width:20px;height:20px;color:var(--text,#16314d)}
  #topbar .quick-btn .vx-qc-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #topbar #v10TmBtn{order:4;width:40px!important;height:40px!important;min-height:0!important;padding:0!important;justify-content:center;flex:none}
  #topbar #ownerAccess{order:7;flex:none}
  #topbar [data-vx-tip]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  #topbar #ownerAccess .account-trigger{padding:2px!important;min-height:0!important;width:40px;height:40px;border-radius:999px!important;gap:0!important;justify-content:center}
  #topbar #ownerAccess .account-trigger-text,#topbar #ownerAccess .account-caret,#topbar #ownerAccess .account-trigger .caret,
  #topbar #ownerAccess .account-trigger>svg:last-child{display:none!important}
  #topbar #ownerAccess .account-trigger::after{display:none!important}

  /* search: a button; the box opens over the bar */
  #topbar .vx-search-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;cursor:pointer;
    border:1px solid var(--line,#dce5eb);background:var(--surface,#fff);color:var(--text,#16314d)}
  #topbar .vx-search-btn svg{width:19px;height:19px}
  html body #topbar.topbar .global-search{display:none!important}
  html body #topbar.topbar.vx-search-open .global-search{
    display:flex!important;position:absolute!important;left:10px;right:10px;top:8px;height:42px!important;z-index:6;
    max-width:none!important;flex-basis:auto!important;width:auto!important;
    box-shadow:0 12px 30px -16px rgba(20,40,70,.45);animation:vxTopIn .45s cubic-bezier(.16,.84,.3,1) backwards}
  #topbar .vx-search-close{display:none}
  #topbar.vx-search-open .vx-search-close{display:grid;place-items:center;position:absolute;right:16px;top:13px;z-index:7;width:32px;height:32px;
    border:0;border-radius:10px;background:transparent;color:var(--muted,#5b6b7c);font-size:18px;cursor:pointer}
  @keyframes vxTopIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* the demo: one slim strip under the bar */
  #topbar #demoBar.demo-bar{order:9;flex:1 1 100%!important;display:flex;align-items:center;gap:8px;min-height:34px;
    margin:0 -12px -8px!important;padding:5px 12px 6px;border-top:1px solid color-mix(in srgb,#f0a020 30%,transparent);
    background:linear-gradient(90deg,color-mix(in srgb,#f0a020 13%,var(--surface,#fff)),color-mix(in srgb,#f0a020 4%,var(--surface,#fff)))}
  #topbar #demoBar .demo-pill{font-size:12.5px!important;gap:7px!important;padding:0!important;border:0!important;background:none!important;
    color:#8a4b00;font-weight:650;margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #topbar #demoBar .demo-pill::after{content:none!important}
  #topbar #demoBar .demo-start{display:inline-flex!important;align-items:center;height:28px!important;min-height:0!important;padding:0 12px!important;
    border-radius:999px!important;font-size:12.5px!important;font-weight:700;text-decoration:none!important}
  #topbar #demoBar .demo-start::after{content:" →"}
  #topbar #demoBar .demo-leave{display:inline-grid!important;place-items:center;width:28px!important;height:28px!important;min-height:0!important;
    padding:0!important;border-radius:999px!important;font-size:0!important;flex:none}
  #topbar #demoBar .demo-leave::before{content:"✕";font-size:13px;line-height:1}
  :root:is([data-theme="dark"],[data-tone="dark"]) #topbar #demoBar .demo-pill{color:#ffd9a0}
}
@media (max-width:389px){
  html body #topbar.topbar{gap:4px!important;padding:8px 8px!important}
  #topbar .menu-toggle,#topbar #v10TmBtn,#topbar .vx-search-btn,html body #topbar.topbar .quick-btn{width:37px!important;height:38px!important}
  #topbar .workspace-switch button{width:38px}
  #topbar #ownerAccess .account-trigger{width:38px;height:38px}
  #topbar #demoBar.demo-bar{margin:0 -8px -8px!important;padding:5px 8px 6px}
}
@media (prefers-reduced-motion:reduce){
  html body #topbar.topbar.vx-search-open .global-search{animation:none}
}

/* the press-and-hold bubble */
.vx-tip{position:fixed;z-index:2147483600;max-width:min(280px,calc(100vw - 16px));padding:10px 13px 11px;border-radius:14px;
  background:#14233a;color:#fff;box-shadow:0 16px 40px -14px rgba(10,20,40,.55);display:flex;flex-direction:column;gap:3px;
  font-size:13px;line-height:1.45;pointer-events:none;animation:vxTipIn .45s cubic-bezier(.16,.84,.3,1) backwards}
.vx-tip strong{font-size:13.5px;font-weight:700}
.vx-tip span{color:rgba(255,255,255,.82)}
.vx-tip::before{content:'';position:absolute;top:-6px;left:calc(var(--ax,50%) - 6px);width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
:root:is([data-theme="dark"],[data-tone="dark"]) .vx-tip{background:#e9eff8;color:#14233a}
:root:is([data-theme="dark"],[data-tone="dark"]) .vx-tip span{color:#3a4b63}
@keyframes vxTipIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vx-tip{animation:none}}

/* Left-menu Favourites: long project names wrap instead of being cut (night test, 13 Oct). */
#sidebar .favourites .fav{align-items:flex-start}
#sidebar .favourites .fav .dot{flex:none;margin-top:.45em}
#sidebar .favourites .fav span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;-webkit-line-clamp:unset;display:block;line-height:1.3;text-align:left}

/* Under 340px the row needs 339px: the small logo gives way (it stays in the left
   menu), so the account circle stays on the right and its menu on screen (night test, 13 Oct). */
@media (max-width:339px){
  html body #topbar .topbar-hdft{display:none!important}
}
/* The phone bar stays at the top: overflow:hidden on its parent stopped sticky working. */
@media (max-width:900px){ html body .app-shell,html body .app-main{overflow:clip} }
/* The map Tools sheet opened under the page header on phones: lift its header while it is open. */
html body .v9-map-head:has(details[open]){z-index:60}
/* While a window is open, notices move to the top so they never sit over its Save button (night test, 13 Oct). */
body:has(#modalBackdrop.show) .polish-toast-stack{bottom:auto;top:16px}

/* Phones: the top bar is solid, in the theme's colour, in every state (at the top,
   scrolled, evening look, Soft, Rich, Dark), with no frosted glass (15 Oct).
   Why: an iPhone home-screen app colours the band under the clock from a solid
   full-width bar at the top of the page, as the admin page shows (sharp, no gap).
   Our frosted, see-through bar gave it nothing solid to use, so it drew a soft
   blur over the top of the page. html:root raises this above the older
   ".is-scrolled" and evening glass rules; Rich mode's own solid tint stays.
   Also every home-screen app at any width (iPad, 17 Oct): the iPad had the frosted
   desktop bar, so the same blur stayed there. */
@media (max-width:700px),(display-mode:standalone){
  html:root body #topbar.topbar{
    background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 14%,var(--surface,#fff))!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html:root:is([data-theme="dark"],[data-tone="dark"],[data-mode="dark"]) body #topbar.topbar{
    background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 18%,var(--surface,#16202c))!important
  }
}
/* Phones keep clear of the status bar; tablets keep their own spacing. */
@media (max-width:700px){
  html:root body #topbar.topbar{padding-top:max(8px,env(safe-area-inset-top))!important}
}

/* Home-screen app on a wide screen (iPad sideways, 17 Oct): the left menu runs up to the
   top edge beside the top bar, so the top edge was two colours and the iPad blurred it.
   The menu takes exactly the bar's solid colour, so the whole top edge is one colour. */
@media (display-mode:standalone) and (min-width:701px){
  html:root body #sidebar.sidebar,html:root body #sidebar{
    background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 14%,var(--surface,#fff))!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html:root:is([data-theme="dark"],[data-tone="dark"],[data-mode="dark"]) body #sidebar{
    background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 18%,var(--surface,#16202c))!important
  }
  html.v-universe[data-mode="rich"] body #sidebar.sidebar{
    background:color-mix(in srgb,var(--v-accent) 14%,#fff)!important
  }
}

/* iPad home-screen app: a thin strip in the top bar's colour across the very top (v13-ipad-sky.js
   sets html.vx-sky, iPad app only; it replaced the sky band of 17 Oct on 2 Nov). iPadOS keeps the
   band under the clock sharp only when one solid strip runs across the whole top edge. Tested on
   the user's iPad: the sky picture blurred; an 8pt strip lying over the top of the app was sharp,
   4pt was not, and the bar and menu pinned on their own (two pieces) were not. The strip lies over
   the bar's own empty top (8.5pt or more above its buttons at every iPad size), so the app does
   not move down. The script paints it in the bar's exact colour; the colour here is the first frame. */
html.vx-sky #vxSky{position:fixed;top:0;left:0;right:0;width:100%;height:8px;z-index:85;display:block;
  background-color:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 14%,var(--surface,#fff))}
html.vx-sky #app::before{display:none!important}
html.vx-sky body #topbar.topbar{
  background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 14%,var(--surface,#fff))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.vx-sky:is([data-theme="dark"],[data-tone="dark"],[data-mode="dark"]) body #topbar.topbar{
  background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 18%,var(--surface,#16202c))!important}
html.vx-sky body #sidebar.sidebar{
  background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 14%,var(--surface,#fff))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.vx-sky:is([data-theme="dark"],[data-tone="dark"],[data-mode="dark"]) body #sidebar.sidebar{
  background:color-mix(in srgb,var(--v-accent,var(--nhs,#1E86C8)) 18%,var(--surface,#16202c))!important}
html.vx-sky.v-universe[data-mode="rich"] body #sidebar.sidebar{background:color-mix(in srgb,var(--v-accent) 14%,#fff)!important}