:root { --motion-ease:cubic-bezier(.22,.72,.2,1); --motion-reveal:260ms; --motion-window:240ms; --motion-popup:180ms; }
@keyframes crm-page-in { from { opacity:.72; } to { opacity:1; } }
@keyframes crm-content-in { from { opacity:.72; } to { opacity:1; } }
.crm-page-enter { animation:crm-page-in var(--motion-reveal) var(--motion-ease); }
.crm-pane:not([hidden]),.crm-content-enter { animation:crm-content-in var(--motion-reveal) var(--motion-ease); }

/* Logical hidden/open state stays synchronous. CSS keeps only the exit frame. */
@supports (transition-behavior:allow-discrete) {
  html:root .crm-feed-item {
    interpolate-size:allow-keywords; height:auto; min-height:0; opacity:1; translate:0 0;
    transition:height var(--motion-reveal) var(--motion-ease),opacity 180ms ease,translate var(--motion-reveal) var(--motion-ease),padding-block var(--motion-reveal) var(--motion-ease),margin-block var(--motion-reveal) var(--motion-ease),display var(--motion-reveal) allow-discrete;
  }
  html:root .crm-feed-item[hidden] {
    height:0; padding-block:0; margin-block:0 calc(-1 * var(--crm-removal-gap,0px)); opacity:0; translate:0 -8px; overflow:clip; pointer-events:none;
  }
  html:root .crm-popup {
    opacity:1; translate:0 0; animation:none;
    transition:opacity var(--motion-popup) ease,display var(--motion-popup) allow-discrete,overlay var(--motion-popup) allow-discrete;
  }
  html:root .crm-popup[hidden], html:root .crm-popup[popover]:not(:popover-open) { opacity:0; pointer-events:none; }
  @starting-style { html:root .crm-popup:not([hidden]) { opacity:0; } }
  .crm-disclosure { opacity:1; transition:opacity 180ms ease,display var(--motion-reveal) allow-discrete; }
  .crm-disclosure[hidden] { opacity:0; pointer-events:none; }
  @starting-style { .crm-disclosure:not([hidden]) { opacity:0; } }
  html:root .managed-window {
    transition:opacity var(--motion-window) ease,scale 270ms var(--motion-ease),translate 270ms var(--motion-ease),display 270ms allow-discrete;
  }
  html:root .managed-window[hidden]:not(.window-minimizing):not(.window-restoring) { opacity:0; pointer-events:none; }
  html:root .managed-window[hidden][style*="--crm-exit-width"],html:root [hidden] > .crm-standard-window[style*="--crm-exit-width"] {
    width:var(--crm-exit-width) !important; height:var(--crm-exit-height) !important; overflow:clip;
  }
  @starting-style {
    html:root .managed-window:not([hidden]):not(.window-minimizing):not(.window-restoring) { opacity:0; }
  }
  :is(.employee-backdrop,.profile-backdrop,.task-backdrop) { transition:opacity var(--motion-window) ease,display var(--motion-window) allow-discrete; }
  :is(.employee-backdrop,.profile-backdrop,.task-backdrop)[hidden] { opacity:0; pointer-events:none; }
  @starting-style { :is(.employee-backdrop,.profile-backdrop,.task-backdrop):not([hidden]) { opacity:0; } }
  html:root #testing-focus:is(.testing-detail-open,.testing-attempt-open) {
    opacity:1; transition:opacity var(--motion-window) ease,display var(--motion-window) allow-discrete;
  }
  html:root #testing-focus:is(.testing-detail-open,.testing-attempt-open)[hidden] { opacity:0; pointer-events:none; }
  @starting-style {
    html:root #testing-focus:is(.testing-detail-open,.testing-attempt-open):not([hidden]) { opacity:0; }
  }
}
/* Keep real select controls, their validation, labels, keyboard and form values.
   The browser picker lives in the top layer, outside clipped forms and dialogs. */
@supports (appearance:base-select) {
  html:root select:not([multiple]):is(:not([size]),[size="0"],[size="1"]) {
    appearance:base-select;
    display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-inline-size:0;
    &::picker-icon { color:var(--text-secondary); flex-shrink:0; transition:rotate 220ms var(--motion-ease); }
    &:open::picker-icon { rotate:180deg; }
    &::picker(select) {
      appearance:base-select;
      box-sizing:border-box; inline-size:max-content; min-inline-size:anchor-size(width); max-inline-size:calc(100vw - 24px);
      max-block-size:min(340px, 60dvh); overflow:auto; overscroll-behavior:contain;
      padding:6px; margin-block:6px;
      border:1px solid var(--border-strong); border-radius:var(--radius-lg);
      background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-dropdown);
      font:inherit; opacity:0;
      transition:opacity var(--motion-popup) ease,display var(--motion-popup) allow-discrete,overlay var(--motion-popup) allow-discrete;
    }
    &:open::picker(select) { opacity:1; }
    @starting-style { &:open::picker(select) { opacity:0; } }
    option {
      min-block-size:40px; padding:10px 12px; gap:10px;
      border:0; border-radius:var(--radius-sm); white-space:normal; overflow-wrap:break-word;
      background:transparent; color:var(--text-primary); cursor:pointer;
      transition:background-color 140ms ease,color 140ms ease;
    }
    option:checked { background:var(--theme-soft); color:var(--text-primary); font-weight:600; }
    option:is(:hover,:focus-visible) { background:var(--theme-hover); outline:1px solid var(--theme-accent); outline-offset:-1px; }
    option:disabled { color:var(--text-secondary); opacity:.6; cursor:not-allowed; }
    option::checkmark { color:var(--theme-accent); }
    optgroup { color:var(--text-secondary); padding:4px 0; }
  }
  /* Compact page-size buttons need room for both the number and the checkmark. */
  html:root select:is([data-picker-compact],#news-page-size,#task-page-size) {
    &::picker(select) { inline-size:max-content; min-inline-size:anchor-size(width); }
    option { white-space:nowrap; overflow-wrap:normal; }
  }
}
@supports (interpolate-size:allow-keywords) {
  .crm-disclosure { interpolate-size:allow-keywords; height:auto; transition:height var(--motion-reveal) var(--motion-ease),opacity 180ms ease,padding-block var(--motion-reveal) var(--motion-ease),margin-block var(--motion-reveal) var(--motion-ease),display var(--motion-reveal) allow-discrete; }
  .crm-disclosure.crm-size-transition { overflow:clip; overflow-clip-margin:4px; }
  .crm-disclosure[hidden] { height:0; min-height:0; padding-block:0; margin-block:0; overflow:clip; }
  @starting-style { .crm-disclosure:not([hidden]) { height:0; min-height:0; opacity:0; padding-block:0; margin-block:0; } }
  details:not(#structure-view details,.testing-question-editor,.testing-departments) { interpolate-size:allow-keywords; }
  details:not(#structure-view details,.testing-question-editor,.testing-departments)::details-content { height:0; opacity:0; overflow:clip; transition:height var(--motion-reveal) var(--motion-ease),opacity 180ms ease,content-visibility var(--motion-reveal) allow-discrete; }
  details[open]:not(#structure-view details,.testing-question-editor,.testing-departments)::details-content { height:auto; opacity:1; }
  .testing-departments::details-content { overflow:visible; transition:content-visibility var(--motion-reveal) allow-discrete; }
  .testing-departments .testing-department-options { opacity:1; translate:0 0; transition:opacity 180ms ease,translate var(--motion-reveal) var(--motion-ease); }
  .testing-departments:not([open]) .testing-department-options { opacity:0; translate:0 -6px; pointer-events:none; }
}
@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
  html:root :is(.crm-disclosure,.crm-feed-item,.crm-popup,.managed-window,.employee-backdrop,.profile-backdrop,.task-backdrop,.crm-overlay,.crm-overlay>section,.testing-department-options) { transition:none !important; }
  .crm-pane,.crm-page-enter,.crm-content-enter { animation:none !important; }
  select::picker(select), select::picker-icon, select option { transition:none !important; }
  details::details-content { transition:none !important; }
}