/* stage-58-icon-system-finish: one warm-glass language for app icons. */

:root {
  --focus-icon-shell-size: 38px;
  --focus-icon-glyph-size: 20px;
  --focus-sidebar-icon-shell: 38px;
  --focus-add-menu-icon-size: 42px;
  --focus-add-menu-glyph-size: 21px;
  --focus-inline-icon-size: 22px;
  --focus-inline-icon-glyph: 18px;
  --focus-icon-radius: 15px;
  --focus-icon-ink: color-mix(in srgb, var(--text-primary, #2f2a26) 76%, var(--focus-accent-amber, #d89a3d) 12%);
  --focus-icon-muted-ink: color-mix(in srgb, var(--text-secondary, #6f655e) 74%, var(--text-primary, #2f2a26) 26%);
  --focus-icon-active-ink: color-mix(in srgb, var(--primary, #5678f5) 54%, var(--text-primary, #2f2a26) 46%);
  --focus-icon-shell-bg:
    radial-gradient(circle at 30% 16%, color-mix(in srgb, #fff 34%, transparent), transparent 2.3rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 70%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 82%, transparent));
  --focus-icon-shell-hover:
    radial-gradient(circle at 30% 16%, color-mix(in srgb, #fff 40%, transparent), transparent 2.35rem),
    linear-gradient(145deg, color-mix(in srgb, var(--primary, #5678f5) 10%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 86%, transparent));
}

.side-button > .icon {
  position: relative !important;
  display: inline-grid !important;
  width: var(--focus-sidebar-icon-shell) !important;
  min-width: var(--focus-sidebar-icon-shell) !important;
  height: var(--focus-sidebar-icon-shell) !important;
  min-height: var(--focus-sidebar-icon-shell) !important;
  place-items: center !important;
  place-self: center !important;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,.22) 72%, transparent) !important;
  border-radius: var(--focus-icon-radius) !important;
  background: var(--focus-icon-shell-bg) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
    0 0.5rem 1.25rem color-mix(in srgb, #000 7%, transparent) !important;
  color: color-mix(in srgb, currentColor 78%, #fff 10%) !important;
  opacity: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
}

.side-button > .icon::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-icon-glyph-size) !important;
  min-width: var(--focus-icon-glyph-size) !important;
  height: var(--focus-icon-glyph-size) !important;
  min-height: var(--focus-icon-glyph-size) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--side-icon, var(--icon-note)) center / contain no-repeat !important;
  mask: var(--side-icon, var(--icon-note)) center / contain no-repeat !important;
  transform: none !important;
}

.side-button:is(:hover, :focus-visible, .active) > .icon {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 28%, rgba(255,255,255,.2)) !important;
  background: var(--focus-icon-shell-hover) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 0.65rem 1.45rem color-mix(in srgb, var(--primary, #5678f5) 11%, transparent) !important;
  color: #fff8ed !important;
  transform: none !important;
}

.side-button:is(:hover, :focus-visible, .active) > .icon::before {
  transform: none !important;
}

.app-shell.sidebar-collapsed .side-button > .icon {
  width: var(--focus-sidebar-icon-shell) !important;
  min-width: var(--focus-sidebar-icon-shell) !important;
  height: var(--focus-sidebar-icon-shell) !important;
  min-height: var(--focus-sidebar-icon-shell) !important;
}

.add-menu-icon {
  position: relative !important;
  display: inline-grid !important;
  width: var(--focus-add-menu-icon-size) !important;
  min-width: var(--focus-add-menu-icon-size) !important;
  height: var(--focus-add-menu-icon-size) !important;
  min-height: var(--focus-add-menu-icon-size) !important;
  place-items: center !important;
  border-radius: var(--focus-icon-radius) !important;
  border: 1px solid color-mix(in srgb, var(--add-flow-action, var(--primary, #5678f5)) 18%, var(--surface-border, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 30% 16%, color-mix(in srgb, #fff 36%, transparent), transparent 2.15rem),
    linear-gradient(145deg, color-mix(in srgb, var(--add-flow-action, var(--primary, #5678f5)) 13%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 76%, transparent)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent) !important;
  color: color-mix(in srgb, var(--add-flow-action, var(--primary, #5678f5)) 64%, var(--text-primary, #2f2a26) 36%) !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
}

.add-menu-icon::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: var(--focus-add-menu-glyph-size) !important;
  min-width: var(--focus-add-menu-glyph-size) !important;
  height: var(--focus-add-menu-glyph-size) !important;
  min-height: var(--focus-add-menu-glyph-size) !important;
  inset: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--add-flow-icon, var(--icon-plus)) center / contain no-repeat !important;
  mask: var(--add-flow-icon, var(--icon-plus)) center / contain no-repeat !important;
  transform: none !important;
}

.add-menu-icon::after {
  display: none !important;
}

.add-menu button:is(:hover, :focus-visible) .add-menu-icon {
  border-color: color-mix(in srgb, var(--add-flow-action, var(--primary, #5678f5)) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 0.7rem 1.45rem color-mix(in srgb, var(--add-flow-action, var(--primary, #5678f5)) 11%, transparent) !important;
}

.add-menu button:is(:hover, :focus-visible) .add-menu-icon::before {
  transform: none !important;
}

.icon.mic {
  position: relative !important;
  display: inline-grid !important;
  width: var(--focus-inline-icon-size) !important;
  min-width: var(--focus-inline-icon-size) !important;
  height: var(--focus-inline-icon-size) !important;
  min-height: var(--focus-inline-icon-size) !important;
  place-items: center !important;
  background: none !important;
  color: var(--focus-icon-muted-ink) !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.icon.mic::before {
  content: "" !important;
  display: block !important;
  width: var(--focus-inline-icon-glyph) !important;
  height: var(--focus-inline-icon-glyph) !important;
  background: currentColor !important;
  -webkit-mask: var(--icon-mic) center / contain no-repeat !important;
  mask: var(--icon-mic) center / contain no-repeat !important;
}

.voice-box:is(:hover, :focus-within) .icon.mic {
  color: var(--focus-icon-active-ink) !important;
}

.current-date::after,
.bookmark-card-icon,
.quick-action [data-quick-icon],
.overview-card::before {
  color: var(--focus-icon-active-ink) !important;
  background-color: currentColor !important;
  filter: none !important;
}

.bookmark-card-icon {
  width: var(--focus-inline-icon-size) !important;
  min-width: var(--focus-inline-icon-size) !important;
  height: var(--focus-inline-icon-size) !important;
  min-height: var(--focus-inline-icon-size) !important;
}

.quick-action [data-quick-icon]::before {
  width: var(--focus-inline-icon-glyph) !important;
  height: var(--focus-inline-icon-glyph) !important;
  transform: none !important;
}

.overview-card::before {
  width: var(--focus-inline-icon-size) !important;
  height: var(--focus-inline-icon-size) !important;
  border-radius: 0 !important;
}

@media (max-width: 760px) {
  :root {
    --focus-icon-shell-size: 36px;
    --focus-icon-glyph-size: 19px;
    --focus-sidebar-icon-shell: 36px;
    --focus-add-menu-icon-size: 40px;
    --focus-add-menu-glyph-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-button > .icon,
  .side-button > .icon::before,
  .add-menu-icon,
  .add-menu-icon::before,
  .icon.mic,
  .icon.mic::before,
  .quick-action [data-quick-icon]::before {
    transition: none !important;
    transform: none !important;
  }
}