/**
 * Neutral workspace frame. Presentation only: native pane order, visibility,
 * resizing and scrolling stay with Elastic. Never frame message iframes.
 * The compact/phone lifecycle is deliberately outside this desktop layer.
 */
@media screen and (min-width: 769px) {
  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout {
    box-sizing: border-box;
    position: relative;
    height: 100vh !important;
    padding: 8px 10px 8px 0;
    background: var(--cm-color-canvas) !important;
  }

  /* One perimeter instead of independent boxes; does not intercept drag handles. */
  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout::after {
    content: "";
    position: absolute;
    inset: 8px 10px 8px var(--cm-rail-width);
    /* The external rail is at 100; paint the left shadow above its background. */
    z-index: 101;
    border: 1px solid var(--cm-color-workspace-border);
    border-radius: 16px;
    box-shadow: var(--cm-shadow-workspace);
    pointer-events: none;
  }

  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout > :is(#layout-sidebar, #layout-list, #layout-content) {
    height: 100% !important;
    min-height: 0;
  }

  html:not(.iframe) #layout-menu {
    height: 100% !important;
    min-height: 0;
    border: 0;
    background: var(--cm-color-canvas) !important;
  }

  html #layout-menu > .popover-header,
  #taskmenu .special-buttons {
    width: var(--cm-rail-width) !important;
    background: var(--cm-color-canvas) !important;
  }

  html #layout-menu > .popover-header { height: 56px !important; min-height: 56px !important; }
  html #layout-menu > .popover-header img#logo {
    width: 30px !important;
    height: 30px !important;
  }

  #taskmenu a { margin-inline: 10px !important; }
  #taskmenu .action-buttons { width: var(--cm-rail-width) !important; padding-inline: 10px !important; }
  #taskmenu a.logout { color: var(--cm-color-text-muted) !important; }
  #taskmenu a.logout:hover { color: var(--cm-color-danger) !important; }

  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout-sidebar {
    background: var(--cm-color-surface-subtle) !important;
    border-right: 0 !important;
  }

  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout-sidebar > :is(.header, .footer) {
    background: transparent !important;
    border: 0 !important;
  }

  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout-list {
    background: var(--cm-color-list) !important;
    border-right: 1px solid var(--cm-color-divider) !important;
  }

  /* Continue the white mail rows through unused space and the empty state. */
  html:not(.iframe):not(.dark-mode) body.task-mail #layout-list {
    background: var(--cm-color-surface) !important;
  }

  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings) #layout-content {
    background: var(--cm-color-surface) !important;
    border-right: 0 !important;
    border-radius: 0 16px 16px 0;
    overflow: clip;
  }

  html:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings):not(.action-compose) #layout-sidebar {
    border-radius: 16px 0 0 16px;
    overflow: clip;
  }

  html:not(.iframe) body.task-mail.action-show #layout-content { border-radius: 16px; }
  html:not(.iframe) body.task-mail.action-show #layout-content > .scroller { padding: 0 !important; }
  html:not(.iframe) body.task-mail.action-show #layout-content .frame-content { padding: 0 !important; }

  /* In medium layouts Elastic can hide the sidebar entirely. */
  html.layout-normal:not(.iframe) body:is(.task-mail, .task-addressbook, .task-settings):not(.cm-folder-rail):not(.action-compose) #layout-list {
    border-radius: 16px 0 0 16px;
    overflow: clip;
  }

  html:not(.iframe) body.task-mail #messagelist-header,
  html:not(.iframe) body.task-mail #layout-list > :is(.searchbar, .footer) {
    background: transparent !important;
    border: 0 !important;
  }

  html:not(.iframe) body.task-mail:is(.action-none, .action-show, .action-compose) #layout-content > .header {
    border-bottom: 0 !important;
  }

  #mailboxlist li.mailbox.selected > a { border-left-color: transparent !important; }
  #layout-sidebar .quota-widget { background: transparent; }
  #layout-list #mailsearchform { background: var(--cm-color-search) !important; }
  #layout-list > .footer.pagenav .rcpagejumper { background: var(--cm-color-surface-subtle) !important; }

  #messagelist tr.message > td { border-bottom: 0 !important; box-shadow: none !important; }
  #messagelist tr.message.selected,
  #messagelist tr.message.selected:hover { background: var(--cm-color-list-selected) !important; }

  /* Shared native task chrome, not a replacement Contacts/Settings workflow. */
  body:is(.task-addressbook, .task-settings) #layout-list > :is(.header, .searchbar, .footer),
  body:is(.task-addressbook, .task-settings) #layout-content > .header {
    background: transparent !important;
    border-block: 0 !important;
  }

  body:is(.task-addressbook, .task-settings) :is(#directorylist, #savedsearchlist, #settings-menu) > li {
    border: 0 !important;
    background: transparent !important;
  }

  body:is(.task-addressbook, .task-settings) :is(#directorylist, #savedsearchlist, #settings-menu) > li > a {
    box-sizing: border-box;
    width: calc(100% - 16px);
    margin: 2px 8px;
    border: 0 !important;
    border-radius: var(--cm-radius-row);
    color: var(--cm-color-text) !important;
  }

  body:is(.task-addressbook, .task-settings) :is(#directorylist, #savedsearchlist, #settings-menu) > li.selected > a {
    background: var(--cm-color-accent-soft) !important;
    color: var(--cm-color-accent-strong) !important;
    font-weight: 600;
  }

  body:is(.task-addressbook, .task-settings) :is(#directorylist, #savedsearchlist, #settings-menu) > li > a:hover {
    background: var(--cm-color-surface-hover) !important;
  }

  body.task-settings #sections-table tr > td {
    color: var(--cm-color-text) !important;
    border-color: transparent !important;
  }
  body.task-settings #sections-table tr.selected > td {
    color: var(--cm-color-accent-strong) !important;
    background: var(--cm-color-accent-soft) !important;
  }
  body.task-settings #sections-table:focus-visible tr.focused > td,
  body:is(.task-addressbook, .task-settings) :is(#directorylist, #savedsearchlist, #settings-menu) a:focus-visible {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: -2px;
  }

  body.task-addressbook #layout-list .searchbar form { background: var(--cm-color-search); border-radius: 10px; }
  body.task-addressbook #layout-list .searchbar #searchform {
    padding-inline: 40px 32px !important;
    color: var(--cm-color-text) !important;
    background: transparent !important;
  }

  /* Compose reverses the pane order: editor first, options last. */
  html:not(.iframe) body.task-mail.action-compose #layout-content { border-radius: 16px 0 0 16px; }
  html:not(.iframe) body.task-mail.action-compose #layout-sidebar { border-radius: 0 16px 16px 0; overflow: clip; }
  html:not(.iframe) body.task-mail.action-compose #layout:not(:has(> #layout-sidebar)) > #layout-content { border-radius: 16px; }

  /* Dedicated mail windows omit the application rail: frame their actual panes. */
  html:not(.iframe) body.task-mail:is(.action-show, .action-compose, .action-get) #layout:not(:has(> #layout-menu)) {
    padding-left: 10px;
  }
  html:not(.iframe) body.task-mail:is(.action-show, .action-compose, .action-get) #layout:not(:has(> #layout-menu))::after {
    left: 10px;
  }
  html:not(.iframe) body.task-mail.action-get #layout:not(:has(> #layout-menu)) > #layout-content {
    border-radius: 16px;
  }

  /* Action contrast must invert with the neutral dark palette. */
  body:is(.task-mail, .task-addressbook, .task-settings) .btn-primary {
    color: var(--cm-color-on-action) !important;
    background: var(--cm-color-accent-strong) !important;
    border-color: var(--cm-color-accent-strong) !important;
  }

  /* A quiet divider separates near-white navigation without changing pane width. */
  html:not(.iframe):not(.dark-mode) body:is(.task-mail, .task-addressbook):not(.action-compose) #layout-sidebar {
    box-shadow: inset -1px 0 #eaeaea;
  }
  html:not(.iframe):not(.dark-mode) body:is(.task-mail, .task-addressbook) .ui-widget-overlay {
    background: rgb(24 24 24 / 20%);
    opacity: 1;
  }
}

/* Original two-tone graphite artwork has a deliberate neutral dark counterpart. */
@media screen and (min-width: 481px) {
  html.dark-mode #taskmenu a:is(.compose, .mail, .contacts, .calendar, .settings)::before,
  html.dark-mode #taskmenu .cm-agenda-preview::before,
  html.dark-mode #layout-menu img#logo { filter: invert(1); }
}