/* MAGMA — interaction layer.

   One hover/press/focus language for every interactive surface in the system.
   Buttons carry data-variant; bare controls (icon buttons, slider arrows, the
   burger) opt in with .magma-pressable.

   Press is always the same gesture: 1px down, 1% smaller, one step darker.
   The state colours use !important because the component paints its resting
   colour inline — this file only ever wins during :hover / :active. */

/* Buttons live in tokens/buttons.css — role + surface, no colour decisions here. */

/* ── bare controls ────────────────────────────────────────────────── */
.magma-pressable{
  -webkit-tap-highlight-color:transparent;
  transition:filter 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),
             opacity 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),
             box-shadow 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),
             background 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),
             color 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),
             transform 110ms var(--ease-standard,cubic-bezier(.2,0,0,1));
}
/* Two kinds of bare control, and the difference matters:

   NO FILL (icon rows, the burger, text+icon links) — hover paints a flame wash
   where there was nothing. !important because they set background:none inline.
   A hover never reshapes a control, so no radius is touched anywhere here.

   OWNS A FILL (`data-plate`) — the store plates, the LinkedIn chips, solid icon
   buttons. The fill itself moves; replacing it with a translucent wash would erase
   the plate and drop its label out of contrast. */
.magma-pressable:hover{filter:none;color:var(--magma-flame-2,#BB1E00) !important}
.magma-pressable:not([data-plate]):hover{background:rgba(249,92,4,.10) !important}
.magma-pressable:active{transform:translateY(1px) scale(.98)}
.magma-pressable:not([data-plate]):active{background:rgba(249,92,4,.20) !important}
.magma-pressable:focus-visible{outline:2px solid var(--magma-flame-3,#F95C04);outline-offset:3px}
/* On ink, brightening near-white text does nothing legible, so dark-tone controls
   get a flame wash plus a halo instead of a filter. */
.magma-pressable[data-tone="dark"]:not([data-plate]):hover{filter:none;color:var(--magma-white,#fff) !important;background:rgba(249,92,4,.24) !important;box-shadow:0 0 0 6px rgba(249,92,4,.24)}
.magma-pressable[data-tone="dark"]:not([data-plate]):active{filter:none;background:rgba(249,92,4,.36) !important;box-shadow:0 0 0 6px rgba(249,92,4,.36)}

.magma-pressable[data-plate="ink"]:hover{background:var(--magma-flame-2,#BB1E00) !important;color:var(--magma-white,#fff) !important}
.magma-pressable[data-plate="ink"]:active{background:var(--magma-flame-1,#631101) !important}
.magma-pressable[data-plate="light"]:hover{background:var(--magma-bone-200,#F5F5F3) !important;color:var(--magma-flame-2,#BB1E00) !important;box-shadow:inset 0 0 0 1px var(--magma-flame-3,#F95C04)}
.magma-pressable[data-plate="light"]:active{background:var(--magma-grey-100,#E8E8E8) !important}
.magma-pressable[data-plate="onDark"]:hover{background:rgba(249,92,4,.28) !important;color:var(--magma-white,#fff) !important}
.magma-pressable[data-plate="onDark"]:active{background:rgba(249,92,4,.40) !important}

/* ── navigation links ─────────────────────────────────────────────── */
/* Dimming on a dark bar reads as "disabled"; hover goes flame with a flame
   underline (paper → white was imperceptible), press goes white. */
[data-magma="utility-nav"] a,[data-magma="utility-nav"] button,[data-magma="drawer"] a{
  transition:color 120ms var(--ease-standard,cubic-bezier(.2,0,0,1)),
             text-decoration-color 120ms var(--ease-standard,cubic-bezier(.2,0,0,1));
  text-decoration:underline 2px transparent;text-underline-offset:6px;
}
[data-magma="utility-nav"] a:hover,[data-magma="utility-nav"] button:hover,[data-magma="drawer"] a:hover{color:var(--magma-flame-3,#F95C04) !important;text-decoration:underline !important;text-decoration-thickness:2px !important;text-decoration-color:var(--magma-flame-3,#F95C04) !important;text-underline-offset:6px !important}
[data-magma="utility-nav"] a:active,[data-magma="utility-nav"] button:active,[data-magma="drawer"] a:active{color:var(--magma-white,#fff) !important;text-decoration-color:var(--magma-white,#fff) !important}
[data-magma="utility-nav"] a:hover svg,[data-magma="utility-nav"] button:hover svg,[data-magma="drawer"] a:hover svg{color:var(--magma-flame-3,#F95C04)}
[data-magma="utility-panel"] a:hover{background:rgba(249,92,4,.24) !important;color:var(--magma-white,#fff) !important;text-decoration:none !important}
[data-magma="utility-panel"] a:active{background:rgba(249,92,4,.36) !important}

/* ── the site-search field on the utility bar ─────────────────────── */
[data-magma="utility-search"]{transition:box-shadow 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),background 180ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
[data-magma="utility-search"]:hover{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
[data-magma="utility-search"]:focus-within{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px var(--magma-flame-3,#F95C04)}
[data-magma="utility-search"]{flex:0 1 auto;max-width:268px}
/* A compact field must ellipsize; a hard clip reads as broken copy. */
[data-magma="utility-search"] input{text-overflow:ellipsis}
[data-magma="utility-search"] input::placeholder{color:rgba(246,246,246,.55);opacity:1;text-overflow:ellipsis}
[data-magma="utility-search"] input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

@media (prefers-reduced-motion:reduce){
  [data-variant],.magma-pressable{transition:none}
  [data-variant]:active,.magma-pressable:active{transform:none}
}

/* ── Business Solutions rows ──────────────────────────────────────── */
/* From "Экраны Solutions.fig": each row has an active state (ink text, ink rule,
   3px baseline) that brings in its own photo card. The sketch pinned the active
   state to the middle row; hover moves it to whichever row the pointer is on.
   Group-hover neutralises the default so exactly one row is ever active. */
[data-r="row"]{transition:color 220ms var(--ease-standard,cubic-bezier(.2,0,0,1)),border-color 220ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
[data-r="row-art"]{opacity:0;transform:translateY(10px) scale(.97);transition:opacity 280ms var(--ease-standard,cubic-bezier(.2,0,0,1)),transform 340ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
[data-r="row"][data-active="true"] > [data-r="row-art"]{opacity:1;transform:none}
/* The arrival animation puts a transform on each row, which makes the row a
   stacking context — so the photo's own z-index cannot escape it and the next
   row's border paints over the print. Lift the ROW that owns the visible photo. */
[data-r="rows"] > [data-r="row"]{z-index:0}
[data-r="row"][data-active="true"]{z-index:2}
@media (hover:hover){
  [data-r="rows"]:hover > [data-r="row"]{color:#A09F9D !important;border-color:#CCC9C5 !important;border-bottom-width:1px !important}
  [data-r="rows"]:hover > [data-r="row"] > [data-r="row-art"]{opacity:0;transform:translateY(10px) scale(.97)}
  [data-r="rows"] > [data-r="row"]:hover{color:#100C0B !important;border-color:#100C0B !important;border-bottom-width:3px !important}
  [data-r="rows"] > [data-r="row"]:hover > [data-r="row-art"]{opacity:1;transform:none}
  [data-r="rows"]:hover > [data-r="row"]{z-index:0}
  [data-r="rows"] > [data-r="row"]:hover{z-index:2}
}
@media (max-width:1024px){[data-r="row-art"]{display:none}}
@media (prefers-reduced-motion:reduce){[data-r="row"],[data-r="row-art"]{transition:none}}

/* ── footer links ─────────────────────────────────────────────────── */
/* The footer's nav links, legal links and copyright paint their colour inline,
   so they need the shared flame language restated to beat it. */
footer a:not([data-variant]):not(.magma-pressable):hover{color:var(--magma-flame-3) !important;text-decoration:underline !important;text-decoration-thickness:2px !important;text-decoration-color:var(--magma-flame-3) !important;text-underline-offset:5px !important}
footer a:not([data-variant]):not(.magma-pressable):active{color:var(--magma-flame-2) !important}
footer a[data-magma],footer a[data-variant]{text-decoration:none !important}

/* ── cards and rows that are themselves links or buttons ──────────── */
/* The audit found these carrying onClick / href with no state at all. */
[data-magma="news-card"] [data-magma="news-media"]{transition:transform 520ms var(--ease-cine,cubic-bezier(.16,1,.3,1))}
[data-magma="news-card"]:hover [data-magma="news-media"]{transform:scale(1.02)}
[data-magma="news-card"]:hover [data-magma="news-body"] > *:nth-child(2){color:var(--magma-flame-3) !important}
[data-magma="news-card"]:active [data-magma="news-media"]{transform:scale(1.005)}

[data-magma="question-row"]{transition:color 180ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
[data-magma="question-row"]:hover > span:first-child{color:var(--magma-flame-3) !important}
[data-magma="question-row"]:hover [data-magma="question-chip"]{background:rgba(249,92,4,.10);color:var(--magma-flame-2) !important}
[data-magma="question-row"]:active [data-magma="question-chip"]{background:rgba(249,92,4,.20)}
[data-magma="question-chip"]{transition:background 180ms var(--ease-standard,cubic-bezier(.2,0,0,1)),color 180ms var(--ease-standard,cubic-bezier(.2,0,0,1))}

/* The component form of the Business Solutions row gets the template's behaviour:
   hover moves the active state to whichever row the pointer is on. */
[data-magma="highlight-row"]{transition:color 220ms var(--ease-standard,cubic-bezier(.2,0,0,1)),border-color 220ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
@media (hover:hover){
  [data-magma="highlight-row"]:hover{color:var(--magma-ink) !important;border-color:var(--magma-ink) !important;border-bottom-width:3px !important}
  [data-magma="highlight-row"]:hover span{color:var(--magma-ink) !important}
}

/* ── cards as surfaces ────────────────────────────────────────────── */
/* Every card in the system reacts: the plate lifts a little, gains a flame
   hairline and flames its title. Non-interactive cards keep the resting state. */
[data-magma="feature-card"]{transition:transform 320ms var(--ease-cine,cubic-bezier(.16,1,.3,1)),box-shadow 320ms var(--ease-cine,cubic-bezier(.16,1,.3,1)),background 220ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
[data-magma="feature-card"]:hover{transform:translateY(-3px);background:var(--magma-bone-200) !important;box-shadow:0 18px 40px rgba(25,22,6,0.10),inset 0 0 0 1px var(--magma-flame-3)}
[data-magma="feature-card"]:hover > *:nth-child(2){color:var(--magma-flame-2) !important}
[data-magma="feature-card"][data-interactive]:active{transform:translateY(-1px);box-shadow:0 10px 24px rgba(25,22,6,0.10),inset 0 0 0 1px var(--magma-flame-3)}

/* ── navigation: one language for all six nav surfaces ────────────── */
/* utility bar · masthead · footer · content TOC · legal TOC · mobile drawer.
   They differ only in the surface they stand on: same type (--type-nav), same
   flame hover, same current-item mark. */
[data-magma="legal-toc"] a,[data-magma="footer-grid"] a{transition:color 180ms var(--ease-standard),text-decoration-color 180ms var(--ease-standard)}
[data-magma="legal-toc"] a[aria-current="true"],[data-magma="utility-nav"] a[aria-current="true"]{
  color:var(--magma-ink) !important;text-decoration:underline !important;text-decoration-thickness:2px !important;
  text-decoration-color:var(--magma-flame-3) !important;text-underline-offset:5px !important;
}
[data-surface="dark"] [data-magma="legal-toc"] a[aria-current="true"]{color:var(--magma-white) !important}