/* ============================================================
   Lafa · notch island shell · lafa-notch.css
   ------------------------------------------------------------
   The notch island is rendered FAITHFULLY on a <canvas> by
   lafa-notch.js (a verbatim port of the app's SwiftUI Canvas
   code). This stylesheet only provides the container + a
   reduced-motion note; all pixels come from the canvas.

   Load order (web):
     <link rel="stylesheet" href="themes.css">      (generated tokens)
     <link rel="stylesheet" href="lafa-notch.css">   (this shell)
     <script src="lafa-notch.js" defer></script>     (faithful renderer)

   Markup:
     <div class="lafa-notch" data-shape="attach" data-style="bars"
          data-phase="listening" data-done="signals"></div>

   See docs/DESIGN_TOKENS.md §2b and docs/PILL_WEB_INTEGRATION.md §5b.
   ============================================================ */

.lafa-notch {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  line-height: 0;
  /* phase color the renderer reads from tokens; listening = theme accent */
  --notch-c-listening: var(--accent);
}

.lafa-notch__canvas {
  display: block;
}