/* ===========================================================================
   The Edge key: the one button style on getedge.cc
   GENERATED by tools/key_button.py; edit that file, then `write`.
   ---------------------------------------------------------------------------
   A raised keyboard key (after compound.mov's own buttons): a lit face over a
   darker bottom edge and a soft glow. It lifts 1px on hover and presses down
   on :active. The shared chrome head (tools/stamp_chrome.py) loads this file
   on every page, after edge-chrome / edge-glass / edge-sky.

   One element, no extra markup, so it works on every generation of page:
   the face is the element's own background, the edge is a hard box-shadow
   var(--k-d) below it, the glow a soft one under the edge. margin-bottom
   reserves the edge. Every state moves the face with transform only and
   draws the edge (d - y) below it, so the key's base never moves and a press
   never shifts layout.

   Variants on the site tokens (light; dark by system; data-theme="dark" and
   html.dark): blue (primary), dark (ink, a light key in dark mode), quiet
   (glass, the default), light (on the dark promo band). Size: sm.

   Pages keep their own layout (width, height, gap, font size). The key owns
   the look: face, edge, glow, radius, colour, motion and focus ring, marked
   !important because older pages style the same classes with inline id-level
   and !important rules.
   ========================================================================= */

:root {
  --key-blue: #154cff;
  --key-blue-fg: #fff;
  --key-blue-edge: color-mix(in srgb, #154cff 52%, #000);
  --key-ink: #101114;
  --key-ink-fg: #fff;
  --key-glass: #fcfdff;
  --key-glass-fg: #101114;
  --key-glass-edge: #b3c0d6;
  --key-glass-ring: rgba(33, 62, 116, .16);
  --key-glass-lit: 76%;
  --key-promo: #fff;
  --key-promo-fg: #101114;
  --key-focus: #154cff;
  --key-shade: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-appearance="light"]) {
    --key-blue-edge: color-mix(in srgb, #154cff 72%, #000);
    --key-ink: #f2f5fb;
    --key-ink-fg: #090b10;
    --key-glass: #222b47;
    --key-glass-fg: #eef1f7;
    --key-glass-edge: #0b1022;
    --key-glass-ring: rgba(160, 185, 255, .22);
    --key-glass-lit: 90%;
    --key-promo: #090b10;
    --key-promo-fg: #f2f5fb;
    --key-focus: #6d91ff;
  }
}

:root[data-theme="dark"],
:root.dark {
  --key-blue-edge: color-mix(in srgb, #154cff 72%, #000);
  --key-ink: #f2f5fb;
  --key-ink-fg: #090b10;
  --key-glass: #222b47;
  --key-glass-fg: #eef1f7;
  --key-glass-edge: #0b1022;
  --key-glass-ring: rgba(160, 185, 255, .22);
  --key-glass-lit: 90%;
  --key-promo: #090b10;
  --key-promo-fg: #f2f5fb;
  --key-focus: #6d91ff;
}

/* ---- which elements are keys ------------------------------------------
   .edge-key                        canonical class
   .ov-btn                          tools/ds.py button(): team, voice, move, growth, pricing, benchmarks, prompts, linkedin-audit
   .btn                             library app (skills, s, creators, catalog, docs, tasks, evaluation), scan skill pages, explore, pricing
   .pl-btn                          first-users, free-wedge playbooks
   .pl-find-go                      first-users, free-wedge: Find
   .el-go                           first-users, free-wedge lists: Playbook row link
   .el-primary                      first-users, free-wedge band: Get Edge free
   .gw-open                         growth: Playbook row link
   .ov-search button[type=submit]   growth: Find my plays
   .ry-btn                          pro, creators/royalties
   .tr-share-btn                    trending: share
   .tr-try                          trending: Try
   .tr-promo-cta                    trending promo band
   .tr-search button[type=submit]   trending: Search
   button.go[type=submit]           explore: Find skills
   .search-send                     library app: search submit
   .copy-prompt                     home, marketing, recruiting, talent: setup prompt Copy and nav install
   button.chip[data-copy]           docs: Copy in setup prompt blocks
   #edge-header .edge-setup-copy    chrome nav: Copy setup link
   Not keys: tabs, segmented controls, chips and filters, toggles, icon-only,
   close and carousel buttons, pagers, the theme switch, text links, cards. */

/* Reserve the edge and set the default (quiet) colours. A plain selector
   list, so each selector keeps its own specificity: a page that sets its own
   margin on a key still wins, and every variant below outranks the default. */
.edge-key,
.ov-btn,
.btn,
.pl-btn,
.pl-find-go,
.el-go,
.el-primary,
.gw-open,
.ov-search button[type=submit],
.ry-btn,
.tr-share-btn,
.tr-try,
.tr-promo-cta,
.tr-search button[type=submit],
button.go[type=submit],
.search-send,
.copy-prompt,
button.chip[data-copy] {
  --k-d: 5px;
  --k-r: 12px;
  --k: var(--key-glass);
  --k-fg: var(--key-glass-fg);
  --k-edge: var(--key-glass-edge);
  --k-glow: rgba(33, 62, 116, .18);
  --k-ring: var(--key-glass-ring);
  --k-lit: color-mix(in srgb, var(--k) var(--key-glass-lit), #fff);
  position: relative;
  margin-bottom: var(--k-d);
}

/* The chrome resets everything in the header (`all: revert`, id level), so
   the nav key is set up here. The header row has room for the edge. */
:root #edge-header .edge-setup-copy {
  --k-d: 5px;
  --k-r: 12px;
  position: relative;
}

:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy) {
  --k-e: calc(var(--k-d) - var(--k-y, 0px));
  border-color: transparent !important;
  border-radius: var(--k-r) !important;
  color: var(--k-fg) !important;
  background:
    radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, 0) 100%),
    radial-gradient(114.65% 114.65% at 9.73% 17.27%, var(--k-lit) 0, var(--k) 100%) !important;
  background-blend-mode: overlay, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(var(--key-shade), .14),
    0 0 0 1px var(--k-ring),
    0 var(--k-e) 0 0 var(--k-edge),
    0 calc(var(--k-e) + 1px) 0 0 rgba(var(--key-shade), .22),
    0 calc(var(--k-e) * 1.6 + 3px) calc(var(--k-e) * 2.4 + 2px) -4px var(--k-glow) !important;
  transform: translateY(var(--k-y, 0px)) !important;
  transition: transform .2s cubic-bezier(.3, .7, .4, 1), box-shadow .2s cubic-bezier(.3, .7, .4, 1), filter .2s !important;
  text-decoration: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* The hit area is at least 44px tall, even on a small key. */
:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: min(0px, calc(50% - 22px));
  bottom: min(calc(0px - var(--k-d)), calc(50% - 22px));
}

/* Hover: the face rises 1px. Press: it drops onto the edge, 1px of edge left. */
:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy):hover {
  --k-y: -1px;
}

:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy):active,
:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy).is-down {
  --k-y: calc(var(--k-d) - 1px);
  transition-duration: .06s !important;
}

:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy):focus-visible {
  outline: 2px solid var(--key-focus) !important;
  outline-offset: 3px !important;
}

:root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy):disabled {
  cursor: not-allowed;
  filter: saturate(.4) !important;
}

/* ---- variants (a selector list: each keeps its own specificity) ------ */

/* blue */
:root .edge-key-blue,
:root .ov-btn-blue,
:root .btn.primary,
:root .btn-blue,
:root .pl-find-go,
:root .pr-plan .btn,
:root .ov-search button[type=submit],
:root .tr-search button[type=submit],
:root button.go[type=submit],
:root .search-send {
  --k: var(--key-blue);
  --k-fg: var(--key-blue-fg);
  --k-edge: var(--key-blue-edge);
  --k-glow: color-mix(in srgb, var(--key-blue) 45%, transparent);
  --k-ring: transparent;
  --k-lit: color-mix(in srgb, var(--k) 76%, #fff);
}

/* dark */
:root .edge-key-dark,
:root .ov-btn-dark,
:root .btn-black,
:root .pl-btn,
:root .ry-btn,
:root .tr-try,
:root .copy-prompt,
:root .edge-setup-copy {
  --k: var(--key-ink);
  --k-fg: var(--key-ink-fg);
  --k-edge: color-mix(in srgb, var(--key-ink) 45%, #000);
  --k-glow: color-mix(in srgb, var(--key-ink) 30%, transparent);
  --k-ring: transparent;
  --k-lit: color-mix(in srgb, var(--k) 76%, #fff);
}

/* light */
:root .edge-key-light,
:root .ov-btn-light,
:root .tr-promo-cta,
:root .el-primary {
  --k: var(--key-promo);
  --k-fg: var(--key-promo-fg);
  --k-edge: color-mix(in srgb, var(--key-promo) 62%, #6c7a96);
  --k-glow: rgba(0, 0, 0, .35);
  --k-ring: transparent;
  --k-lit: color-mix(in srgb, var(--k) 76%, #fff);
}

/* quiet */
:root .edge-key-quiet,
:root .ov-btn-quiet,
:root .btn.secondary,
:root .btn.ghost,
:root .btn.quiet,
:root .btn-quiet,
:root .btn-line,
:root .pl-btn-quiet,
:root .copy-prompt.quiet-copy {
  --k: var(--key-glass);
  --k-fg: var(--key-glass-fg);
  --k-edge: var(--key-glass-edge);
  --k-glow: rgba(33, 62, 116, .18);
  --k-ring: var(--key-glass-ring);
  --k-lit: color-mix(in srgb, var(--k) var(--key-glass-lit), #fff);
}

/* sm: a 4px edge and a 10px radius, for keys inside a row or a prompt box */
:root .edge-key-sm,
:root .btn-sm,
:root .tr-share-btn,
:root .tr-try,
:root .el-go,
:root .gw-open,
:root button.chip[data-copy] {
  --k-d: 4px;
  --k-r: 10px;
}

/* ---- motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy),
  :root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy):is(:hover, :active, .is-down) {
    --k-y: 0px;
    transition: none !important;
  }

  /* No movement: a press only darkens the face. */
  :root :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ov-search button[type=submit], .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .tr-search button[type=submit], button.go[type=submit], .search-send, .copy-prompt, button.chip[data-copy], #edge-header .edge-setup-copy):is(:active, .is-down) {
    filter: brightness(.9) !important;
  }
}