/* Shared workspace motion (Recruit, Hire, People, My). Keep geometry, focus and actions unchanged.
   Owner 08.10.2026: under prefers-reduced-motion nothing travels, scales or springs; a state change
   keeps a short opacity/colour cross-fade (≤200ms). Tokens come from *.tokens.css (--hr-motion-*,
   --hr-press-*, --hr-dir); every var() here has a fallback so the file degrades without them. */
:root {
  --hr-workspace-enter: 280ms;
  --hr-workspace-panel: 400ms;
  --hr-workspace-dialog: 180ms;
  --hr-workspace-hover: 160ms;
  --hr-workspace-distance: 6px;
  --hr-workspace-ease: cubic-bezier(.16, 1, .3, 1);
  /* Exact time-reverse of --hr-workspace-ease: what came in on one curve leaves on its mirror. */
  --hr-workspace-ease-exit: cubic-bezier(.7, 0, .84, 0);
}
[data-theme="sapphire"] {
  --hr-workspace-enter: 340ms;
  --hr-workspace-panel: 500ms;
  --hr-workspace-dialog: 220ms;
  --hr-workspace-hover: 200ms;
  --hr-workspace-distance: 9px;
}
@keyframes hr-workspace-enter {
  from { opacity: .75; translate: 0 var(--hr-workspace-distance); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hr-workspace-badge {
  from { opacity: .4; scale: .9; }
  to { opacity: 1; scale: 1; }
}
.view:not([hidden]) {
  animation: hr-workspace-enter var(--hr-workspace-enter) var(--hr-workspace-ease);
}
#view-overview:not([hidden]) { animation: none; }
#view-overview .sapphire-home-heading,
#view-overview .atelier-metrics,
#view-overview .sapphire-home-grid > section {
  animation: hr-workspace-enter var(--hr-workspace-panel) var(--hr-workspace-ease) backwards;
}
#view-overview .atelier-metrics { animation-delay: 30ms; }
#view-overview .sapphire-home-grid > section:nth-child(2) { animation-delay: 45ms; }
#view-overview .sapphire-home-grid > section:nth-child(3) { animation-delay: 75ms; }
#view-overview .sapphire-home-grid > section:nth-child(4) { animation-delay: 90ms; }
#view-overview .sapphire-home-grid > section:nth-child(5) { animation-delay: 105ms; }
.workspace-mail-count:not([hidden]) {
  animation: hr-workspace-badge 220ms var(--hr-workspace-ease);
}

/* ── Present / dismiss ────────────────────────────────────────────────────────────────────────
   Transitions, not keyframes: a close during the opening reverses from where the surface is, and
   the exit runs the entry path backwards on the mirrored curve at 0.8× the time. display/overlay
   are held with allow-discrete (transitions outrank `[hidden]{display:none!important}`); browsers
   without @starting-style keep today's instant open/close. A surface on its way out never takes
   pointer input. Contract for other areas:
     --hr-present-x / --hr-present-y / --hr-present-scale  where the surface comes from / goes to
     --hr-origin-x / --hr-origin-y                         transform-origin; set them inline from JS
                                                           (trigger centre minus surface rect, px)
                                                           to grow a dialog out of its trigger.
   The global dialog is an inline-end side sheet (workspace.css), so by default it arrives from and
   leaves toward that edge, mirrored in Hebrew through --hr-dir. Centred modals scale from origin. */
dialog {
  --hr-present-x: calc(var(--hr-motion-distance-medium, 24px) * var(--hr-dir, 1));
  --hr-present-y: 0px;
  --hr-present-scale: 1;
  --hr-origin-x: 50%;
  --hr-origin-y: 50%;
  z-index: var(--hr-layer-popover, 40);
  transform-origin: var(--hr-origin-x) var(--hr-origin-y);
  transition: opacity var(--hr-workspace-dialog) var(--hr-workspace-ease),
    translate var(--hr-workspace-dialog) var(--hr-workspace-ease),
    scale var(--hr-workspace-dialog) var(--hr-workspace-ease),
    display var(--hr-workspace-dialog), overlay var(--hr-workspace-dialog);
  transition-behavior: allow-discrete;
}
dialog:where(#app-dialog, #theme-dialog, #browser-setup, #onboarding-dialog, .vacancy-dialog,
  .collection-plan-dialog, .hr-present-center) {
  --hr-present-x: 0px;
  --hr-present-scale: var(--hr-motion-scale-present, .96);
}
dialog:not([open]) {
  opacity: 0;
  translate: var(--hr-present-x) var(--hr-present-y);
  scale: var(--hr-present-scale);
  pointer-events: none;
  transition-duration: calc(var(--hr-workspace-dialog) * .8);
  transition-timing-function: var(--hr-workspace-ease-exit);
}
@starting-style {
  dialog[open] {
    opacity: 0;
    translate: var(--hr-present-x) var(--hr-present-y);
    scale: var(--hr-present-scale);
  }
}
dialog::backdrop {
  transition: opacity var(--hr-workspace-dialog, 200ms) ease,
    display var(--hr-workspace-dialog, 200ms), overlay var(--hr-workspace-dialog, 200ms);
  transition-behavior: allow-discrete;
}
dialog:not([open])::backdrop {
  opacity: 0;
  pointer-events: none;
  transition-duration: calc(var(--hr-workspace-dialog, 200ms) * .8);
}
@starting-style {
  dialog[open]::backdrop { opacity: 0; }
}

/* ── Окно из карточки и лист снизу (владелец 09.10: «я не особо заметил новое»; web/lib/feel.js) ──
   data-hr-motion — появлением и уходом управляет feel.js (Web Animations, пружина settle): CSS лишь
   держит окно в документе через display/overlay, пока идёт анимация, — два пути не складываются.
   overlay есть только в Chrome: в Safari и Firefox окно после close() сразу выходит из верхнего слоя
   вместе со своим ::backdrop, и на время ухода feel.js ставит под него .hr-scrim-standin (ниже).
   Путь @starting-style выше остаётся для остальных окон и для браузеров без Web Animations.
   data-hr-morphing — окно летит из карточки: тень срезана clip-path и проявляется после посадки.
   data-hr-live — лист ведут палец или пружина: затемнение идёт за ним (--hr-scrim, 0…1; ::backdrop
   наследует переменную от окна, где браузер это умеет, иначе затемнение просто полное).
   Карточку, чьё окно открыто, приглушает feel.js (data-feel-lifted) — своими анимациями, не CSS. */
@property --hr-scrim { syntax: "<number>"; inherits: true; initial-value: 1; }
dialog[data-hr-motion] {
  --hr-present-x: 0px;
  --hr-present-y: 0px;
  --hr-present-scale: 1;
  transition-property: display, overlay, box-shadow;
  transition-duration: 800ms, 800ms, var(--hr-workspace-dialog);
  transition-timing-function: ease;
}
dialog[data-hr-motion]:not([open]) {
  transition-duration: 800ms, 800ms, 0ms;
  transition-timing-function: ease;
}
dialog[data-hr-morphing] { box-shadow: none !important; }
dialog[data-hr-live] { -webkit-user-select: none; user-select: none; }
dialog[data-hr-live]::backdrop {
  opacity: var(--hr-scrim, 1);
  transition: none !important;
}
/* Подменное затемнение на время ухода (Safari — iPhone, Firefox): тот же материал, что у ::backdrop
   темы (workspace.css, sapphire.css, collection-plan.css), на слой ниже окна. Ввод проходит насквозь;
   прозрачность ведёт feel.js — с той доли, что была на экране, до нуля на кривой листа или окна. */
.hr-scrim-standin {
  position: fixed;
  inset: 0;
  z-index: calc(var(--hr-layer-popover, 40) - 1);
  pointer-events: none;
  background: var(--hr-material-scrim, #18201540);
  -webkit-backdrop-filter: var(--hr-material-scrim-blur, blur(2px));
  backdrop-filter: var(--hr-material-scrim-blur, blur(2px));
}
.hr-scrim-standin[data-for="collection-plan-dialog"] { background: rgb(1 17 40 / 55%); }
[data-theme="sapphire"] .hr-scrim-standin {
  background: var(--hr-material-scrim, rgb(1 17 40 / 55%));
  -webkit-backdrop-filter: var(--hr-material-scrim-blur, blur(6px));
  backdrop-filter: var(--hr-material-scrim-blur, blur(6px));
}
@media (max-width: 760px) {
  /* На телефоне любое окно кабинета — лист снизу (§12): во всю ширину, скруглён сверху, до 92% экрана,
     с ручкой; появляется снизу и уходит вниз (feel.js), без JS — короткий подъём с наплывом. */
  dialog {
    --hr-present-x: 0px;
    --hr-present-y: var(--hr-motion-distance-medium, 24px);
    --hr-present-scale: 1;
    --hr-sheet-fill: var(--white, #fffefa);
  }
  [data-theme="sapphire"] dialog { --hr-sheet-fill: var(--hr-surface-paper, #fff); }
  /* Специфичность (1,0,1): у #app-dialog, #theme-dialog, #browser-setup, #onboarding-dialog своя
     геометрия по id (app.css) — лист её перекрывает. Отступы по бокам и снизу у окон свои. */
  dialog:is(#candidate-dialog, #app-dialog, #theme-dialog, #browser-setup, #onboarding-dialog, dialog) {
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 92vh;
    max-height: 92dvh;
    padding-top: 0;
    border-width: 1px 0 0;
    border-radius: var(--hr-radius-dialog, 20px) var(--hr-radius-dialog, 20px) 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Вторая «тень» — продолжение листа вниз цветом его фона: когда лист оттягивают выше верха (мягкий
       край до 160px) или он чуть перелетает после броска, под ним не открывается щель. */
    box-shadow: 0 -12px 40px rgb(6 23 44 / 18%), 0 160px 0 0 var(--hr-sheet-fill);
  }
  dialog#candidate-dialog { height: 92vh; height: 92dvh; }
  /* Ручка: видна всегда (липкая), над липкой шапкой карточки; за полосу с ней лист берут пальцем. */
  dialog::before {
    content: "";
    position: sticky;
    top: 8px;
    z-index: 6;
    display: block;
    width: 36px;
    height: 5px;
    margin: 8px auto 15px;
    border-radius: 3px;
    background: rgb(128 128 128 / 45%);
    background: color-mix(in srgb, currentColor 28%, transparent);
    pointer-events: none;
  }
  dialog::after { content: ""; display: block; height: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 760px) and (prefers-contrast: more) {
  dialog::before { background: color-mix(in srgb, currentColor 70%, transparent); }
}

/* Account popover: grows out of the account button (top inline-end corner) and goes back into it. */
.account-panel {
  --hr-origin-x: right;
  --hr-origin-y: top;
  transform-origin: var(--hr-origin-x) var(--hr-origin-y);
  transition: opacity var(--hr-workspace-dialog) var(--hr-workspace-ease),
    translate var(--hr-workspace-dialog) var(--hr-workspace-ease),
    scale var(--hr-workspace-dialog) var(--hr-workspace-ease),
    display var(--hr-workspace-dialog);
  transition-behavior: allow-discrete;
}
[dir="rtl"] .account-panel { --hr-origin-x: left; }
.account-panel[hidden] {
  opacity: 0;
  translate: 0 calc(var(--hr-motion-distance-small, 8px) * -.5);
  scale: var(--hr-motion-scale-present, .96);
  pointer-events: none;
  transition-duration: calc(var(--hr-workspace-dialog) * .8);
  transition-timing-function: var(--hr-workspace-ease-exit);
}
@starting-style {
  .account-panel:not([hidden]) {
    opacity: 0;
    translate: 0 calc(var(--hr-motion-distance-small, 8px) * -.5);
    scale: var(--hr-motion-scale-present, .96);
  }
}

/* Status toast (#toast, or .hr-toast for new ones): rises from below, sinks back the same way.
   Toggle the hidden attribute; re-showing mid-exit reverses from the current frame. Feedback kind
   via data-kind="status|completion|warning|error" (role=status / role=alert stays in JS). */
:is(.toast, .hr-toast) {
  transition: opacity var(--hr-workspace-dialog) var(--hr-workspace-ease),
    translate var(--hr-workspace-dialog) var(--hr-workspace-ease),
    display var(--hr-workspace-dialog);
  transition-behavior: allow-discrete;
}
:is(.toast, .hr-toast)[hidden] {
  opacity: 0;
  translate: 0 var(--hr-motion-distance-small, 8px);
  pointer-events: none;
  transition-duration: calc(var(--hr-workspace-dialog) * .8);
  transition-timing-function: var(--hr-workspace-ease-exit);
}
@starting-style {
  :is(.toast, .hr-toast):not([hidden]) { opacity: 0; translate: 0 var(--hr-motion-distance-small, 8px); }
}
:is(.toast, .hr-toast)[data-kind="completion"] { --hr-toast-accent: var(--hr-color-success, #237140); }
:is(.toast, .hr-toast)[data-kind="warning"] { --hr-toast-accent: var(--hr-color-warning, #9b5700); }
:is(.toast, .hr-toast)[data-kind="error"] { --hr-toast-accent: var(--hr-color-danger, #b32336); }
:is(.toast, .hr-toast)[data-kind]:not([data-kind="status"]) {
  border-inline-start: 3px solid var(--hr-toast-accent, currentColor);
}

/* ── Press feedback (§1 Response) ─────────────────────────────────────────────────────────────
   Instant on pointer-down (press token), eased back on release (release token, critically damped).
   The individual `scale` property composes with transforms already on these elements (the rotated
   home card). Controls shrink to --hr-press-scale, cards to --hr-press-scale-card,
   full-width list rows tint instead of shrinking, inline text buttons dim. Disabled never reacts.
   iOS Safari applies :active only when a touchstart listener exists (handoff: shell.js). */
:is(.button, .hr-button, .icon-button, .hours-step, .pomoshchnik-fab, .workspace-search, .workspace-mail,
  .account-button, .workspace-nav-toggle, .workspace-nav-close),
.topbar .text-button, .contour-switcher a, .onboarding-steps button,
:is(.hire-card, .kalk-card, .spravochnik-card, .sapphire-person),
.theme-choices > button, .browser-choices > button,
.sidebar :is(.nav-item, .nav-subitem, .nav-contour-head, .nav-group > summary, .nav-more > summary),
:is(.crm-task-row, .atelier-candidate, .text-button, .hours-name) {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hr-workspace-hover) ease,
    border-color var(--hr-workspace-hover) ease,
    color var(--hr-workspace-hover) ease,
    box-shadow var(--hr-workspace-hover) ease,
    opacity var(--hr-workspace-hover) ease,
    scale var(--hr-motion-duration-release, 180ms) var(--hr-motion-easing-settle, cubic-bezier(.16, 1, .3, 1));
}
:is(.button, .hr-button, .icon-button, .hours-step, .pomoshchnik-fab, .workspace-search, .workspace-mail,
  .account-button, .workspace-nav-toggle, .workspace-nav-close, .topbar .text-button, .contour-switcher a,
  .onboarding-steps button):active:not(:disabled):not([aria-disabled="true"]) {
  scale: var(--hr-press-scale, .97);
  transition-duration: var(--hr-motion-duration-press, 90ms);
  transition-timing-function: ease-out;
}
:is(.hire-card, .kalk-card, .spravochnik-card, .sapphire-person, .theme-choices > button,
  .browser-choices > button):active:not(:disabled):not([aria-disabled="true"]) {
  scale: var(--hr-press-scale-card, .985);
  transition-duration: var(--hr-motion-duration-press, 90ms);
  transition-timing-function: ease-out;
}
:is(.sidebar :is(.nav-item, .nav-subitem, .nav-contour-head, .nav-group > summary, .nav-more > summary),
  .crm-task-row, .atelier-candidate):active:not(:disabled):not([aria-disabled="true"]):not(.active):not([aria-current]) {
  background-color: color-mix(in srgb, currentColor 14%, transparent);
  transition-duration: var(--hr-motion-duration-press, 90ms);
  transition-timing-function: ease-out;
}
:is(.text-button:not(.topbar *), .hours-name):active:not(:disabled):not([aria-disabled="true"]) {
  opacity: var(--hr-press-opacity, .7);
  transition-duration: var(--hr-motion-duration-press, 90ms);
  transition-timing-function: ease-out;
}
.candidate-table tbody tr {
  transition: background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="sapphire"] .sapphire-home-grid > .hr-surface {
    transition: box-shadow 260ms var(--hr-workspace-ease), border-color 260ms ease;
  }
  [data-theme="sapphire"] .sapphire-home-grid > .hr-surface:hover {
    box-shadow: var(--hr-shadow-floating);
  }
  [data-theme="sapphire"] .topbar .workspace-mail:hover {
    box-shadow: var(--hr-shadow-active);
  }
  [data-theme="atelier"] .theme-choices > button:hover {
    box-shadow: var(--hr-shadow-surface);
  }
}
@media (max-width: 760px) {
  :root, [data-theme="sapphire"] {
    --hr-workspace-enter: 220ms;
    --hr-workspace-panel: 300ms;
    --hr-workspace-distance: 4px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop, .hr-scrim-standin { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  dialog, .account-panel { border-color: var(--hr-border-strong, CanvasText); }
}
@media (prefers-reduced-motion: reduce) {
  /* Owner 08.10.2026 «как у Apple»: no travel, no scale, no spring; state changes cross-fade ≤200ms.
     !important only to get past the old kill-alls (workspace.css:12, app.css:26), which stop fades. */
  :root, [data-theme="sapphire"] {
    --hr-workspace-enter: 180ms;
    --hr-workspace-panel: 180ms;
    --hr-workspace-dialog: 180ms;
    --hr-workspace-hover: 100ms;
    --hr-workspace-distance: 0px;
    --hr-workspace-ease: ease;
    --hr-workspace-ease-exit: ease;
  }
  .view:not([hidden]) {
    --hr-fade-from: .75;
    animation: hr-fade var(--hr-workspace-enter) ease !important;
  }
  #view-overview .sapphire-home-heading, #view-overview .atelier-metrics,
  #view-overview .sapphire-home-grid > section {
    animation: none !important;
  }
  .workspace-mail-count:not([hidden]) {
    animation: hr-fade var(--hr-workspace-hover) ease !important;
  }
  dialog, .account-panel, .toast, .hr-toast {
    translate: none !important;
    scale: none !important;
    transition-property: opacity, display, overlay !important;
    transition-duration: var(--hr-workspace-dialog) !important;
    transition-timing-function: ease !important;
    transition-behavior: allow-discrete !important;
  }
  dialog::backdrop {
    transition-property: opacity, display, overlay !important;
    transition-duration: var(--hr-workspace-dialog, 180ms) !important;
    transition-timing-function: ease !important;
    transition-behavior: allow-discrete !important;
  }
  :is(.button, .hr-button, .icon-button, .hours-step, .pomoshchnik-fab, .workspace-search, .workspace-mail,
    .account-button, .workspace-nav-toggle, .workspace-nav-close),
  .topbar .text-button, .contour-switcher a, .onboarding-steps button,
  :is(.hire-card, .kalk-card, .spravochnik-card, .sapphire-person),
  .theme-choices > button, .browser-choices > button,
  .sidebar :is(.nav-item, .nav-subitem, .nav-contour-head, .nav-group > summary, .nav-more > summary),
  :is(.crm-task-row, .atelier-candidate, .text-button, .hours-name),
  .candidate-table tbody tr, .sapphire-home-grid > .hr-surface {
    scale: none !important;
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
    transition-duration: var(--hr-workspace-hover) !important;
    transition-timing-function: ease !important;
  }
  /* The press stays visible without moving: controls and cards dim instead of shrinking. */
  :is(.button, .hr-button, .icon-button, .hours-step, .pomoshchnik-fab, .workspace-search, .workspace-mail,
    .account-button, .workspace-nav-toggle, .workspace-nav-close, .topbar .text-button, .contour-switcher a,
    .onboarding-steps button, .hire-card, .kalk-card, .spravochnik-card, .sapphire-person,
    .theme-choices > button, .browser-choices > button):active:not(:disabled):not([aria-disabled="true"]) {
    opacity: var(--hr-press-opacity, .7);
  }
  :is(.button, .hr-button, .icon-button, .hours-step, .pomoshchnik-fab, .workspace-search, .workspace-mail,
    .account-button, .workspace-nav-toggle, .workspace-nav-close, .topbar .text-button, .contour-switcher a,
    .onboarding-steps button, .hire-card, .kalk-card, .spravochnik-card, .sapphire-person,
    .theme-choices > button, .browser-choices > button, .sidebar .nav-item, .sidebar .nav-subitem,
    .sidebar .nav-contour-head, .sidebar summary, .crm-task-row, .atelier-candidate, .text-button,
    .hours-name):active {
    transition-duration: 0ms !important;
  }
}