@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
  :root{
    --ink:#101825; --muted:#5B6472; --line:#DDE2E9; --paper:#F2F4F7; --card:#fff; --accent:#2A52E2;
    color-scheme:light;
  }
  @media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ink:#F0F2F5; --muted:#A8B0B8; --line:#2C3E50; --paper:#0D1117; --card:#1A1E28; --accent:#4A7FFF;
      color-scheme:dark;
    }
  }
  [data-theme="dark"]{
    --ink:#F0F2F5; --muted:#A8B0B8; --line:#2C3E50; --paper:#0D1117; --card:#1A1E28; --accent:#4A7FFF;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  *{scrollbar-width:thin; scrollbar-color:var(--line) var(--paper)}
  *::-webkit-scrollbar{width:10px; height:10px}
  *::-webkit-scrollbar-track{background:var(--paper)}
  *::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px}
  *::-webkit-scrollbar-thumb:hover{background:var(--muted)}
  html,body{margin:0; height:100%; background:var(--paper); color:var(--ink); font:14px 'Inter',system-ui,sans-serif}
  body{display:flex; flex-direction:column}
  /* Three columns - brand + room tabs, the clock, then theme + account - with the two outer ones equal
     so the clock sits centred on the header itself rather than in whatever space happens to be left.
     A real column, not absolute centring, so it can never end up under the tabs or the account button. */
  header{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center;
    padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); position:relative}
  /* Placed by column rather than left to auto-placement: the clock is display:none until sign-in, and a
     display:none grid item is skipped entirely - which slid the theme button up into the middle column
     and left it sitting centred on the sign-in page. */
  .hdr-left{grid-column:1; display:flex; gap:12px; align-items:center; min-width:0}
  /* .hdr-brand itself is just a layout wrapper, not a link - only the logo <img> inside it
     (index.html, docs/onboarding/*.html) is wrapped in its own <a href="/">, so the "PluraSpace"
     wordmark next to it stays plain text. The landing page at "/" doesn't wrap even the logo in a
     link - there's nowhere further "up" to send someone already on it. */
  .hdr-brand{display:flex; gap:12px; align-items:center; flex-shrink:0}
  .hdr-brand a{display:flex; line-height:0}
  #headerClock{grid-column:2}
  .hdr-right{grid-column:3; display:flex; gap:12px; align-items:center; justify-content:flex-end}
  .doc-version-picker{position:relative; width:180px; margin:0; white-space:nowrap}
  .doc-version-picker summary{height:32px; padding:0 12px; border:1px solid var(--accent);
    border-radius:999px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
    position:relative; font-size:12px; font-weight:600; cursor:pointer; list-style:none; user-select:none}
  .doc-version-picker summary::-webkit-details-marker{display:none}
  .doc-version-picker summary:hover{filter:brightness(.96)}
  .doc-version-picker summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .doc-version-caret{position:absolute; right:12px; font-size:10px; transition:transform .15s ease}
  .doc-version-picker[open] .doc-version-caret{transform:rotate(180deg)}
  .doc-version-menu{position:absolute; top:calc(100% + 4px); left:0; z-index:70; width:100%; min-width:0;
    overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--card);
    box-shadow:0 4px 16px rgba(0,0,0,.2)}
  .doc-version-menu-title{padding:9px 14px; background:color-mix(in srgb,var(--accent) 12%,var(--card));
    color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.03em; text-align:center; text-transform:uppercase}
  .doc-version-option{position:relative; display:block; padding:10px 14px; border:1px solid transparent;
    color:var(--ink); font-size:12px; font-weight:600; text-align:center; text-decoration:none}
  .doc-version-option:hover{border-color:var(--accent); color:var(--accent)}
  .doc-version-option.current,.doc-version-option.current:hover{border-color:var(--accent); background:var(--accent); color:#fff}
  .doc-version-option.current::before{content:'\2713'; position:absolute; left:14px; font-weight:700}
  .doc-mobile-version{display:none}
  /* Keep the explanation following a documentation screenshot visually separate from its frame.
     The guides define a very tight 4px bottom margin locally; this shared, more-specific rule
     applies the same balanced spacing to every screenshot in every documentation version. */
  .page-scroll figure.shot{margin-bottom:20px}
  @media(max-width:1000px){header{padding:10px 12px; gap:8px}}
  @media(max-width:700px){
    .doc-version-picker{width:155px}
    .doc-crumb{display:none}
    .hdr-right > .doc-version-picker{display:none}
    .doc-mobile-version{display:block; padding:12px 20px 0}
    .doc-mobile-version .doc-version-picker{display:block}

    /* Keep the mobile version control close to the opening title. Browsers otherwise add their
       default h1 top margin on top of the guide hero padding, creating a visibly oversized gap. */
    .doc-mobile-version + .shell .doc-hero{padding-top:10px}
    .doc-mobile-version + .shell .doc-hero h1{margin-top:0}
    .doc-mobile-version + main .hero{padding-top:18px}

    /* With the version control moved below the header, the Super Admin guide's overview action
       takes its former centered header position. Its older hero copy is hidden on phones. */
    .overview-btn-hdr{display:inline-flex !important; position:absolute; left:50%; top:50%;
      transform:translate(-50%,-50%); z-index:1}
    .overview-btn-hero{display:none !important}
    .hero-title-row{display:block !important; margin-bottom:0 !important}
    .hero-title-row h1{margin:0 0 14px !important; min-width:0 !important}
  }
  /* Whether the signed-in-only header pieces are shown is driven by a class on <html> (set at the
     same points that used to set inline display on each one), so the phone rules at the bottom of
     this stylesheet can re-place them: an inline display:flex set from JS wins over any stylesheet
     rule, media query or not, which would make them impossible to move or hide per breakpoint. */
  #tabs,#acctBtn,#exitBtn{display:none}
  html.signed-in #tabs{display:flex}
  html.signed-in #acctBtn{display:inline-flex}
  html.signed-in #exitBtn{display:flex}
  /* The timezone picker, the user chip, User Management and Sign Out are never shown inline any more
     - they all live behind the account button below, at every width. They stay in the DOM, hidden,
     because that's still where the timezone list the menu offers comes from (#tz) and where the
     signed-in name is kept in sync (#actingUser). */
  #headerControls{display:none}
  /* Account button: on a wide screen a pill carrying who you're signed in as (monogram, name, role)
     the way the old inline chip did, so nothing is lost by folding four controls into one menu; on
     a narrow one just the monogram circle (see the compact-header section). */
  .acct-btn{align-items:center; gap:8px; flex-shrink:0; padding:4px 10px 4px 4px; border-radius:999px;
    background:var(--paper); border:1px solid var(--accent); font-size:12px; font-weight:600}
  .acct-btn:hover{border-color:var(--accent); color:var(--ink)}
  /* #acctMono in index.html is a plain wrapper - updateActingUserDisplay() fills it with either an
     <img class="acct-mono"> (an uploaded photo) or a <span class="acct-mono"> (initials) - see
     avatarHtml() in util.js. The wrapper carries the actual size (acct-mono-wrap) so both cases
     fill it identically via width/height:100%, rather than sizing the img/span directly. */
  .acct-mono-wrap{display:inline-flex; width:26px; height:26px; flex-shrink:0}
  .acct-mono{width:100%; height:100%; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; letter-spacing:.3px;
    object-fit:cover}
  .acct-caret{font-size:9px; color:var(--muted)}
  /* Used as-is (no wrapper) in the account sheet and edit-profile dialogs, which rebuild their
     whole markup fresh each time they open - only the persistent header button needs the wrapper
     indirection above. object-fit:cover only matters when avatarHtml() renders this as an <img>. */
  .acct-avatar{width:38px; height:38px; flex-shrink:0; border-radius:50%; background:var(--accent); color:#fff;
    font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; object-fit:cover}
  /* The larger preview circle in the edit-profile dialog. */
  .acct-avatar-lg{width:80px; height:80px; flex-shrink:0; border-radius:50%; background:var(--accent); color:#fff;
    font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; object-fit:cover}
  /* The clock lives in the header's middle column at every width (on phones, in the middle of its first
     row - see the phone section). It used to sit in the calendar toolbar; centring it here is also what
     ended the room tabs' old absolute 262px alignment to "+ New Event", since an absolutely positioned
     strip and a centred column can overlap each other at narrow widths. The tabs now simply flow after
     the brand, and scroll sideways rather than wrap. */
  html.signed-in #headerClock{display:block; justify-self:center; font-variant-numeric:tabular-nums;
    font-weight:600; font-size:13px; color:var(--muted); letter-spacing:.5px; white-space:nowrap}
  #headerClock{display:none} /* app chrome - not shown over the sign-in page */
  .title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px}
  @media(max-width:1000px){.title{font-size:16px}}
  @media(max-width:480px){.title{font-size:14px}}
  .title span{color:var(--accent)}
  .controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  @media(max-width:1000px){.controls{gap:6px}}
  .controls label{font-size:11px; color:var(--muted); font-weight:600}
  @media(max-width:1000px){.controls label{font-size:10px}}
  button,select,input{font:inherit}
  button,select{padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-weight:600; cursor:pointer}
  /* No browser tap flash anywhere in the app. Android Chrome paints a translucent blue wash over whatever
     was touched and holds it for a moment after the finger leaves, which on a small control reads as a
     stray blue line appearing and then going. Every tappable thing here already has its own :hover/:active
     answer, drawn instantly and in the app's own colours. */
  button,select,input,.tab,.chip,.sheet-row,[onclick]{-webkit-tap-highlight-color:transparent}
  button:active{filter:brightness(1.15)}
  /* Controls aren't prose: a tap that lands slightly long shouldn't start selecting their labels and pop
     the selection handles. Deliberately listed one by one rather than set on everything, so the things
     worth copying - a booking's details, an account's address, the temp password in a reset notice - stay
     selectable. */
  button,.tab,.chip,.sheet-row,.mini-cal-day,.mini-cal-month,.mini-cal-day-header,
  .month-day-header,.week-header-cell,.week-hour-label{user-select:none; -webkit-user-select:none}
  select{font-weight:500}
  select{-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
    padding-right:32px !important;
    background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:12px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101825' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;}
  [data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0F2F5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;}
  @media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0F2F5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;}
  }
  button:hover{border-color:var(--accent); color:var(--accent)}
  button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
  button.primary:hover{color:#fff; opacity:.92}
  /* ANY disabled button, app-wide (e.g. "Add user"/"Create workspace" once a capacity limit is hit,
     or Deactivate/Remove on a workspace with an active subscription - see
     updateAddUserCapacityWarning/updateHostTenantCount/renderWorkspaceRow in admin.js), otherwise
     keeps whatever custom background/border-color it had (accent blue for .primary, danger red for
     .danger, etc.) and looks completely indistinguishable from a working button - browsers don't
     dim a custom color automatically just because the element is disabled. Placed after every
     other button rule above (including .primary/.danger's own colors) so it wins on source order
     despite matching specificity, whichever class the disabled button happens to have. */
  button:disabled{background:var(--line); border-color:var(--line); color:var(--muted); cursor:not-allowed}
  button:disabled:hover{background:var(--line); border-color:var(--line); color:var(--muted)}
  button.danger{border-color:#C0392B; color:#C0392B}

  /* A consistent SVG line icon for each theme choice: half sun/half moon = follow the operating
     system, sun = light, moon = dark. CSS masks avoid the
     platform-dependent size, color, and alignment differences of emoji. data-theme-mode is set
     synchronously in each page head, so the correct icon is present from the first paint. */
  /* A circle, square width and height, to sit as a pair with the round account monogram beside it. */
  .theme-toggle{position:relative; width:32px; height:32px; padding:0; font-size:16px; flex-shrink:0; background:transparent; border:1px solid var(--line); border-radius:50%; cursor:pointer}
  .theme-toggle:hover{border-color:var(--accent)}
  .theme-toggle .theme-icon{display:none !important}
  .theme-toggle::before,
  .theme-toggle::after{
    content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
    pointer-events:none;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
  html[data-theme-mode="system"] .theme-toggle{
    border-color:transparent;
    background:linear-gradient(var(--card),var(--card)) padding-box,
      linear-gradient(90deg,#F5B82E 0 50%,var(--accent) 50% 100%) border-box;
  }
  html[data-theme-mode="system"] .theme-toggle::before,
  html[data-theme-mode="light"] .theme-toggle::before{
    background:#F5B82E;
    -webkit-mask-image: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' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
    mask-image: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' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
  }
  html[data-theme-mode="system"] .theme-toggle::before{clip-path:inset(0 50% 0 0);}
  html[data-theme-mode="system"] .theme-toggle::after,
  html[data-theme-mode="dark"] .theme-toggle::before{
    background:var(--accent);
    -webkit-mask-image: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' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    mask-image: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' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  }
  html[data-theme-mode="system"] .theme-toggle::after{clip-path:inset(0 0 0 50%);}
  html[data-theme-mode="light"] .theme-toggle{border-color:#F5B82E; color:#F5B82E;}
  html[data-theme-mode="dark"] .theme-toggle{border-color:var(--accent); color:var(--accent);}
  html[data-theme-mode="light"] .theme-toggle::after,
  html[data-theme-mode="dark"] .theme-toggle::after{display:none;}

  /* Same circular accent-filled icon button the standalone onboarding-guide pages use for their
     own "Exit to PluraSpace" control (docs/onboarding/*.html) - the one shared definition for
     both, so they can't drift out of sync in size again (those pages used to carry their own
     duplicate 34px copy of this rule; removed in favor of this one, which the 1279px breakpoint
     below still grows to 34px on narrow screens, same as .theme-toggle). */
  .icon-btn{width:32px; height:32px; padding:0; border-radius:50%; flex-shrink:0;
    background:var(--accent); border:1px solid var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer}
  .icon-btn:hover{opacity:.88; color:#fff}
  /* Current-session action: the permanent text label is more discoverable than the old icon-only
     circle. Its restrained red outline communicates a consequential action without competing with
     the primary blue workspace controls. */
  .logout-btn{min-height:32px; padding:0 10px; border-radius:8px; flex-shrink:0;
    background:transparent; border:1px solid #C0392B; color:#E74C3C;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; font:inherit; font-size:11px; font-weight:700; white-space:nowrap}
  .logout-btn:hover{background:#C0392B; border-color:#C0392B; color:#fff}
  .logout-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}