/* Apple corners are CONTINUOUS (squircle), not circular arcs. The web has no
   continuous-corner primitive, so these values are tuned to read correctly with
   plain border-radius. Where the true shape matters — an app icon, a large tile —
   use --squircle-mask, which is a real superellipse (|x|^5 + |y|^5 = 1) sampled to
   a scalable path. It fills whatever box you put it on:
     mask: var(--squircle-mask) center / 100% 100% no-repeat;
   Use it INSTEAD of border-radius on that element, not alongside it. */

:root {
  --radius-xs: 4px;    /* macOS small controls */
  --radius-sm: 6px;    /* macOS buttons, fields */
  --radius-md: 8px;    /* iOS small controls, segmented control inner */
  --radius-lg: 10px;   /* iOS grouped list block, alerts */
  --radius-xl: 12px;   /* iOS cards, popovers */
  --radius-2xl: 14px;  /* iOS filled buttons */
  --radius-3xl: 16px;  /* iOS large cards */
  --radius-4xl: 20px;  /* macOS window, large tiles */
  --radius-sheet: 38px;/* iOS sheet top corners */
  --radius-device: 47px;/* iPhone display corner */
  --radius-capsule: 999px;

  /* Semantic */
  --radius-control: var(--radius-md);
  --radius-button: var(--radius-2xl);
  --radius-card: var(--radius-xl);
  --radius-field: var(--radius-lg);
  --radius-icon-app: 22.37%; /* app-icon superellipse as a share of the side */

  --squircle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100.00 50.00L99.96 66.80L99.83 72.14L99.61 76.01L99.31 79.12L98.92 81.75L98.44 84.05L97.87 86.08L97.20 87.89L96.44 89.52L95.58 91.00L94.61 92.33L93.53 93.53L92.33 94.61L91.00 95.58L89.52 96.44L87.89 97.20L86.08 97.87L84.05 98.44L81.75 98.92L79.12 99.31L76.01 99.61L72.14 99.83L66.80 99.96L50.00 100.00L33.20 99.96L27.86 99.83L23.99 99.61L20.88 99.31L18.25 98.92L15.95 98.44L13.92 97.87L12.11 97.20L10.48 96.44L9.00 95.58L7.67 94.61L6.47 93.53L5.39 92.33L4.42 91.00L3.56 89.52L2.80 87.89L2.13 86.08L1.56 84.05L1.08 81.75L0.69 79.12L0.39 76.01L0.17 72.14L0.04 66.80L0.00 50.00L0.04 33.20L0.17 27.86L0.39 23.99L0.69 20.88L1.08 18.25L1.56 15.95L2.13 13.92L2.80 12.11L3.56 10.48L4.42 9.00L5.39 7.67L6.47 6.47L7.67 5.39L9.00 4.42L10.48 3.56L12.11 2.80L13.92 2.13L15.95 1.56L18.25 1.08L20.88 0.69L23.99 0.39L27.86 0.17L33.20 0.04L50.00 0.00L66.80 0.04L72.14 0.17L76.01 0.39L79.12 0.69L81.75 1.08L84.05 1.56L86.08 2.13L87.89 2.80L89.52 3.56L91.00 4.42L92.33 5.39L93.53 6.47L94.61 7.67L95.58 9.00L96.44 10.48L97.20 12.11L97.87 13.92L98.44 15.95L98.92 18.25L99.31 20.88L99.61 23.99L99.83 27.86L99.96 33.20Z' fill='%23fff'/%3E%3C/svg%3E"); /* @kind other */

  /* ---- CONCENTRICITY (toolbars.md > Best practices) ----
     ✅ VERIFIED from source, September 2026. Apple, verbatim: standard buttons, text
     fields, headers and footers "have corner radii that are concentric with bar
     corners", and if you create a custom component you must "ensure that its corner
     radius is also concentric with the bar's corners". This is the rule that makes
     nested glass read as machined rather than stacked. Concentric means the inner and outer curves share a centre, which gives
     one formula:

         inner radius = outer radius − the padding between them

     So a 20px-radius glass bar with 6px of inset padding wants 14px on its children —
     not 20px (curves diverge, the child looks pinched at the corner) and not a capsule
     unless the child fills the bar's height. Composed below for the radii actually used
     as containers; --radius-concentric() isn't possible in CSS, so use calc() directly
     for any pairing not listed. */
  --radius-concentric-panel-6: calc(var(--glass-radius-panel, 20px) - 6px);
  --radius-concentric-panel-8: calc(var(--glass-radius-panel, 20px) - 8px);
  --radius-concentric-card-8: calc(var(--radius-card) - 8px);
  --radius-concentric-sheet-16: calc(var(--radius-sheet) - 16px);
}