/* ──────────────────────────────────────────────────────────────
   The landing page, 8.1: v8's corners. Loaded after landing-v8.css.

   Four radius steps and nothing between them: chips and small controls,
   buttons, cards, large panels. Where a shape sits inside another with a
   gap, its radius is the outer one less the gap, so the curves stay
   concentric. No pills: a chip is a small rectangle with small corners.

   Chrome draws the corners as squircles (corner-shape), whose curvature
   starts gradually, so a 16px corner reads firmer than a 16px circular one.
   Browsers without it get plain radii at about sixty percent, which look
   the same. corner-shape is set only on the elements named below: set on
   everything it would turn the avatars and status dots into squircles too.
   ────────────────────────────────────────────────────────────── */

:root{--r-xs:4px; --r-btn:7px; --r-md:9px; --r-lg:13px}
@supports (corner-shape: squircle){
  :root{--r-xs:7px; --r-btn:12px; --r-md:16px; --r-lg:24px}
  .l8-pill,.l8-eg a,.l8-tag,.l8-lock,.l8-step,.l8-faq summary::after,.l8-pr-go,.l8-bar-t i,
  .nav .cta,.l8-btn,.l8-go,.foot .up-btn,
  .l8-q-i,.l8-frag,.l8-src-i,.l8-uc-i,.l8-pr-i,.l8-note,.l8-sheet,.l8-find .find-box,.l8-find .find-menu,
  .l8-fig,.l8-stage,.l8-close-in{corner-shape:squircle}
}

/* chips and small controls */
.l8-pill,.l8-eg a,.l8-tag,.l8-lock,.l8-step,.l8-faq summary::after,.l8-pr-go{border-radius:var(--r-xs)}
.l8-bar-t i{border-radius:var(--r-xs) var(--r-xs) 0 0}

/* buttons */
.nav .cta,.l8-btn,.foot .up-btn{border-radius:var(--r-btn)}
/* inside the search box, 7px in from its edge */
.l8-go{border-radius:max(3px,calc(var(--r-md) - 7px))}

/* cards: the app's hairline, gold on hover, no floating */
.l8-q-i,.l8-frag,.l8-src-i,.l8-uc-i,.l8-pr-i,.l8-note,.l8-sheet,.l8-find .find-box,.l8-find .find-menu{border-radius:var(--r-md)}
.l8-q-i,.l8-src-i,.l8-uc-i,.l8-pr-i,.l8-note{border:1px solid var(--line)}
.l8-q-i:hover,.l8-pr-i:hover{border-color:var(--gold)}
.l8-frag,.l8-sheet,.l8-find .find-menu,.l8-close-in{overflow:hidden}
.l8-frag{border-color:var(--line)}

/* large panels */
.l8-fig,.l8-stage,.l8-close-in{border-radius:var(--r-lg)}
.l8-fig{border-color:var(--line)}
.l8-close-in{border:1px solid var(--line)}

/* The footer's gold tick, on the top edge of each card, lined up with the
   card's text. It replaces the ink rule on the professions and the gold
   bar down the side of the note, both of which bend badly round a corner. */
.l8-uc-i,.l8-src-i,.l8-pr-i,.l8-note{position:relative}
.l8-uc-i::before,.l8-src-i::before,.l8-pr-i::before,.l8-note::before{content:"";position:absolute;top:-1px;width:24px;height:2px;background:var(--gold)}
.l8-uc-i::before{left:clamp(26px,3vw,38px)}
.l8-src-i::before{left:22px}
.l8-pr-i::before{left:26px}
.l8-note::before{left:clamp(22px,3vw,30px)}
.l8-close-in::before{border-radius:inherit}

@media(max-width:640px){
  .l8-fig{border-radius:var(--r-md)}
  .l8-stage{border-radius:var(--r-md)}
  .l8-frag{border-radius:max(4px,calc(var(--r-md) - 6px))}
}