/* Mail uses the same semantic tokens as Recruit. Message content stays neutral. */
:root{--ocean:var(--hr-color-navy);--ocean2:var(--hr-color-sapphire);--lime:var(--hr-color-lime);--paper:var(--hr-surface-canvas);--ink:var(--hr-color-ink);--muted:var(--hr-color-muted);--line:var(--hr-border-subtle);--shadow:var(--hr-shadow-floating)}
body{font-family:var(--hr-font-body);background:var(--paper);color:var(--ink)}
.mail-shell{height:100dvh;grid-template-columns:248px minmax(0,1fr)}
.mail-main{min-height:0;grid-template-rows:auto minmax(0,1fr)}
.mail-sidebar{background:var(--hr-background-chrome);color:var(--hr-color-inverse);min-height:0;border-inline-end:1px solid var(--hr-border-glass);padding:26px 18px}
.brand-row{align-items:center;min-height:52px}
.mail-brand img{width:152px;height:auto;max-width:100%;display:block}
.mail-brand .mail-logo-atelier{display:none}
.compose{background:var(--hr-color-lime);color:var(--hr-color-on-lime);border-radius:var(--hr-radius-control);min-height:48px;text-align:start;font-weight:500;box-shadow:var(--hr-shadow-primary)}
.mailbox-card{border-color:var(--hr-border-glass);background:var(--hr-background-glass);border-radius:var(--hr-radius-card);box-shadow:var(--hr-shadow-glass)}
.mailbox-card small,.sidebar-bottom span{color:var(--hr-color-inverse-muted)}
.mailbox-card strong{font-size:.8125rem;direction:ltr;text-align:start}
.mail-nav button{min-height:46px;text-align:start;color:var(--hr-color-inverse-muted);border:1px solid transparent;border-radius:var(--hr-radius-control)}
@media(hover:hover){.mail-nav button:hover{background:var(--hr-background-glass);color:var(--hr-color-inverse)}}
.mail-nav button.active{background:var(--hr-background-active);box-shadow:var(--hr-shadow-active);color:var(--hr-color-inverse);border-color:var(--hr-border-glass)}
.mail-nav em{color:var(--hr-color-lime)}
.sidebar-bottom{border-color:var(--hr-border-glass);padding-inline:6px;font-size:.8125rem}
.sidebar-bottom a{color:var(--hr-color-inverse-muted);padding-block:4px}
.mail-topbar{min-height:80px;height:auto;padding:16px 24px;gap:16px;background:var(--hr-surface-paper);color:var(--ink)}
.workspace{min-width:100px;max-width:240px}.workspace strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace span,.column-head span{color:var(--muted)}
.mail-search{margin-inline-start:auto;margin-left:0;flex:1;max-width:430px;width:auto;background:var(--hr-surface-subtle);min-height:44px;align-items:center;border-radius:var(--hr-radius-control)}
.mail-search input{color:var(--ink);min-width:0}.mail-search input::placeholder{color:var(--muted)}
.mail-theme-select,.mail-topbar select{border:1px solid var(--hr-border-control);border-radius:var(--hr-radius-control);background:var(--hr-surface-paper);color:var(--ink);min-height:44px;padding:8px 10px;font:inherit;font-size:.75rem;max-width:144px}
.account{background:var(--hr-surface-selected);color:var(--hr-color-sapphire);flex-shrink:0}
.mail-columns{border-radius:var(--hr-radius-dialog);background:var(--hr-surface-paper);box-shadow:var(--hr-shadow-surface);grid-template-columns:minmax(280px,36%) minmax(0,1fr)}
.thread-column{border-right:0;border-inline-end:1px solid var(--line);min-height:0}
.column-head{padding:24px}.column-head h1{font-weight:var(--hr-font-weight-heading);font-size:1.5625rem;line-height:1.1;letter-spacing:var(--hr-font-tracking-title)}
.column-head button{width:44px;height:44px;background:var(--hr-surface-paper);color:var(--ink);cursor:pointer}
.message-card{background:var(--hr-surface-paper);color:var(--ink);text-align:start;padding:18px 20px;min-width:0}
@media(hover:hover){.message-card:hover{background:var(--hr-surface-subtle)}}
.message-card.active{background:var(--hr-surface-selected)}
/* The unread mark is a permanent border whose colour changes: reading fades it without moving the row. */
.message-card{border-inline-start:3px solid transparent;padding-inline-start:17px}
.message-card.unread{border-inline-start-color:var(--hr-color-sapphire)}
.message-meta{min-width:0}.message-meta strong{min-width:0}.message-meta time{flex-shrink:0}
.message-flags{color:var(--muted)}
.reading-pane{background:var(--hr-surface-canvas)}
.reading-empty{min-height:320px;padding:32px}.reading-empty>span{color:var(--hr-color-sapphire)}
.reading-empty h2{letter-spacing:var(--hr-font-tracking-title);font-weight:var(--hr-font-weight-heading)}
.reading-empty p{line-height:1.6}
.thread-head{background:var(--hr-material-bar-opaque);padding:24px;flex-wrap:wrap}.thread-head>div{min-width:0}.thread-head h2{overflow-wrap:anywhere;font-weight:var(--hr-font-weight-heading)}
.thread-actions,.reply-bar{flex-wrap:wrap}.thread-actions button,.reply-bar button,.crm-strip button{background:var(--hr-surface-paper);color:var(--ink);min-height:44px;border-radius:var(--hr-radius-control)}
.crm-strip{background:var(--hr-surface-selected);border-color:var(--hr-border-subtle);margin:18px 24px;flex-wrap:wrap;font-size:.75rem}
.crm-strip button{margin-left:0;margin-inline-start:auto}
.mail-message{background:var(--hr-surface-paper);border-radius:var(--hr-radius-card)}
.mail-message header{flex-wrap:wrap;align-items:center}.sender{min-width:0;flex:1}.sender strong,.sender small{overflow-wrap:anywhere}.avatar{flex-shrink:0;background:var(--hr-surface-selected);color:var(--hr-color-sapphire)}
.message-body{overflow-wrap:anywhere;unicode-bidi:plaintext}
.attachment{color:var(--ink);background:var(--hr-surface-subtle);max-width:100%;overflow-wrap:anywhere;min-height:40px;cursor:pointer}
.reply-bar{background:var(--hr-material-bar-opaque);padding:14px 24px}
.reply-bar #reply{background:var(--hr-color-lime);color:var(--hr-color-on-lime);border-color:transparent}
.composer{background:var(--hr-surface-paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--hr-radius-dialog);height:min(740px,calc(100dvh - 32px));box-shadow:var(--hr-shadow-floating)}
.composer::backdrop{background:#04172da6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.composer header{background:var(--hr-background-hero);color:var(--hr-color-inverse);align-items:center}
.composer header button{width:44px;height:44px;cursor:pointer}
.composer input,.composer textarea{color:var(--ink);min-width:0;max-width:100%}
.composer input::placeholder,.composer textarea::placeholder{color:var(--muted)}
.composer textarea{min-height:100px;line-height:1.6}
.composer footer button{background:var(--hr-surface-paper);color:var(--ink);min-height:44px;border-radius:var(--hr-radius-control);cursor:pointer}
.composer footer .send{background:var(--hr-color-lime);color:var(--hr-color-on-lime);border-color:transparent}
.composer footer .attach{background:var(--hr-surface-subtle);color:var(--ink);min-height:44px;cursor:pointer;display:flex;align-items:center}
.compose-attachment{max-width:100%}.compose-attachment span{min-width:0;overflow-wrap:anywhere}.compose-attachment button{flex:none;min-width:32px;min-height:32px}
.draft-status{margin-left:0;margin-inline-start:auto}
:is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--hr-color-focus);outline-offset:3px}
.mail-sidebar :is(button,a):focus-visible{outline-color:var(--hr-color-focus-inverse)}
.mail-search:focus-within{outline:2px solid var(--hr-color-focus);outline-offset:2px}
[data-theme="atelier"] .mail-sidebar{color:var(--ink);border-color:var(--line)}
[data-theme="atelier"] .mail-logo-sapphire{display:none}
[data-theme="atelier"] .mail-brand .mail-logo-atelier{display:block;filter:grayscale(1) brightness(.15)}
[data-theme="atelier"] .mail-nav button,[data-theme="atelier"] .sidebar-bottom a{color:var(--ink)}
@media(hover:hover){[data-theme="atelier"] .mail-nav button:hover{background:var(--hr-surface-subtle)}}
[data-theme="atelier"] .mail-nav button.active{background:var(--ink);color:var(--hr-color-inverse);border-color:var(--ink)}
[data-theme="atelier"] .mail-nav em{color:var(--hr-color-sapphire)}
[data-theme="atelier"] .mail-nav button.active em{color:var(--hr-color-inverse)}
[data-theme="atelier"] .mailbox-card small,[data-theme="atelier"] .sidebar-bottom span{color:var(--muted)}
[data-theme="atelier"] .mail-sidebar :is(button,a):focus-visible{outline-color:var(--hr-color-focus)}
[data-theme="sapphire"] .mail-topbar{background:var(--hr-background-chrome);color:var(--hr-color-inverse);border-color:var(--hr-border-glass)}
[data-theme="sapphire"] .workspace span{color:var(--hr-color-inverse-muted)}
[data-theme="sapphire"] .mail-topbar :is(.mail-search,select){background:var(--hr-glass-opaque);color:var(--hr-color-inverse);border-color:var(--hr-border-glass)}
[data-theme="sapphire"] .mail-search input{color:var(--hr-color-inverse)}
[data-theme="sapphire"] .mail-search input::placeholder{color:var(--hr-color-inverse-muted)}
[data-theme="sapphire"] .mail-topbar option{background:var(--hr-glass-opaque);color:var(--hr-color-inverse)}
/* Mail settings, including provisioning and credential dialogs. */
.hr-mail-settings{background:var(--paper);color:var(--ink);overflow:auto;--blue:var(--hr-color-sapphire)}
.hr-mail-settings .header{height:auto;min-height:86px;background:var(--hr-background-chrome);color:var(--hr-color-inverse);gap:20px;flex-wrap:wrap;padding-block:18px;border-color:var(--hr-border-glass)}
.hr-mail-settings .header nav{flex-wrap:wrap;gap:16px}.hr-mail-settings #account{color:inherit}
.hr-mail-settings .support-shell{gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.hr-mail-settings .intro{padding-inline-end:0}.hr-mail-settings mark{background:var(--hr-surface-selected);color:var(--hr-color-sapphire);overflow-wrap:anywhere}
.hr-mail-settings :is(.conversation,.login-panel,.mail-dialog){background:var(--hr-surface-paper);border-color:var(--line);border-radius:var(--hr-radius-dialog);box-shadow:var(--hr-shadow-surface)}
.hr-mail-settings :is(.plan-note,.address-field,.mail-dialog input,.mailbox-actions button,.settings-grid .copy){background:var(--hr-surface-subtle);color:var(--ink);border-color:var(--line)}
.hr-mail-settings .mailbox-actions button{min-height:40px;border-radius:var(--hr-radius-control)}
.hr-mail-settings .button{border-radius:var(--hr-radius-control);background:var(--hr-color-lime);color:var(--hr-color-on-lime);min-height:44px}
.hr-mail-settings .button.secondary{background:var(--hr-surface-subtle);color:var(--ink);border:1px solid var(--line)}
.hr-mail-settings .button.danger{background:var(--hr-color-danger);color:#fff}
.hr-mail-settings .pill.ok,.hr-mail-settings .settings-grid dd.secret{background:var(--hr-surface-success);color:var(--hr-color-success)}
.hr-mail-settings .composer{height:auto;width:auto;padding:20px 26px;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.hr-mail-settings .composer label{display:block;padding:0;border:0}
.hr-mail-settings .composer input{padding:12px}
.hr-mail-settings .mail-dialog{max-height:calc(100dvh - 32px);overflow:auto}
[data-theme="atelier"] .hr-mail-settings .header{color:var(--ink);border-color:var(--line)}
/* Preserve the newer preview, conversation modal and delivery diagnostics. */
.message-preview-pane{background:var(--hr-surface-canvas);color:var(--ink)}
.preview-head{flex-wrap:wrap}.preview-head>div{min-width:0}.preview-head h2{overflow-wrap:anywhere;font-weight:var(--hr-font-weight-heading)}
.preview-head span,.delivery-diagnostic-title{color:var(--muted)}
.preview-meta{flex-wrap:wrap;overflow-wrap:anywhere}.preview-body{overflow-wrap:anywhere;unicode-bidi:plaintext}
.preview-actions{flex-wrap:wrap}.preview-actions button,.message-modal-foot button{min-height:44px;border-radius:var(--hr-radius-control);background:var(--hr-surface-paper);color:var(--ink);border-color:var(--line)}
.preview-actions button:last-child,.message-modal-foot button{background:var(--hr-color-lime);color:var(--hr-color-on-lime);border-color:transparent}
.message-modal{background:var(--hr-surface-paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--hr-radius-dialog);height:min(820px,calc(100dvh - 32px));box-shadow:var(--hr-shadow-floating)}
.message-modal::backdrop{background:#04172da6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.message-modal-shell{background:var(--hr-surface-canvas);min-height:0}
.message-modal-head{background:var(--hr-background-hero);color:var(--hr-color-inverse)}
.message-modal-head>div{min-width:0}.message-modal-head h2{overflow-wrap:anywhere;font-weight:var(--hr-font-weight-heading)}
.message-modal-head span{color:var(--hr-color-inverse-muted)}
.message-modal-head button{min-width:44px;min-height:44px;flex-shrink:0}
.message-modal-foot{background:var(--hr-surface-paper)}
.delivery-diagnostic{background:var(--hr-color-navy);color:var(--hr-color-inverse);overflow-wrap:anywhere}
@media(max-width:900px){.message-preview-pane{padding:22px 16px;min-height:calc(100dvh - 160px)}.message-modal-head{padding:16px}.modal-messages{padding:14px}}
/* One quiet entry, no animation on list refresh or message arrival. Travel and scale come from the
   distance/scale/press tokens, so under reduced motion every path in this file collapses to a short
   opacity cross-fade (owner 08.10.2026, «как у Apple»). */
@keyframes hr-mail-enter{from{opacity:.8;translate:0 calc(var(--hr-motion-distance-small) * .75)}to{opacity:1;translate:0 0}}
.mail-columns{animation:hr-mail-enter calc(var(--hr-motion-duration-normal) * .75) var(--hr-motion-ease)}

/* Press (§1): feedback on pointer-down, eased back on release. Controls shrink, list rows tint,
   the text-like back link dims. Hover tints live under (hover:hover) so touch never keeps them. */
:is(.compose,.column-head button,.thread-actions button,.reply-bar button,.crm-strip button,.preview-actions button,.message-modal-foot button,.message-modal-head button,.composer header button,.composer footer button,.composer footer .attach,button.attachment,.compose-attachment button,.mobile-menu,.mobile-close,.notice-close,.reading-back,.hr-mail-settings .mailbox-actions button,.hr-mail-settings .settings-grid .copy),.mail-nav button{-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease,opacity var(--hr-motion-duration-fast) ease,scale var(--hr-motion-duration-release) var(--hr-motion-easing-settle)}
.message-card{-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease,border-inline-start-color var(--hr-motion-duration-normal) ease,box-shadow 160ms ease,opacity var(--hr-motion-duration-fast) var(--hr-motion-easing-exit)}
:is(.compose,.column-head button,.thread-actions button,.reply-bar button,.crm-strip button,.preview-actions button,.message-modal-foot button,.message-modal-head button,.composer header button,.composer footer button,.composer footer .attach,button.attachment,.compose-attachment button,.mobile-menu,.mobile-close,.notice-close,.hr-mail-settings .mailbox-actions button,.hr-mail-settings .settings-grid .copy):active:not(:disabled):not([aria-disabled="true"]):not(.disabled){scale:var(--hr-press-scale);transition-duration:var(--hr-motion-duration-press);transition-timing-function:ease-out}
.reading-back:active{opacity:var(--hr-press-opacity);transition-duration:var(--hr-motion-duration-press)}
/* A pressed message already shows the selection it is about to become (§8). */
.message-card:not(.active):active{background:var(--hr-surface-selected);transition-duration:0s}
.mail-nav button:not(.active):active{background-color:color-mix(in srgb,currentColor 14%,transparent);transition-duration:var(--hr-motion-duration-press)}

/* Status while work is in flight: a search or folder switch dims the old list after a short grace
   period (no flicker on fast answers); refresh turns its glyph only while the request runs. */
.message-list{transition:opacity var(--hr-motion-duration-fast) ease}
.message-list[aria-busy="true"]{opacity:var(--hr-motion-opacity-muted);transition-delay:120ms}
/* The glyph sits in a span so it can turn; it is not a column-head caption, so it keeps the button's
   own type and colour instead of the 10px mono caps label style (and the Hebrew label face). */
#refresh>span{display:inline-block;font:inherit;letter-spacing:normal;color:inherit}
#refresh[aria-busy="true"]{cursor:progress}
#refresh[aria-busy="true"]>span{animation:hr-mail-spin 900ms linear infinite}
@keyframes hr-mail-spin{to{rotate:1turn}}
button.attachment[aria-busy="true"],.thread-actions [aria-disabled="true"]{opacity:var(--hr-motion-opacity-muted);cursor:progress}
.message-card.is-leaving{opacity:0;pointer-events:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Feedback toast: floats over the page instead of taking a grid row, so it never moves the list
   under the pointer. Rises from below and sinks back the same way; errors stay until closed. */
.notice{position:fixed;z-index:var(--hr-layer-toast);inset-inline:16px;inset-block-end:max(16px,env(safe-area-inset-bottom));width:fit-content;max-width:min(440px,calc(100% - 32px));margin:0 auto;display:flex;align-items:center;gap:12px;box-shadow:var(--hr-shadow-floating);transition:opacity var(--hr-motion-duration-fast) ease,translate var(--hr-motion-duration-settle) var(--hr-motion-easing-settle),display var(--hr-motion-duration-settle) allow-discrete}
.notice[hidden]{display:none;opacity:0;translate:0 var(--hr-motion-distance-small);pointer-events:none;transition-duration:var(--hr-motion-duration-release);transition-timing-function:var(--hr-motion-easing-exit)}
@starting-style{.notice:not([hidden]){opacity:0;translate:0 var(--hr-motion-distance-small)}}
.notice-close{flex:none;min-width:32px;min-height:32px;margin-block:-6px;margin-inline:0 -6px;border:0;border-radius:var(--hr-radius-control);background:transparent;color:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
/* While the reply bar is on screen the toast clears it (height measured in mail.js): an error waits
   to be closed and must not cover Reply / Forward. Wide: the bar ends the reading pane, above the
   page margin. Phone: the bar sticks to the bottom of the screen and already holds the safe area. */
.mail-shell.reply-bar-shown .notice{inset-block-end:calc(var(--mail-reply-bar,0px) + 28px)}
@media(max-width:900px){.mail-shell.reply-bar-shown .notice{inset-block-end:calc(var(--mail-reply-bar,0px) + 8px)}}

/* Present / dismiss, same contract as the workspace dialog primitive: transitions, not keyframes, so
   a close during the opening reverses from the current frame. The surface grows out of its trigger
   (--hr-origin-x/-y from mail.js) and goes back the same way, faster, on the exit curve. Pinned to
   the viewport so browsers without `overlay` do not jump while the closing frames play. Scoped to
   dialog elements: the settings page also has a <form class="composer">. */
:is(dialog.composer,dialog.message-modal,.hr-mail-settings dialog.mail-dialog){--hr-origin-x:50%;--hr-origin-y:50%;position:fixed;inset-block:0;z-index:var(--hr-layer-popover);transform-origin:var(--hr-origin-x) var(--hr-origin-y);transition:opacity var(--hr-motion-duration-fast) ease,scale var(--hr-motion-duration-settle) var(--hr-motion-easing-settle),display var(--hr-motion-duration-settle) allow-discrete,overlay var(--hr-motion-duration-settle) allow-discrete}
:is(dialog.composer,dialog.message-modal,.hr-mail-settings dialog.mail-dialog):not([open]){opacity:0;scale:var(--hr-motion-scale-present);pointer-events:none;transition-duration:var(--hr-motion-duration-release);transition-timing-function:var(--hr-motion-easing-exit)}
@starting-style{:is(dialog.composer,dialog.message-modal,.hr-mail-settings dialog.mail-dialog)[open]{opacity:0;scale:var(--hr-motion-scale-present)}}
/* The scrim fades both ways instead of popping a dark screen on and off (§14). var() fallbacks:
   older engines do not inherit custom properties into ::backdrop. */
:is(dialog.composer,dialog.message-modal,.hr-mail-settings dialog.mail-dialog)::backdrop{transition:opacity var(--hr-motion-duration-normal,320ms) ease,display var(--hr-motion-duration-normal,320ms) allow-discrete,overlay var(--hr-motion-duration-normal,320ms) allow-discrete}
:is(dialog.composer,dialog.message-modal,.hr-mail-settings dialog.mail-dialog):not([open])::backdrop{opacity:0;transition-duration:var(--hr-motion-duration-release,180ms)}
@starting-style{:is(dialog.composer,dialog.message-modal,.hr-mail-settings dialog.mail-dialog)[open]::backdrop{opacity:0}}

/* One subject, one style: preview, workspace and window show the same heading (§15 title tier).
   Tracking tokens are 0 in Hebrew. */
:is(.preview-head,.thread-head,.message-modal-head) h2{font-size:1.5rem;line-height:1.2;letter-spacing:var(--hr-font-tracking-title)}
:is(.mailbox-card span,.workspace span,.column-head span,.thread-head span,.crm-strip>span,.composer header span,.preview-head span,.message-modal-head span,.delivery-diagnostic-title){letter-spacing:var(--hr-font-tracking-caps)}
/* Martian Mono ships no Hebrew: Hebrew labels use the body face instead of an OS monospace fallback. */
[dir="rtl"] :is(.mailbox-card span,.workspace span,.column-head span,.thread-head span,.crm-strip>span,.composer header span,.preview-head span,.message-modal-head span,.delivery-diagnostic-title){font-family:var(--hr-font-body);font-weight:500}

/* Reading toolbars are a material (§12): the thread scrolls under a translucent bar. Atelier's bar
   token is opaque by design; reduced transparency makes both opaque through the tokens. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:is(.thread-head,.reply-bar){background:var(--hr-material-bar);-webkit-backdrop-filter:var(--hr-material-blur);backdrop-filter:var(--hr-material-blur)}}
/* Scroll edge instead of a permanent divider: the hairline appears once content runs under the bar. */
@keyframes hr-mail-edge{from{border-bottom-color:transparent}to{border-bottom-color:var(--line);box-shadow:0 10px 16px -14px rgb(11 28 55 / .3)}}
@supports (animation-timeline:scroll()){.thread-head{animation:hr-mail-edge linear both;animation-timeline:scroll(nearest block);animation-range:0 24px}}

/* Phone: the way back from a message to the list. The arrow mirrors in Hebrew. */
.reading-back{display:none}
@keyframes hr-mail-push{from{opacity:.6;translate:calc(var(--hr-motion-distance-medium) * var(--hr-dir,1)) 0}}
@keyframes hr-mail-return{from{opacity:.6;translate:calc(var(--hr-motion-distance-medium) * var(--hr-dir,1) * -1) 0}}
@media(max-width:900px){
  .reading-back{display:flex;align-items:center;gap:2px;width:fit-content;min-height:44px;margin-block:-12px 4px;margin-inline:-10px 0;padding-inline:4px 10px;border:0;border-radius:var(--hr-radius-control);background:transparent;color:var(--hr-color-sapphire);font:inherit;font-weight:500;cursor:pointer}
  .reading-back svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  [dir="rtl"] .reading-back svg{scale:-1 1}
  /* The message pushes in from the inline end and the list comes back from the inline start: one
     path, both directions. Skipped when the browser already animated a back swipe. */
  .mail-shell.pushing .reading-pane{animation:hr-mail-push var(--hr-motion-duration-settle) var(--hr-motion-easing-settle)}
  .mail-shell.returning .thread-column{animation:hr-mail-return var(--hr-motion-duration-settle) var(--hr-motion-easing-settle)}
  /* The page itself scrolls on phones: let the subject bar and the reply bar stick to the viewport. */
  .mail-columns{overflow:clip}
  .reading-pane{overflow:visible}
  .reply-bar{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  /* Drawer: dims what it covers, closes on a tap outside; hidden from focus and AT while closed. */
  .mail-sidebar{visibility:hidden;transition:transform var(--hr-motion-duration-release) var(--hr-motion-easing-exit),visibility 0s var(--hr-motion-duration-release)}
  .mail-shell.menu-open .mail-sidebar{transform:none;visibility:visible;transition:transform var(--hr-motion-duration-settle) var(--hr-motion-easing-settle)}
  .mail-shell::after{content:"";position:fixed;inset:0;z-index:19;background:var(--hr-material-scrim);-webkit-backdrop-filter:var(--hr-material-scrim-blur);backdrop-filter:var(--hr-material-scrim-blur);opacity:0;visibility:hidden;transition:opacity var(--hr-motion-duration-release) ease,visibility 0s var(--hr-motion-duration-release)}
  .mail-shell.menu-open::after{opacity:1;visibility:visible;transition:opacity var(--hr-motion-duration-normal) ease}
}

/* Mail settings: a mailbox status resolves visibly ("Создаётся…" -> "Готов") instead of snapping. */
.hr-mail-settings .pill{transition:background-color var(--hr-motion-duration-normal) ease,color var(--hr-motion-duration-normal) ease}
.hr-mail-settings [aria-busy="true"]{cursor:progress}
@media(max-width:1180px){.mail-topbar{gap:10px;padding-inline:16px}.mail-shell{grid-template-columns:220px minmax(0,1fr)}.workspace{max-width:150px}.mail-columns{grid-template-columns:minmax(250px,38%) minmax(0,1fr);margin:12px}.mail-theme-select{max-width:115px}.account{display:none}}
@media(max-width:1000px){.hr-mail-settings .support-shell{grid-template-columns:1fr}}
@media(max-width:900px){.mail-shell{display:block;height:auto;min-height:100dvh}.mail-main{min-height:100dvh;grid-template-rows:auto minmax(0,1fr)}.mail-sidebar{inset-inline-start:0;inset-inline-end:auto;width:min(310px,88vw)}.mail-topbar{flex-wrap:wrap;padding:12px;gap:10px}.workspace{flex:1;max-width:none}.mail-search{order:5;flex-basis:100%;max-width:none;margin:0}.mail-topbar select{max-width:125px}.mobile-menu,.mobile-close{color:inherit;min-width:44px;min-height:44px;font-size:1.375rem}.mail-columns{grid-template-columns:minmax(0,1fr);margin:10px;min-height:calc(100dvh - 160px)}.thread-column{border-inline-end:0}.reading-empty{min-height:300px}.composer footer{gap:8px}.composer footer .draft-status{flex-basis:100%;margin:0}.thread-messages{padding-inline:14px}.thread-head{padding:18px}.crm-strip{margin-inline:14px}.hr-mail-settings .header{padding-inline:20px}.hr-mail-settings .header nav{gap:12px}}
@media(max-width:480px){.mail-theme-select{font-size:.6875rem;max-width:105px}.mail-topbar .workspace span{font-size:.5625rem}.mail-topbar .workspace strong{font-size:.8125rem}.mail-topbar select{padding-inline:6px}.message-meta{flex-wrap:wrap}.message-meta strong{max-width:100%}.composer label{grid-template-columns:3.75em minmax(0,1fr);padding-inline:14px}.composer footer{padding:12px}.composer footer button{padding:10px}.hr-mail-settings .settings-grid{grid-template-columns:1fr}.hr-mail-settings .dialog-actions{flex-wrap:wrap}.hr-mail-settings .address-field span{font-size:.75rem;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){
  /* Nothing travels or scales; state changes keep a short fade. Tokens already zero distance and
     scale here; these rules cover what tokens cannot: the press dims instead of shrinking, the
     drawer fades in place, the refresh loop stops. */
  :is(.compose,.column-head button,.thread-actions button,.reply-bar button,.crm-strip button,.preview-actions button,.message-modal-foot button,.message-modal-head button,.composer header button,.composer footer button,.composer footer .attach,button.attachment,.compose-attachment button,.mobile-menu,.mobile-close,.notice-close,.hr-mail-settings .mailbox-actions button,.hr-mail-settings .settings-grid .copy):active:not(:disabled):not([aria-disabled="true"]):not(.disabled){scale:none;opacity:var(--hr-press-opacity)}
  #refresh[aria-busy="true"]>span{animation:none}
  #refresh[aria-busy="true"]{opacity:var(--hr-motion-opacity-muted)}
}
@media(prefers-reduced-motion:reduce) and (max-width:900px){
  .mail-sidebar{transform:none;opacity:0;transition:opacity var(--hr-motion-duration-fast) ease,visibility 0s var(--hr-motion-duration-fast)}
  .mail-shell.menu-open .mail-sidebar{opacity:1;transition:opacity var(--hr-motion-duration-fast) ease}
}
@media(prefers-reduced-transparency:reduce){.composer::backdrop,.message-modal::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#04172dd9}}
@media(prefers-contrast:more){:is(.thread-head,.reply-bar){background:var(--hr-material-bar-opaque);-webkit-backdrop-filter:none;backdrop-filter:none}.thread-head{animation:none}}
@media(forced-colors:active){.mail-sidebar,.mail-topbar,.composer header{background:Canvas;color:CanvasText}.mail-nav button.active{outline:2px solid Highlight}.compose,.composer footer .send{border:1px solid ButtonText}}