/* The regular browser and mobile layouts are untouched. In supported desktop
   app windows, the existing toolbar occupies the native title-bar area. The
   browser supplies the safe rectangle, including left-hand window controls. */
.installed-auth-titlebar { display:none; }

@media screen and (display-mode: window-controls-overlay) {
  :root {
    --app-titlebar-height:max(44px, env(titlebar-area-height, 44px));
    --app-titlebar-bottom:calc(env(titlebar-area-y, 0px) + var(--app-titlebar-height));
  }
  body::before {
    content:"";
    position:fixed;
    inset:0 0 auto;
    height:var(--app-titlebar-bottom);
    background:#fff;
    border-bottom:1px solid var(--rule, #dfe5ed);
    z-index:90;
    pointer-events:none;
  }
  .product-experience .utility-bar,
  .installed-auth-titlebar {
    display:flex;
    align-items:center;
    position:fixed;
    top:env(titlebar-area-y, 0px);
    left:env(titlebar-area-x, 0px);
    width:env(titlebar-area-width, 100%);
    height:var(--app-titlebar-height);
    min-height:var(--app-titlebar-height);
    box-sizing:border-box;
    padding:4px 12px;
    gap:10px;
    z-index:91;
    background:#fff;
    border-bottom:1px solid var(--rule, #dfe5ed);
    -webkit-app-region:drag;
    app-region:drag;
    user-select:none;
  }
  .utility-bar :is(a, button, input, select, textarea, [role="button"], [contenteditable], [tabindex]),
  .utility-bar :is(a, button, input, select, textarea, [role="button"], [contenteditable], [tabindex]) *,
  .installed-auth-titlebar a {
    -webkit-app-region:no-drag;
    app-region:no-drag;
  }
  .product-experience .utility-bar .spacer { min-width:24px; }
  .product-experience .utility-context {
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .product-experience .utility-bar .searchbar {
    min-width:32px;
    min-height:32px;
    height:32px;
    padding-block:4px;
  }
  .product-experience .utility-alert,
  .product-experience .mobile-nav-toggle {
    width:32px;
    min-width:32px;
    height:32px;
    min-height:32px;
  }
  .product-experience .main { padding-top:var(--app-titlebar-bottom); }
  .product-experience .nav {
    top:var(--app-titlebar-bottom);
    height:calc(100dvh - var(--app-titlebar-bottom));
    max-height:calc(100dvh - var(--app-titlebar-bottom));
  }
  .product-experience .task-panel,
  .product-experience .task-panel.is-expanded {
    top:var(--app-titlebar-bottom);
    height:calc(100dvh - var(--app-titlebar-bottom));
    max-height:calc(100dvh - var(--app-titlebar-bottom));
  }
  .product-experience .task-panel[data-presentation=dialog] {
    top:var(--app-titlebar-bottom);
    height:fit-content;
    max-height:min(86dvh, 760px, calc(100dvh - var(--app-titlebar-bottom) - 16px));
  }
  .product-experience .task-panel[data-presentation=dialog] .task-panel-body {
    max-height:min(calc(86dvh - 120px), calc(100dvh - var(--app-titlebar-bottom) - 136px));
  }
  .quick-reference-dialog {
    max-height:calc(100dvh - var(--app-titlebar-bottom) - 32px);
    top:var(--app-titlebar-bottom);
  }
  .skip-link:focus, .auth-skip:focus { top:calc(var(--app-titlebar-bottom) + 8px); }
  .auth-page { padding-top:var(--app-titlebar-bottom); }
  .auth-page .auth-wrap { min-height:calc(100svh - var(--app-titlebar-bottom)); }
  .installed-auth-titlebar a {
    color:var(--ink, #15243b);
    font-size:13px;
    font-weight:650;
    text-decoration:none;
  }
}

@media screen and (display-mode: window-controls-overlay) and (max-width:880px) {
  .product-experience .utility-bar { gap:6px; padding-inline:6px; }
  .product-experience .utility-home {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .product-experience .utility-bar .searchbar { width:32px; flex-shrink:0; }
  .product-experience .utility-bar .spacer { min-width:12px; }
  .product-experience .task-panel[data-presentation=dialog] {
    top:auto;
    max-height:min(90dvh, calc(100dvh - var(--app-titlebar-bottom)));
  }
  .product-experience .task-panel[data-presentation=dialog] .task-panel-body {
    max-height:min(calc(90dvh - 112px), calc(100dvh - var(--app-titlebar-bottom) - 112px));
  }
  .quick-reference-dialog {
    height:calc(100dvh - var(--app-titlebar-bottom));
    max-height:calc(100dvh - var(--app-titlebar-bottom));
  }
}