/* Carousel cards, set A (cards-a.js): each card's markup ported from the
   app's CSS, scoped to the card (.ca, its .p-app top node). Values are the
   app's, resolved in both themes; each block names the file it comes from.
   The controls' states are the app's :hover and :active, here driven by the
   card's script ([data-hover], [data-press]): nothing in a card takes the
   reader's pointer, which is the carousel's (carousel.js). */

/* -------------------------------------------------- the card
   A stage the component sits on, centred in the 600 x 460 slot (the same
   card on a phone, scaled down whole by carousel.css), scaled where the
   component is larger than the slot. No surface (Pat 2026-11-09 02:24):
   the component floats on the page's ground, and a part cut by the slot's
   edge fades out over the last 64 rather than meeting it (.ca-highlight's
   line). */
.ca {
  /* tokens/*.css, stage/solid-materials.css, ui/FloatingMenu.css: the ones
     these parts read besides lab.css's .p-app. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --font-system: var(--font-sans);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --shadow-menu: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  --ink-surface-glyph: #f1f1f1;
  --ink-surface-text: #f1f1f1;
  --ink-surface-secondary: 60%;
  --raise-shade-darkmode: linear-gradient(180deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.065) 45%, rgb(255 255 255 / 0) 65%, rgb(0 0 0 / 0.1) 85%, rgb(0 0 0 / 0.2) 100%);
  --raise-rim-darkmode: rgb(255 255 255 / 0.37);
  --bowl-shade-darkmode: linear-gradient(180deg, rgb(0 0 0 / 0.19) 0%, rgb(0 0 0 / 0) 45%, rgb(255 255 255 / 0.2) 100%);
  --flat-switch-off: #acacac;
  --flat-switch-knob: #f7f7f7;
  --flat-switch-ring: #101010;
  --color-ground: #f1f1f1;
  /* globals.css:92: 30% of the writing's violet (accents.css --tint-purple). */
  --selection-wash: color-mix(in srgb, #a39bff 30%, transparent);
  --motion-slide: 240ms;
  --motion-tick: 400ms;
  --motion-orbit: 1400ms;
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  font-family: var(--font-sans);
  font-synthesis: none;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  .ca {
    --ink-surface-secondary: 72%;
    --flat-switch-off: #6e6e6e;
    --flat-switch-knob: #c8c8c8;
    --flat-switch-ring: #10101000;
    --color-ground: #171717;
    --selection-wash: color-mix(in srgb, #7166f7 30%, transparent);
  }
}
.ca-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.ca .glyph[data-size='24'] { --glyph-size: 24px; }

/* The pointer (lab.css .p-cursor): the Mac's own cursors, placed by
   cards-a.js on their hotspots. */
.ca-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 32px;
  height: 40px;
  opacity: 0;
}
.ca-cursor.on { opacity: 1; }
.ca-cursor > img {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  max-width: none;
}
.ca-cursor[data-mode='arrow'] > .arrow,
.ca-cursor[data-mode='beam'] > .beam { display: block; }

/* -------------------------------------------------- the button kit .hb
   (src/ui/header-button.css; lab.css's port of it in the drawer): flat at
   rest; under the pointer the raise (hover fill, the top rim, the raise
   shade), in over 100 and out over 140; pressed ink with the label in
   surface and the bowl, at once. */
.ca .hb {
  --hb-fill: var(--color-active);
  --hb-label: var(--color-ink);
  --hb-glyph: var(--color-ink);
  --hb-hover-motion: var(--motion-hover);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 100px;
  background-color: var(--hb-fill);
  color: var(--hb-label);
  font: 500 14px / 18px var(--font-sans);
  white-space: nowrap;
  transition:
    background-color var(--hb-hover-motion) ease-out,
    box-shadow var(--hb-hover-motion) ease-out,
    color var(--hb-hover-motion) ease-out,
    --hb-glyph var(--hb-hover-motion) ease-out;
}
.ca .hb[data-hover] { --hb-hover-motion: var(--motion-hover-in); }
.ca .hb > .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--hb-glyph);
}
.ca .hb[data-shape='circle'] { width: 36px; padding: 0; }
.ca .hb-capsule {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border-radius: 100px;
  background: var(--color-active);
}
.ca .hb-capsule .hb {
  --hb-fill: transparent;
  --hb-glyph: var(--color-muted);
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
}
.ca .hb[data-hover]:not([data-press], [aria-expanded='true']) {
  --hb-glyph: var(--color-ink);
  background-color: var(--color-hover);
  box-shadow: inset 0 1px 0 var(--raise-rim);
}
.ca .hb::before,
.ca .hb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hb-hover-motion) ease-out;
}
.ca .hb::before { background-image: var(--raise-shade); }
.ca .hb::after { background-image: var(--bowl-shade); }
.ca .hb[data-hover]:not([data-press], [aria-expanded='true'])::before { opacity: 1; }
.ca .hb[data-press] {
  --hb-label: var(--color-surface);
  --hb-glyph: var(--color-surface);
  background-color: var(--color-ink);
  box-shadow: none;
  transition: none;
}
.ca .hb[data-press]::before { opacity: 0; transition: none; }
.ca .hb[data-press]::after { opacity: 1; transition: none; }

/* -------------------------------------------------- 1. export
   ExportCard.css (.export-card, the v2 surface, head, format pill,
   separator, footer), ExportCarousel.css, ExportIncludes.css,
   ExportFooter.css, flat-switch.css, segmented.css. The card's tail (it
   hangs from the header's Export, ExportCard.tsx tail('top')) is left out:
   its opener is not in the card. */
.ca-export .ca-stage { width: 360px; scale: 0.9; }
.ca-export .export-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-synthesis: none;
  filter: var(--shadow-menu);
}
.ca-export .export-card-surface {
  --ink-inverse: var(--ink-surface-text);
  --glyph-inverse: var(--ink-surface-glyph);
  --menu-hover: color-mix(in srgb, var(--glyph-inverse) 14%, transparent);
  --menu-separator: color-mix(in srgb, var(--glyph-inverse) 12%, transparent);
  --export-card-confirm: color-mix(in srgb, var(--ink-inverse) 14%, transparent);
  --export-card-secondary: color-mix(in srgb, var(--glyph-inverse) var(--ink-surface-secondary), transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 360px;
  padding: 6px 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink-surface);
  color: var(--ink-inverse);
}
.ca-export .export-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 8px 16px;
}
.ca-export .export-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 500 16px / 24px var(--font-sans);
  color: var(--ink-inverse);
}
.ca-export .marquee { display: block; min-width: 0; overflow: hidden; white-space: nowrap; }
.ca-export .export-card-format-pill {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 30px;
  padding: 6px 8px;
  border-radius: 10px;
  background-color: var(--export-card-confirm);
  color: var(--ink-inverse);
  font: 500 14px / 18px var(--font-sans);
  white-space: nowrap;
}
.ca-export .export-card-format-pill .material-symbols-rounded {
  --icon-wght: 400;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 18px;
}
.ca-export .export-card-format-pill-chevron { color: var(--export-card-secondary); }
/* The pill's states (ExportCard.css:248-267): under the pointer raised on
   the menu's hover fill, in over 100 and out over 140; pressed and held
   open while its menu is, the surface's glyph ink with the bowl, its
   glyphs and label #101010, the chevron up, at once. */
.ca-export .export-card-format-pill {
  transition:
    background-color var(--motion-hover) ease-out,
    box-shadow var(--motion-hover) ease-out;
}
.ca-export .export-card-format-pill[data-hover]:not([data-press], [aria-expanded='true']) {
  background-image: var(--raise-shade-darkmode), linear-gradient(var(--menu-hover), var(--menu-hover));
  box-shadow: inset 0 1px 0 var(--raise-rim-darkmode);
  transition:
    background-color var(--motion-hover-in) ease-out,
    box-shadow var(--motion-hover-in) ease-out;
}
.ca-export .export-card-format-pill:is([data-press], [aria-expanded='true']) {
  color: #101010;
  background-color: var(--ink-surface-glyph);
  background-image: var(--bowl-shade-darkmode);
  box-shadow: none;
  transition: none;
}
.ca-export .export-card-format-pill:is([data-press], [aria-expanded='true']) .export-card-format-pill-chevron { color: #101010; }

/* The format menu (ExportCard.css:277-285, FloatingMenu.css, menu-row.css):
   the ink menu, 176 wide, radius 14 with a 1 px edge in the separator's
   ink, padding 6, rows 2 apart; no tail; its right edge 8 in from the
   card's, 3 under the pill (cards-a.js), the menus' shadow on the root.
   Rows 36, padding 8 10, gap 10, the glyph 20 filled at 300, the label
   14/18 (the chosen one Medium, the check 18 at its end, 16 after the
   label); the row under the pointer the 14% hover fill (in 100, out 140),
   pressed 22% at once; the separator 1 px, 4 6 round it. */
.ca-export .ca-export-menu {
  position: absolute;
  right: 8px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: var(--shadow-menu);
  transform-origin: 100% 0;
}
.ca-export .ca-export-menu[hidden] { display: none; }
.ca-export .floating-menu {
  --ink-inverse: var(--ink-surface-text);
  --glyph-inverse: var(--ink-surface-glyph);
  --menu-hover: color-mix(in srgb, var(--glyph-inverse) 14%, transparent);
  --menu-pressed: color-mix(in srgb, var(--glyph-inverse) 22%, transparent);
  --menu-separator: color-mix(in srgb, var(--glyph-inverse) 12%, transparent);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 176px;
  padding: 6px;
  border-radius: 14px;
  background: var(--ink-surface);
  box-shadow: inset 0 0 0 1px var(--menu-separator);
  color: var(--ink-inverse);
}
.ca-export .floating-menu-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink-inverse);
  font: 400 14px / 18px var(--font-sans);
  white-space: nowrap;
  transition: background-color var(--motion-hover) ease-out;
}
.ca-export .floating-menu-item[data-hover] {
  background: var(--menu-hover);
  transition-duration: var(--motion-hover-in);
}
.ca-export .floating-menu-item[data-press] {
  background: var(--menu-pressed);
  transition-duration: 0s;
}
.ca-export .floating-menu-item .material-symbols-rounded {
  --icon-fill: 1;
  --icon-wght: 300;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}
.ca-export .floating-menu-item-label { flex: 1 1 auto; padding-right: 16px; }
.ca-export .export-card-menu-row[aria-checked='true'] .floating-menu-item-label { font-weight: 500; }
.ca-export .floating-menu-item .floating-menu-check { font-size: 18px; line-height: 18px; }
.ca-export .floating-menu-sep {
  flex-shrink: 0;
  height: 1px;
  margin: 4px 6px;
  background: var(--menu-separator);
}

/* The carousel: edge to edge, items 16 in, 10 apart; 40 fades where more
   lies; sheets 80 x 112, radius 6, white in both themes, numbered 6
   beneath in 12/1.2. */
.ca-export .export-carousel-frame { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ca-export .export-carousel { position: relative; width: 100%; }
.ca-export .export-carousel-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 5px;
  scrollbar-width: none;
}
.ca-export .export-carousel-scroller::-webkit-scrollbar { display: none; }
.ca-export .export-carousel-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  padding: 0 0 0 16px;
}
.ca-export .export-carousel::before,
.ca-export .export-carousel::after {
  content: '';
  position: absolute;
  z-index: 2;
  /* 2 past the strip's box each way but the inner one (Pat 2026-11-09
     02:24): at the card's 0.9 the sheets' white edge rounded a pixel past
     a fade drawn on the box and showed at its top and outer side. The
     strip sits on the card's own ink there, so the overhang draws nothing. */
  top: -2px;
  bottom: -2px;
  width: 42px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-content-fade) ease-out;
}
.ca-export .export-carousel::before { left: -2px; background: linear-gradient(to right, var(--ink-surface) 12%, transparent); }
.ca-export .export-carousel::after { right: -2px; background: linear-gradient(to right, transparent, var(--ink-surface) 88%); }
.ca-export .export-carousel:has(> .export-carousel-scroller[data-fade-left])::before,
.ca-export .export-carousel:has(> .export-carousel-scroller[data-fade-right])::after { opacity: 1; }
.ca-export .export-carousel-item {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
}
.ca-export .export-carousel-sheet {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 80px;
  height: 112px;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff;
}
.ca-export .export-carousel-number {
  font: 400 12px / 1.2 var(--font-sans);
  color: var(--export-card-secondary);
}
/* A page drawn in the DOM (mock: no document is captured): the paper's
   ink (#101010 in both themes) as lines, a title, a heading, a mark's wash
   (the PDF keeps the mark's colour, lab.css --mark-hot), the marks
   numbered at the end. */
.ca-page {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  padding: 11px 9px;
}
.ca-page i { display: block; font-style: normal; }
.ca-page-line {
  height: 2.5px;
  border-radius: 1px;
  background: rgb(16 16 16 / 0.18);
}
.ca-page-line[data-kind='title'] { height: 5px; background: rgb(16 16 16 / 0.72); }
.ca-page-line[data-kind='h'] { height: 3.5px; margin-top: 1px; background: rgb(16 16 16 / 0.52); }
.ca-page-line[data-mark] { background: linear-gradient(90deg, rgb(16 16 16 / 0.18) 30%, #ceff0a 30%, #ceff0a 52%, rgb(16 16 16 / 0.18) 52%); }
.ca-page-gap { height: 3px; }
.ca-page-n { display: flex !important; align-items: center; gap: 3px; }
.ca-page-n > b { flex: none; width: 3px; height: 3px; border-radius: 50%; background: rgb(16 16 16 / 0.52); }
.ca-page-n > .ca-page-line { flex: 0 1 auto; }

/* The includes: padding 0 6; separators padding 4 6, a 1 px rule; rows
   radius 10, padding 7 10, gap 10, the label 14/18 and its line 12/1.4. */
.ca-export .export-card-includes { display: flex; flex-direction: column; padding: 0 6px; }
.ca-export .export-card-include-rows { display: flex; flex-direction: column; padding: 6px 0; }
.ca-export .export-card-separator { flex: none; padding: 4px 6px; }
.ca-export .export-card-separator::after { content: ''; display: block; height: 1px; background: var(--menu-separator); }
.ca-export .export-card-include {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 10px;
}
.ca-export .export-card-include-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.ca-export .export-card-include-label,
.ca-export .export-card-include-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.ca-export .export-card-include-label { font-size: 14px; line-height: 18px; color: var(--ink-inverse); }
.ca-export .export-card-include-line { font-size: 12px; line-height: 1.4; color: var(--export-card-secondary); }
/* flat-switch.css: on, the card's glyph ink with the knob in the card's
   colour at the end; held while the export is written (0.4). */
.ca-export .flat-switch {
  position: relative;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  border-radius: 100px;
  background-color: var(--flat-switch-off);
}
.ca-export .flat-switch[data-on='true'] { background-color: var(--ink-surface-glyph); }
.ca-export .flat-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 100px;
  background-color: var(--flat-switch-knob);
  box-shadow: inset 0 0 0 2px var(--flat-switch-ring);
}
.ca-export .flat-switch[data-on='true'] .flat-switch-knob {
  transform: translateX(16px);
  background-color: var(--ink-surface);
  box-shadow: none;
}
.ca-export .flat-switch[disabled] { opacity: 0.4; }
/* Context's three ways (ExportIncludes.css, segmented.css): 24 high,
   padding 2, the confirm's fill; options 20 high, padding 0 8, 12/1.2; the
   chosen one's thumb in the surface's glyph ink, its label Medium in the
   surface's colour. */
.ca-export .export-card-context { display: flex; flex: none; }
.ca-export .view-switch {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 24px;
  padding: 2px;
  border-radius: 100px;
  background: var(--export-card-confirm);
}
.ca-export .view-switch-thumb {
  position: absolute;
  top: 2px;
  height: 20px;
  border-radius: 100px;
  background-color: var(--glyph-inverse);
}
.ca-export .view-switch-option {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 100px;
  color: var(--ink-inverse);
  font: 400 12px / 1.2 var(--font-sans);
  white-space: nowrap;
}
.ca-export .view-switch-option[aria-checked='true'] { color: var(--ink-surface); font-weight: 500; }

/* The footer: 38 high, padding 2 6 0 16, 6 apart; the counter 12/1.2857 in
   the secondary ink; the location, Show in Finder, Export. */
.ca-export .export-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 38px;
  padding: 2px 6px 0 16px;
}
.ca-export .export-card-counter {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 12px / 1.2857 var(--font-sans);
  color: var(--export-card-secondary);
}
.ca-export .export-footer-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  gap: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--export-card-confirm);
  color: var(--ink-inverse);
  font: 500 14px / 18px var(--font-sans);
  white-space: nowrap;
  transition:
    width var(--motion-slide) ease-out,
    height var(--motion-slide) ease-out,
    padding var(--motion-slide) ease-out,
    background-color var(--motion-hover) ease-out,
    box-shadow var(--motion-hover) ease-out;
}
.ca-export .export-footer-button .material-symbols-rounded { flex: none; font-size: 20px; line-height: 1; }
.ca-export .export-footer-button[data-hover]:not([data-press]) {
  background-image: var(--raise-shade-darkmode), linear-gradient(var(--menu-hover), var(--menu-hover));
  box-shadow: inset 0 1px 0 var(--raise-rim-darkmode);
  transition:
    width var(--motion-slide) ease-out,
    height var(--motion-slide) ease-out,
    padding var(--motion-slide) ease-out,
    background-color var(--motion-hover-in) ease-out,
    box-shadow var(--motion-hover-in) ease-out;
}
.ca-export .export-footer-button[data-press] {
  background-color: var(--ink-surface-text);
  background-image: var(--bowl-shade-darkmode);
  color: #101010;
  box-shadow: none;
  transition:
    width var(--motion-slide) ease-out,
    height var(--motion-slide) ease-out,
    padding var(--motion-slide) ease-out;
}
.ca-export .export-location {
  width: var(--loc-w, auto);
  height: 34px;
  min-height: 0;
  padding: 8px 8px 8px 10px;
  overflow: hidden;
  font-weight: 400;
}
.ca-export .export-location-label { flex: none; max-width: 120px; margin-right: 2px; overflow: hidden; text-overflow: ellipsis; }
.ca-export .export-footer-button .export-location-chevron { width: 16px; overflow: hidden; font-size: 16px; color: var(--export-card-secondary); }
.ca-export .export-footer-button .export-location-glyph { position: absolute; top: 8px; left: 8px; opacity: 0; }
.ca-export .export-location-label,
.ca-export .export-footer-button .export-location-chevron { transition: opacity var(--motion-slide) ease-out; }
.ca-export .export-footer-button .export-location-glyph { transition: opacity calc(var(--motion-slide) / 3) ease-out; }
.ca-export .export-show { width: 36px; padding: 8px; }
.ca-export .export-show-label,
.ca-export .export-run-label {
  overflow: hidden;
  transition:
    width var(--motion-slide) ease-out,
    margin var(--motion-slide) ease-out,
    opacity var(--motion-slide) ease-out;
}
.ca-export .export-show-label { width: 0; margin-left: 0; opacity: 0; }
.ca-export .export-run { width: 92px; --ring-color: var(--ink-surface-glyph); }
.ca-export .export-run-label { width: 44px; margin-left: 8px; opacity: 1; }
.ca-export .export-card-footer[data-phase='busy'] .export-run,
.ca-export .export-card-footer[data-phase='done'] .export-run { width: 36px; padding: 8px; }
.ca-export .export-card-footer[data-phase='busy'] .export-run-label,
.ca-export .export-card-footer[data-phase='done'] .export-run-label { width: 0; margin-left: 0; opacity: 0; }
.ca-export .export-card-footer[data-phase='done'] .export-location { width: 36px; height: 36px; }
.ca-export .export-card-footer[data-phase='done'] .export-location-label,
.ca-export .export-card-footer[data-phase='done'] .export-location-chevron {
  opacity: 0;
  transition: opacity calc(var(--motion-slide) * 2 / 3) ease-out;
}
.ca-export .export-card-footer[data-phase='done'] .export-location-glyph {
  opacity: 1;
  transition: opacity calc(var(--motion-slide) * 2 / 3) ease-out calc(var(--motion-slide) / 3);
}
.ca-export .export-card-footer[data-phase='done'] .export-show { width: 144px; padding: 8px 10px; }
.ca-export .export-card-footer[data-phase='done'] .export-show-label { width: 96px; margin-left: 8px; opacity: 1; }
/* Export's glyphs cross: the old one laid over the new, fading out. */
.ca-export .export-run .export-run-layer { flex: none; }
.ca-export .export-run .export-run-spinner { display: inline-flex; }
.ca-export .export-run .export-run-layer.is-leaving {
  margin-left: -20px;
  animation: ca-fade-out var(--motion-content-fade) ease-out forwards;
}
.ca-export .export-run .export-run-layer.is-entering { animation: ca-fade-in var(--motion-content-fade) ease-out; }
/* The ray spinner (ray-spinner.css; ExportCard.css: the button's ink). */
.ca-export .ray-spinner {
  display: block;
  color: inherit;
  shape-rendering: geometricPrecision;
  transform-origin: 50% 50%;
  animation: ca-ray-turn 1s steps(12, end) infinite;
}
.ca-export .ray-spinner line { stroke: currentColor; stroke-linecap: round; fill: none; }
/* The rings (rings.css; ExportFooter.css: the orbit while it writes, the
   tick's one lap of 400 once written, rx 9.25 on Export's corner). */
.ca-export .export-run-orbit { position: absolute; inset: 0; border-radius: inherit; }
.ca-export .export-run-orbit[data-leaving='true'] { animation: ca-fade-out var(--motion-content-fade) ease-out forwards; }
.ca-export .ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ring-color, var(--color-ink));
}
.ca-export .ring-dash {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-dashoffset: calc(var(--ring-behind) + var(--ring-length) - var(--ring-start, 0) - var(--ring-lap));
}
.ca-export .export-run .ring-dash { rx: 9.25px; }
.ca-export .ring[data-kind='orbit'] {
  opacity: 1;
  animation: ca-ring-orbit var(--motion-orbit) linear infinite;
  transition: opacity var(--motion-tick) ease-out;
}
@starting-style { .ca-export .ring[data-kind='orbit'] { opacity: 0; } }
.ca-export .ring[data-kind='orbit'] .ring-dash { opacity: var(--ring-strength); }
.ca-export .ring[data-kind='sweep'] { animation: ca-ring-sweep var(--motion-tick) cubic-bezier(0.33, 1, 0.68, 1) both; }
.ca-export .ring[data-kind='sweep'] .ring-dash {
  opacity: calc(var(--ring-strength) * clamp(0, (var(--ring-lap) - var(--ring-behind)) / var(--ring-length), 1));
}
/* The pages' flight (ExportFooter.css .export-page-flight-layer, clipped
   to the card, radius 16). cards-a.js runs export-page-file. */
.ca-export .export-page-flight-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
}
.ca-export .export-carousel-sheet.export-page-flight { position: absolute; transform-origin: center; }
@keyframes ca-fade-in { from { opacity: 0; } }
@keyframes ca-fade-out { to { opacity: 0; } }
@keyframes ca-ray-turn { to { transform: rotate(360deg); } }
@keyframes ca-ring-orbit { from { --ring-lap: 0; } to { --ring-lap: 1; } }
@keyframes ca-ring-sweep {
  0% { --ring-lap: 0; opacity: 1; }
  65% { opacity: 1; }
  100% { --ring-lap: 1; opacity: 0; }
}

/* -------------------------------------------------- 2. format pill and Add
   FormatPill.css, AddDrawer.css, on the page's ground. The whole drawer
   shows (Pat 2026-11-09 02:24): the pill 8 from the stage's top, the drawer
   16 under it and 492 tall, 8 to spare under it; the stage scaled to the
   slot. */
.ca-format .ca-stage { width: 600px; height: 572px; scale: 0.76; }
.ca-format .format-pill {
  position: absolute;
  left: 50%;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 100px;
  background: var(--color-surface);
  transform: translateX(-50%);
}
.ca-format .hb.format-pill-type { gap: 4px; padding: 0 10px 0 12px; }
.ca-format .hb.format-pill-type:not([data-press]) { --hb-glyph: var(--color-muted); }
/* Add held open (FormatPill.css:84-98): the flat hover fill, the glyph in
   ink, no raise and no bowl, at once (header-button.css:197-203:
   .hb[aria-expanded="true"] has transition none). */
.ca-format .hb.format-pill-btn[aria-expanded='true'] {
  --hb-label: var(--color-ink);
  --hb-glyph: var(--color-ink);
  background-color: var(--color-hover);
  box-shadow: none;
  transition: none;
}
.ca-format .hb.format-pill-btn[aria-expanded='true']::before,
.ca-format .hb.format-pill-btn[aria-expanded='true']::after { opacity: 0; transition: none; }

/* The drawer: 392 wide, radius 24, padding 12, 492 high, 16 under the
   pill, its tail up at Add; the menu's shadow; in from 0.96 over 160 about
   the tail (cards-a.js). Whole inside the slot. */
.ca-format .add-drawer {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 392px;
  height: 492px;
  padding: 12px;
  border-radius: 24px;
  background: var(--color-surface);
  filter: var(--shadow-menu);
  transform-origin: var(--add-tail) -12.544px;
}
.ca-format .add-drawer[hidden] { display: none; }
.ca-format .add-drawer::before {
  content: '';
  position: absolute;
  top: -12.544px;
  left: calc(var(--add-tail) - 7.2425px);
  width: 14.485px;
  height: 12.544px;
  background: var(--color-surface);
  clip-path: path('M 14.485 12.544 L 0 12.544 L 5.5104 3 A 2 2 0 0 1 8.9746 3 Z');
}
/* The field: 36, capsule, the recess; search 18 muted; the placeholder
   14/18 muted, the field's caret before it (the drawer opens with the
   focus in the field, AddDrawer.tsx:416). */
.ca-format .add-drawer-field {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 6px 0 12px;
  border-radius: 100px;
  background: var(--color-recess);
  box-shadow: inset 0 0 0 1px var(--recess-edge), inset 0 1px 3px var(--shadow-recess);
  color: var(--color-muted);
}
.ca-format .add-drawer-input {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  font: 400 14px / 18px var(--font-system);
}
.ca-format .add-drawer-placeholder { color: var(--color-muted); white-space: nowrap; }
.ca-format .ca-field-caret {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--color-ink);
  animation: ca-blink 1s step-end infinite;
}
.ca-format .add-drawer-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 24px), transparent);
}
.ca-format .add-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, 86px);
  gap: 8px;
  justify-content: space-between;
}
.ca-format .add-drawer-grid > :nth-child(-n + 8) { margin-bottom: 8px; }
.ca-format .add-drawer-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 64px;
  border-radius: 12px;
  color: var(--color-ink);
}
.ca-format .add-drawer-tile-label { font: 400 13px / 16px var(--font-system); }
.ca-format .add-drawer-head {
  margin: 16px 4px 4px;
  color: var(--color-muted);
  font: 500 13px / 16px var(--font-system);
}
.ca-format .add-drawer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px 0 4px;
  border-radius: 12px;
}
.ca-format .add-drawer-row-lead { flex: 0 0 28px; width: 28px; color: var(--color-muted); text-align: center; }
.ca-format .add-drawer-row-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.ca-format .add-drawer-row-title {
  overflow: hidden;
  color: var(--color-ink);
  font: 400 14px / 18px var(--font-system);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-format .add-drawer-row-fact { flex: 0 0 auto; color: var(--color-muted); font: 400 13px / 16px var(--font-system); }
@keyframes ca-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* -------------------------------------------------- 3. highlight menu
   A zoom on the page's line: the site's block (lab.css .p-block, .p-wash,
   .p-line, .p-caret, .mk) at 1.6, on the ground the writing sits on (the
   strip's surface would not show on the card's); the selection's wash (Editor.css:574-578,
   globals.css --selection-wash); the highlight menu (HighlightMenu.css,
   highlight-strip.css, menu-strip.css, FloatingMenu.css). */
/* The zoom runs the line past the slot's sides: the card is clipped there
   and the cut fades out over 64, the line, its block's wash
   and anything under them. */
.ca-highlight {
  /* The cut's fade; the strip's tooltips stay 8 inside it (cards-a.js). */
  --ca-cut: 64px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ca-cut), #000 calc(100% - var(--ca-cut)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--ca-cut), #000 calc(100% - var(--ca-cut)), transparent);
}
.ca-highlight .ca-stage { width: 600px; height: 460px; }
/* The strip's tooltips (cards-a.js cardTip) over the menu and the line. */
.ca .ca-tip { z-index: 6; }
.ca-zoom {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  height: 262.5px;
  transform: scale(1.6);
  transform-origin: 0 0;
}
.ca-block { position: absolute; white-space: nowrap; }
/* The active block's wash, crisp and solid as the app's (lab.css .p-wash
   at rest: radius 12, the ink at 0.04): only where the zoom runs it past
   the card's sides does it fade, with the line, in the card's cut (Pat
   2026-11-09 05:08: "blurred everywhere instead of the part of it that
   should fade out of the frame"). */
.ca-block-wash {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--p-wash, rgb(16 16 16 / 0.04));
}
@media (prefers-color-scheme: dark) {
  .ca-block-wash { background: var(--p-wash, rgb(255 255 255 / 0.05)); }
}
.ca-line {
  position: relative;
  padding: 12px 16px;
  font: 300 20px / 40px var(--face);
  color: var(--ink);
  min-height: 64px;
  box-sizing: border-box;
}
.ca-line .l { display: inline-block; white-space: pre; }
.ca-line .mk { display: inline; }
.ca-caret {
  display: inline-block;
  width: 0;
  height: 26px;
  vertical-align: -6px;
  position: relative;
}
.ca-caret[hidden] { display: none; }
.ca-caret::before {
  content: '';
  position: absolute;
  left: -1.25px;
  top: 0;
  width: 2.5px;
  height: 100%;
  border-radius: 1.25px;
  background: var(--ink);
}
.ca-caret.blink { animation: ca-blink 1s step-end 220ms infinite; }
/* In the block before the line (cards-a.js select): behind the words, its
   height the line's 40 (mapped-geometry.ts:244-246), set by the layout. */
.ca-selection {
  position: absolute;
  border-radius: 3px;
  background: var(--selection-wash);
}
.ca-selection[hidden] { display: none; }
/* The menu's root: a column, the strip then the tail's 13 lane, the menu's
   shadow over both as one shape; it grows from the tail's point. */
.ca-hl-menu {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: var(--shadow-menu);
  transform-origin: 50% 100%;
}
.ca-hl-menu[hidden] { display: none; }
.ca-highlight .menu-strip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  height: 48px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--color-surface);
  color: var(--color-ink);
}
.ca-highlight .floating-menu-tail-lane {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
  height: 13px;
}
.ca-highlight .floating-menu-tail {
  flex-shrink: 0;
  width: 14.485px;
  height: 12.544px;
  background: var(--color-surface);
  clip-path: path('M 0 0 L 14.485 0 L 8.9746 9.544 A 2 2 0 0 1 5.5104 9.544 Z');
}

@media (prefers-reduced-motion: reduce) {
  .ca *, .ca *::before, .ca *::after { transition: none !important; }
  .ca-caret.blink, .ca-format .ca-field-caret { animation: none; }
}
/* A change made at once (cards-a.js instantly: reset and still). */
.ca-now,
.ca-now *,
.ca-now::before,
.ca-now::after,
.ca-now *::before,
.ca-now *::after { transition: none !important; }