/* Button feedback for the site, standalone pages and embedded components.
   Put this layer first so legacy component paint cannot override an interaction. */
@layer otxButtonStates, otxMaterialTheme, otxControlTheme;
@layer otxButtonStates {
  :root, :host {
    /* Open Trust X VIS, A-03-01. Use the printed hexadecimal values for screens. */
    --otx-vi-ink: #3e3a39;
    --otx-vi-lavender: #a09ccc;
    --otx-vi-blue: #2ea7e0;
    --otx-vi-purple: #584c9d;
    --otx-vi-gradient: linear-gradient(90deg, var(--otx-vi-lavender), var(--otx-vi-blue));
    /* Interface tints are derived from the standard colors on a light ground. */
    --otx-vi-muted: color-mix(in srgb, var(--otx-vi-ink) 82%, white);
    --otx-vi-line: color-mix(in srgb, var(--otx-vi-ink) 23%, white);
    /* One cool paper ground; larger tints belong to panels, not the viewport. */
    --otx-vi-silver: color-mix(in srgb, var(--otx-vi-ink) 5%, white);
    --otx-vi-ground-start: color-mix(in srgb, var(--otx-vi-lavender) 14%, var(--otx-vi-silver));
    --otx-vi-ground-end: color-mix(in srgb, var(--otx-vi-blue) 9%, var(--otx-vi-silver));
    --otx-vi-porcelain: color-mix(in srgb, var(--otx-vi-ground-start) 52%, white);
    --otx-vi-ice: color-mix(in srgb, var(--otx-vi-ground-end) 62%, white);
    --otx-vi-page: var(--otx-vi-ground-start);
    --otx-vi-surface: linear-gradient(125deg, var(--otx-vi-porcelain), var(--otx-vi-ice));
    --otx-button-idle: var(--otx-vi-porcelain);
    --otx-button-hover: color-mix(in srgb, var(--otx-vi-purple) 7%, var(--otx-vi-porcelain));
    --otx-button-selected: var(--otx-vi-purple);
    --otx-button-on-selected: #fff;
    --otx-button-pressed: color-mix(in srgb, var(--otx-vi-purple) 84%, var(--otx-vi-ink));
    --otx-button-edge: var(--otx-vi-line);
    --otx-button-active-edge: var(--otx-vi-purple);
    --otx-button-accent: var(--otx-vi-purple);
    --otx-button-ink: var(--otx-vi-ink);
    --otx-button-duration: 0s;
  }
  @media (prefers-reduced-motion: no-preference) {
    :root, :host { --otx-button-duration: 120ms; }
  }
  /* The standalone broker sharing pages also load this palette. */
  body:has(> main > .otx-button-link) {
    background:var(--otx-vi-page) !important;
    color:var(--otx-vi-ink) !important;
  }
  body:has(> main > .otx-button-link) main > p {color:var(--otx-vi-muted) !important;}

  /* The chapter rail draws its own tick and active marker; the larger button
     is its hit area. Keep the focus ring and existing hover/active ticks. */
  #home-module-dots button {
    background:transparent !important;border-color:transparent !important;box-shadow:none !important;
  }
  /* Keep the two diagram actions readable without obscuring the crystal. */
  #hero .h147-actions button:not(:disabled) {
    background:var(--otx-vi-porcelain) !important;color:var(--otx-vi-purple) !important;
    border:1px solid var(--otx-button-edge) !important;border-radius:8px !important;
    padding:4px 8px !important;min-height:32px !important;
    font:600 12px/1.4 var(--font, sans-serif) !important;
  }
  #hero .h147-actions .h147-reset:not(:disabled) {
    background:transparent !important;border-color:transparent !important;color:var(--otx-vi-ink) !important;
  }
  #hero .h147-actions button:not(:disabled):is(:hover,:focus-visible) {
    background:var(--otx-button-hover) !important;border-color:var(--otx-vi-purple) !important;
  }
  @media(max-width:680px) {
    #hero .h147-actions button:not(:disabled) {min-height:44px !important;min-width:44px !important;}
  }

  :is(button, input:is([type="button"], [type="submit"], [type="reset"]),
      [role="button"], [role="tab"], a:is(.btn, .button, .bk-btn, .option,
      .legal-back-link, .pr-apply, .sx-entry, .filter-chip, .tab-button,
      .otx-button-link, .tool-content-action-v901, .pr-back, .qa-page-back-v231)) {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;

    /* Illustrated controls own their animation and fills. Give them the same
       interaction outline without replacing the artwork. */
    &:where(.h121-layer, .cortex-node, .formula-root-node) {
      &:is(:hover, :active, [aria-pressed="true"]) {
        outline: 1px solid var(--otx-button-active-edge) !important;
        outline-offset: -1px !important;
      }
    }

    &:not(:where(.h121-layer, .ct-layer, .cortex-node, .formula-root-node)) {
      --button-bg: var(--otx-button-idle);
      --button-fg: var(--otx-button-ink);
      --button-border: var(--otx-button-edge);
      --button-focus: var(--otx-button-accent);
      background: var(--button-bg) !important;
      color: var(--button-fg) !important;
      border-color: var(--button-border) !important;
      box-shadow: none !important;
      transition-property: background-color, border-color, color !important;
      transition-duration: var(--otx-button-duration) !important;
      transition-timing-function: ease-out !important;

      @media (hover: hover) {
        &:where(:hover) {
          --button-bg: var(--otx-button-hover);
          --button-border: var(--otx-button-active-edge);
        }
      }
      &:where([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"],
          [aria-current="page"], .on, .active, .is-active, .is-selected, .is-intelligence-selected-v410) {
        --button-bg: var(--otx-button-selected);
        --button-fg: var(--otx-button-on-selected);
        --button-focus: var(--otx-button-on-selected);
        --button-border: var(--otx-button-active-edge);
        /* A selector with a title and supporting data is a reading surface.
           Use the same violet as compact tabs without a large solid panel. */
        &:is(.mi-tab,.ct-tabs button,.bk-halfyear-event,.rg-tab) {
          --button-bg:var(--otx-button-hover);
          --button-fg:var(--otx-button-accent);
          --button-focus:var(--otx-button-accent);
        }
        &:not(.kinetic-target-v390) :where(span, b, strong, small, em, i, svg) { color: var(--button-fg) !important; }
        /* Data cards carry charts and status text, not just a button label.
           The compact selection badge uses the solid shared action color. */
        &.kinetic-target-v390 {
          --button-bg:color-mix(in srgb,var(--otx-vi-lavender) 24%,var(--otx-vi-porcelain));
          --button-fg:var(--otx-vi-ink);
          --button-focus:var(--otx-vi-purple);
          & > b {color:var(--otx-vi-purple) !important;}
          & .kinetic-target-action-20261022 {background:var(--otx-button-selected) !important;border-color:transparent !important;}
          & .kinetic-target-selected-20261022, & .kinetic-target-selected-20261022 :is(span,svg) {
            color:var(--otx-button-on-selected) !important;
          }
        }
      }
      &:where(:active) {
        --button-bg: var(--otx-button-pressed);
        --button-fg: var(--otx-button-on-selected);
        --button-border: var(--otx-button-accent);
        &:not(.kinetic-target-v390) :where(span,b,strong,small,em,i,svg) {color:var(--button-fg) !important;}
        &.kinetic-target-v390 {--button-bg:var(--otx-button-hover);--button-fg:var(--otx-vi-ink);}
        &:is(.mi-tab,.ct-tabs button,.bk-halfyear-event,.rg-tab) {--button-bg:var(--otx-button-hover);--button-fg:var(--otx-button-accent);}
      }

      &:where(.is-primary, .primary, .partner-primary-action, .broker-primary-action,
          .pr-apply, #brokerLoginSubmit, #heroBrokerSubmit, input[type="submit"], .otx-button-link) {
        --button-bg: var(--otx-button-accent);
        --button-fg: white;
        --button-border: var(--button-bg);
        --button-focus: white;
        @media (hover: hover) {
          &:hover { --button-bg: #503c99; }
        }
        &:active { --button-bg: #463484; }
        & :where(span, b, strong, i) { color: inherit !important; }
      }
      &:is(:disabled, [aria-disabled="true"]) {
        --button-bg: #f1eff5;
        --button-fg: #645d70;
        --button-border: #ccc6d6;
        cursor: not-allowed !important;
        opacity: 1 !important;
      }
    }
    &:not(.ct-layer):focus-visible {
      outline: 2px solid var(--button-focus, var(--otx-button-accent)) !important;
      outline-offset: -3px !important;
    }
  }
  /* Navigation signals location with text and a short rule. Reserve the
     solid fill for action buttons and compact selection badges. */
  :is(.nav a, #otx-detail-chapter-nav a):is(
    .on,.active,.is-active,[aria-current="page"],[aria-current="location"],
    [aria-expanded="true"]) {
    background:linear-gradient(var(--otx-vi-purple),var(--otx-vi-purple)) center bottom / 24px 2px no-repeat transparent !important;
    color:var(--otx-vi-purple) !important;border-color:transparent !important;box-shadow:none !important;
    & :where(b,strong,small,span,i,svg) {color:var(--otx-vi-purple) !important;}
    &:focus-visible {outline:2px solid var(--otx-vi-purple) !important;outline-offset:-3px !important;}
  }
  .ct-layer:is(:hover, :active, :focus-visible, [aria-pressed="true"]) {
    outline: none !important;
    .ct-rim {
      stroke: var(--otx-button-accent) !important;
      stroke-opacity: 1 !important;
      stroke-width: 1.5px !important;
    }
    &:focus-visible .ct-rim { stroke: var(--otx-button-accent) !important; stroke-width: 2.5px !important; }
  }
  @media (forced-colors: active) {
    :is(button, input:is([type="button"], [type="submit"], [type="reset"]), [role="button"], [role="tab"], .otx-button-link):focus-visible {
      outline-color: Highlight !important;
    }
  }
}