/* ===================================================================
   INTERACTION STATES (style guide, Interaction states; DEV-236)
   As the apps' states.css: one state layer in the content colour
   (currentColor) at M3's opacities, hover 8% (only where hover exists),
   focus 10% and pressed 10%, painted as a background image so it sits on
   whatever the control already has. No ripple, no background swap and no
   darkened colour. Also the one focus ring, disabled, the cursors and text
   selection. Every page links this last, so it wins a tie with a component's
   stylesheet; components keep only their own colours and shapes.
   =================================================================== */

:root {
     --cascade-state-hover: calc(var(--md-sys-state-hover-state-layer-opacity) * 100%);
     --cascade-state-focus: calc(var(--md-sys-state-focus-state-layer-opacity) * 100%);
     --cascade-state-pressed: calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%);
}

/* ---------- The focus ring ----------
   One ring on everything focusable: 3px in the secondary role, 2px outside, following the
   element's own corners. White on the header's navy glass (navigation.css); menu items and
   rail destinations draw it inside, as the apps' do; a text field shows it on the field
   (content.css). */

:focus-visible {
     outline: var(--md-comp-focus-ring-width) solid var(--md-sys-color-secondary);
     outline-offset: var(--md-comp-focus-ring-offset);
}

/* A pointer focus shows no ring; the keyboard's always does */
:focus:not(:focus-visible) {
     outline: none;
}

/* ---------- The state layer ---------- */

:is(.home-btn, .cp-btn, .home-action, .cp-action, .team-feature, .cp-tabs a, .cp-contact-list a, a.ct-detail,
    .site-nav__trigger, .hdr-btn, .hdr-icon-btn, .site-menu__item, .site-rail__item, .connected-group__item, .site-appearance-panel__done) {
     background-image: linear-gradient(color-mix(in srgb, currentColor var(--cascade-state-opacity, 0%), transparent) 0 0);
}

@media (hover: hover) {
     :is(.home-btn, .cp-btn, .home-action, .cp-action, .team-feature, .cp-tabs a, .cp-contact-list a, a.ct-detail,
         .site-nav__trigger, .hdr-btn, .hdr-icon-btn, .site-menu__item, .site-rail__item, .connected-group__item, .site-appearance-panel__done):hover {
          --cascade-state-opacity: var(--cascade-state-hover);
     }
}

:is(.home-btn, .cp-btn, .home-action, .cp-action, .team-feature, .cp-tabs a, .cp-contact-list a, a.ct-detail,
    .site-nav__trigger, .hdr-btn, .hdr-icon-btn, .site-menu__item, .site-rail__item, .connected-group__item, .site-appearance-panel__done):focus-visible {
     --cascade-state-opacity: var(--cascade-state-focus);
}

:is(.home-btn, .cp-btn, .home-action, .cp-action, .team-feature, .cp-tabs a, .cp-contact-list a, a.ct-detail,
    .site-nav__trigger, .hdr-btn, .hdr-icon-btn, .site-menu__item, .site-rail__item, .connected-group__item, .site-appearance-panel__done):active {
     --cascade-state-opacity: var(--cascade-state-pressed);
}

/* ---------- Disabled ----------
   On surface at 38% for content and 12% for containers (each component names the roles),
   no layer and no response, the not-allowed cursor, and no tooltip (navigation.css). */

:is(button, input, select, textarea):disabled,
[aria-disabled="true"] {
     cursor: not-allowed;
}

:is(.home-btn, .cp-btn, .home-action, .cp-action, .team-feature, .cp-tabs a, .cp-contact-list a, a.ct-detail,
    .site-nav__trigger, .hdr-btn, .hdr-icon-btn, .site-menu__item, .site-rail__item, .connected-group__item, .site-appearance-panel__done):is(:disabled, [aria-disabled="true"]) {
     --cascade-state-opacity: 0%;
}

/* Busy (a disabled button with aria-busy): the wait cursor rather than not-allowed */
button[aria-busy="true"] {
     cursor: progress;
}

/* ---------- Cursors ----------
   The hand only on links and linked images; buttons and button-like controls show the arrow. */

button,
summary,
select,
[role="button"],
[role="radio"] {
     cursor: default;
}

a[href] {
     cursor: pointer;
}

/* ---------- Text selection ---------- */

::selection {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
}

/* ---------- Targets (style guide, Accessibility; DEV-237) ----------
   Every control takes clicks across at least 48 by 48px, from an invisible hit area where it
   draws smaller, as Admin's small buttons and icon buttons do (icon buttons have theirs in
   navigation.css). Rows of links that stack (the side card's contact list, the footer links)
   are 48px tall instead, so their areas never overlap. Links inside running text are exempt,
   as WCAG allows. The section tabs and the header's section triggers draw an indicator with
   ::after, so theirs is ::before. */

:is(.cp-btn, .home-btn, .hdr-btn, .home-link, .cp-breadcrumb a, .site-header__logo, .connected-group__item,
    .calc-call a, .site-nav__trigger, .cp-tabs a) {
     position: relative;
}

:is(.cp-btn, .home-btn, .hdr-btn, .home-link, .cp-breadcrumb a, .site-header__logo, .connected-group__item,
    .calc-call a)::after,
:is(.site-nav__trigger, .cp-tabs a)::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: max(100%, var(--md-comp-icon-button-target));
     height: max(100%, var(--md-comp-icon-button-target));
     transform: translate(-50%, -50%);
}

/* ---------- Forced colours (style guide, Accessibility; DEV-237) ----------
   Windows contrast themes replace every colour with the theme's own and drop fills, so what a
   fill or a mask carried is redrawn in system colours: icons and markers drawn as masks or
   backgrounds, the selected state, the borders of filled containers and borderless controls,
   and disabled controls. Focus rings and outlined borders keep working on their own. */

@media (forced-colors: active) {
     /* Mask icons and drawn markers: the logo, likes, arrows, error icons, ticks, crosses, dots,
        progress and the loading shape */
     .site-logo,
     .pf-like__icon,
     .team-feature__link::after,
     .ct-form .form-error:not(:empty)::before,
     main.content-page :is(.cp-prose ul, .modal-list) > li::before,
     .wavy-progress__track,
     .wavy-progress__track::after,
     .loading-indicator__shape,
     .cp-tabs a[aria-current="page"]::after,
     .site-nav__trigger.is-current::after {
          forced-color-adjust: none;
          background-color: CanvasText;
     }

     .wavy-progress__active {
          forced-color-adjust: none;
          background-color: Highlight;
     }

     /* Numbered circles lose their fill, so they keep an outline */
     main.content-page :is(.cp-prose ol, .calc-next-steps) > li::before,
     .home-steps li::before {
          border: var(--md-comp-hairline-width) solid CanvasText;
     }

     /* The selected state */
     .connected-group__item[aria-checked="true"],
     .site-rail__item[aria-current="page"],
     .site-menu__item[aria-current="page"],
     .cp-tabs a[aria-current="page"] {
          forced-color-adjust: none;
          background-color: Highlight;
          color: HighlightText;
     }

     /* Filled containers and borderless controls keep an edge (a transparent outline shows in
        the theme's colour) */
     :is(.cp-card, .cp-callout, .cp-value, .pf-likes li, .pf-quote, .stat-box, .total-gain-banner, .inline-alert, .home-cta,
         .hdr-btn, .site-nav__trigger, .connected-group__item):not(:focus-visible) {
          outline: var(--md-comp-hairline-width) solid transparent;
          outline-offset: calc(-1 * var(--md-comp-hairline-width));
     }

     :is(.cp-btn, .home-btn, .connected-group__item, .form-input, .form-textarea):disabled {
          border-color: GrayText;
          color: GrayText;
     }
}