/* Optional material extension. Load after the matching global or scoped core. */
@layer re.tokens {
  :where([data-contrast="more"], :scope[data-contrast="more"]) { --re-glass-opacity: 100%; --re-glass-button-opacity: 100%; --re-glass-filter: none; }
  :where([data-contrast="auto"], :scope[data-contrast="auto"]) { --re-glass-opacity: 32%; --re-glass-button-opacity: 90%; --re-glass-filter: blur(12px) saturate(145%); }
}
@layer re.components {
  @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
    :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu)) {
      border-width: var(--re-surface-border);
      border-color: var(--re-line);
      box-shadow: var(--re-shadow);
    }
    /* Frosted navigation must paint above subsequent frosted cards. */
    :where(.top-menu, :scope.top-menu) { z-index: var(--re-menu-z, 20); }
    @media (width >= 48rem) {
      :where(.top-menu .menu-items > li > .menu-dropdown > .menu-panel) {
        border-width: var(--re-surface-border);
        box-shadow: var(--re-shadow);
      }
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      /* Theme/tone wrappers carry tokens, not an opaque rectangle behind glass.
         Page roots and actual surfaces retain their own background paint. */
      :where([data-theme], [data-tone], [data-palette], :scope[data-theme], :scope[data-tone], :scope[data-palette]):where(:not(html, body, .reva, .card, fieldset, details, dialog, [popover], .top-menu)) {
        background-color: transparent;
      }
      /* More translucent surfaces need stronger inherited text and boundaries.
         Scope proximity keeps local themes, material resets and re-entry intact. */
      :where(*, :scope):where(:not([data-material="solid"], .menu-toggle)) {
        --re-muted: var(--re-text);
        --re-link: var(--re-text);
        --re-control-line: var(--re-text);
      }
      /* Strong colour backing preserves label contrast while the backdrop remains visible. */
      :where(button, input:is([type=button],[type=submit],[type=reset]), .button, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button)):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) {
        --re-glass-button-fill: color-mix(in srgb, var(--re-action-start) 65%, var(--re-action-end));
        --re-glass-button-end: var(--re-action-end);
        background-color: color-mix(in srgb, var(--re-glass-button-fill) var(--re-glass-button-opacity, 90%), transparent);
        background-image: linear-gradient(to bottom, transparent,
          color-mix(in srgb, var(--re-glass-button-end) calc(var(--re-gradient) * 28%), transparent));
        border-block-start-color: color-mix(in srgb, currentColor 32%, transparent);
        -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
      }
      :where(button:is(.outline,.ghost), input:is([type=button],[type=submit],[type=reset]):is(.outline,.ghost), .button:is(.outline,.ghost), :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button):is(.outline,.ghost)):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) {
        --re-glass-button-fill: var(--re-surface);
        --re-glass-button-end: var(--re-surface-alt);
      }
      :where(button.outline, input:is([type=button],[type=submit],[type=reset]).outline, .button.outline, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button).outline):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) { border-block-start-color: currentColor; }
      :where(button.ghost, input:is([type=button],[type=submit],[type=reset]).ghost, .button.ghost, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button).ghost):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) { border-block-start-color: transparent; }
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu)) {
        background-color: color-mix(in srgb, var(--re-surface) var(--re-glass-opacity, 32%), transparent);
        background-image: linear-gradient(135deg,
          rgb(255 255 255 / calc(var(--re-gradient) * 14%)),
          transparent 42%, rgb(0 0 0 / calc(var(--re-gradient) * 4%)));
        border-block-start-color: color-mix(in srgb, var(--re-line) 45%, rgb(255 255 255 / 55%));
        border-block-end-color: color-mix(in srgb, var(--re-line) 65%, rgb(0 0 0 / 15%));
        box-shadow: var(--re-glass-shadow, var(--re-shadow));
        -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
      }
      @media (width >= 48rem) {
        :where(.top-menu .menu-items > li > .menu-dropdown > .menu-panel) {
          background-color: color-mix(in srgb, var(--re-surface) var(--re-glass-opacity, 32%), transparent);
          background-image: linear-gradient(135deg,
          rgb(255 255 255 / calc(var(--re-gradient) * 14%)),
          transparent 42%, rgb(0 0 0 / calc(var(--re-gradient) * 4%)));
        border-block-start-color: color-mix(in srgb, var(--re-line) 45%, rgb(255 255 255 / 55%));
        border-block-end-color: color-mix(in srgb, var(--re-line) 65%, rgb(0 0 0 / 15%));
        box-shadow: var(--re-glass-shadow, var(--re-shadow));
          -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
          backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        }
      }
    }
  }
}
@layer re.components {
  @scope ([data-material="solid"], :scope[data-material="solid"]) to ([data-material]:not([data-material="solid"])) {
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      :where(*, :scope):where(:not([data-material="glass"], .menu-toggle)) {
        --re-muted: var(--re-palette-muted);
        --re-link: var(--re-palette-link);
        --re-control-line: var(--re-palette-control-line);
      }
    }
    :where(button, input:is([type=button],[type=submit],[type=reset]), .button, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button)):where(:not([data-material="glass"], .menu-toggle, .dropdown > li > :is(button, .button))) {
      --re-glass-button-fill: var(--re-action-start);
      background-color: var(--re-action-start);
      background-image: linear-gradient(to bottom, var(--re-action-start), color-mix(in srgb, var(--re-action-end) calc(var(--re-gradient) * 28%), var(--re-action-start)));
      border-block-start-color: color-mix(in srgb, var(--re-action-text) 18%, transparent);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    :where(button:is(.outline,.ghost), input:is([type=button],[type=submit],[type=reset]):is(.outline,.ghost), .button:is(.outline,.ghost), :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button):is(.outline,.ghost)):where(:not([data-material="glass"], .menu-toggle, .dropdown > li > :is(button, .button))) { --re-glass-button-fill: var(--re-surface); background-color: transparent; background-image: none; border-block-start-color: transparent; }
    :where(button.outline, input:is([type=button],[type=submit],[type=reset]).outline, .button.outline, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button).outline):where(:not([data-material="glass"], .menu-toggle, .dropdown > li > :is(button, .button))) { border-block-start-color: currentColor; }
  }
}

@layer re.utilities {
  /* System preferences win over local contrast resets. */
  @media (prefers-reduced-transparency: reduce) {
    :where(*, :scope) { --re-glass-opacity: 100%; --re-glass-filter: none; }
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel)) {
        /* Opaque preference paint must not depend on a local alpha override. */
        background-color: var(--re-surface);
        background-image: none;
        box-shadow: var(--re-shadow);
        border-color: var(--re-line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }
  }
  @media (prefers-contrast: more) {
    :where(*, :scope) { --re-glass-opacity: 100%; --re-glass-filter: none; }
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel)) {
        /* Opaque preference paint must not depend on a local alpha override. */
        background-color: var(--re-surface);
        background-image: none;
        box-shadow: var(--re-shadow);
        border-color: var(--re-line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }
  }
  @media (forced-colors: active) {
    :where(*, :scope) { --re-glass-opacity: 100%; --re-glass-filter: none; }
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel)) {
        /* Opaque preference paint must not depend on a local alpha override. */
        background-color: var(--re-surface);
        background-image: none;
        box-shadow: var(--re-shadow);
        border-color: var(--re-line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }
  }
  @media print {
    :where(*, :scope) { --re-glass-opacity: 100%; --re-glass-filter: none; }
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel)) {
        /* Opaque preference paint must not depend on a local alpha override. */
        background-color: var(--re-surface);
        background-image: none;
        box-shadow: var(--re-shadow);
        border-color: var(--re-line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }
  }
  @media (forced-colors: active) {
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel, :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], .top-menu, .top-menu .menu-panel)) {
        background-color: Canvas;
        color: CanvasText;
        border-color: CanvasText;
        box-shadow: none;
      }
    }
  }
  @media print {
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(.sidebar, :scope.sidebar, .app-shell > :is(aside, header), :scope.app-shell > :is(aside, header), .card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover], :scope:is(.card, fieldset, details:not(.menu-collapse, .menu-dropdown), dialog, [popover])) {
        background-color: #fff;
        color: #000;
        box-shadow: none;
      }
    }
  }
}

/* Preference paint respects the same material boundaries as normal paint. */
@layer re.utilities {
  @media (prefers-reduced-transparency: reduce) {
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(button,input:is([type=button],[type=submit],[type=reset]),.button, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button)):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) {
        background-color: var(--re-glass-button-fill, var(--re-action-start));
        background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
      }
    }
  }
  @media (prefers-contrast: more) {
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(button,input:is([type=button],[type=submit],[type=reset]),.button, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button)):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) {
        background-color: var(--re-glass-button-fill, var(--re-action-start));
        background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
      }
    }
  }
  @media (forced-colors: active) {
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(button,input:is([type=button],[type=submit],[type=reset]),.button, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button)):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) {
        background-color: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none;
        background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
      }
    }
  }
  @media print {
    @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
      :where(button,input:is([type=button],[type=submit],[type=reset]),.button, :scope:is(button,input:is([type=button],[type=submit],[type=reset]),.button)):where(:not([data-material="solid"], .menu-toggle, .dropdown > li > :is(button, .button))) {
        background-color: #fff; color: #000; border: 1px solid #000; box-shadow: none;
        background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
      }
    }
  }
}

/* Badges use the action backing opacity to preserve small-label contrast. */
@layer re.components {
  @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      :where(.badge, :scope.badge):where(:not([data-material="solid"])) {
        background-color: color-mix(in srgb, var(--re-badge-glass-fill) var(--re-glass-button-opacity, 90%), transparent);
        background-image: linear-gradient(135deg, color-mix(in srgb, var(--re-badge-fill-end) calc(var(--re-gradient) * 6%), transparent), transparent);
        -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
      }
    }
  }
}

/* Alerts retain strong backing for readable multi-line content. */
@layer re.components {
  @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      :where(.alert, :scope.alert):where(:not([data-material="solid"])) {
        background-color: color-mix(in srgb, var(--re-alert-glass-fill) var(--re-glass-button-opacity, 90%), transparent);
        background-image: linear-gradient(135deg, color-mix(in srgb, var(--re-alert-fill-end) calc(var(--re-gradient) * 6%), transparent), transparent);
        -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
      }
    }
  }
}

/* Pagination follows material defaults without frosting the navigation wrapper. */
@layer re.components {
  @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      :where(.pagination > ol > li > :is(a,span)) {
        background-color: color-mix(in srgb, var(--re-pagination-fill) var(--re-glass-button-opacity, 90%), transparent);
        -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
      }
    }
  }
}

/* Lists and choice controls receive material from their shared parent. */
@layer re.components {
  @scope ([data-material="glass"], :scope[data-material="glass"]) to ([data-material]:not([data-material="glass"])) {
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      :where(.list-group > li, .tabs > label) {
        background-color: color-mix(in srgb, var(--re-choice-fill, var(--re-surface)) var(--re-glass-button-opacity, 90%), transparent);
        -webkit-backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
        backdrop-filter: var(--re-glass-filter, blur(12px) saturate(145%));
      }
    }
  }
}