/* Carousel cards, set B (cards-b.js): each card's markup ported from
   the app's CSS, scoped to the card's own top node (.cb-marks, .cb-docs,
   .cb-focus, each a .p-app for the app's tokens). 600 x 460 (on a phone the
   same card, scaled down whole by carousel.css). No surface (Pat 2026-11-09 02:24): each floats
   on the page's ground, and what the slot cuts fades out at its edge.
   Values are the app's tokens resolved; the file each block comes from is
   named above it. The cards' own tokens, light and dark, first. */

.cb {
  --glyph-rest: #878787;
  --side-menu-well-active: #d0d0d0;
  --shadow-drag: #1010101f;
  --cb-ground: #f1f1f1;
  --cb-block-wash: rgb(16 16 16 / 0.04);
  --motion-reveal-in: 160ms;
  --motion-reveal-out: 120ms;
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--color-ink);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .cb {
    --glyph-rest: #747474;
    --side-menu-well-active: #353535;
    --shadow-drag: #00000066;
    --cb-ground: #171717;
    --cb-block-wash: rgb(255 255 255 / 0.05);
  }
}

/* The pointer (pointer.js, lab.css .p-cursor): the Mac's arrow, inside the
   card, its hotspot on translate (cards-b.js). */
.cb .cb-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  display: block;
  width: 28px;
  height: 40px;
  max-width: none;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.cb .cb-cursor.on { opacity: 1; }

/* ---------------------------------------------------------------- the block
   The page's block (lab.css .p-block, .p-wash, .p-line, .p-caret): the
   highlight area, 12 16 padding, the 20/40 light line, the 2.5 caret. The
   wash is the site's .mk washed (lab.css:440-453), and takes no pointer
   here. It fades (tokens/motion.css, the text wash; Pat 2026-11-08 21:19,
   "keep the fade"): in over --motion-reveal-in, out over
   --motion-reveal-out, on the scale's fade curves. */
.cb .cb-block {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.cb .cb-wash {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--cb-block-wash);
}
.cb .cb-line {
  position: relative;
  padding: 12px 16px;
  min-height: 64px;
  font: 300 20px / 40px var(--face);
  color: var(--color-ink);
}
.cb .cb-ph {
  position: absolute;
  left: 16px;
  top: 12px;
  opacity: 0.2;
  white-space: pre;
}
.cb .cb-ph.gone { display: none; }
.cb .cb-text .w { display: inline-block; white-space: nowrap; }
.cb .cb-text .l { display: inline-block; white-space: pre; }
.cb .cb-text .mk {
  display: inline;
  pointer-events: none;
  transition:
    background-color var(--motion-reveal-out) ease-in,
    border-bottom-color var(--motion-reveal-out) ease-in;
}
.cb .cb-text .mk.washed {
  transition:
    background-color var(--motion-reveal-in) ease-out,
    border-bottom-color var(--motion-reveal-in) ease-out;
}
/* A change at once (cards-b.js: a still frame). */
.cb.cb-now .cb-text .mk { transition: none; }
.cb .cb-caret {
  display: inline-block;
  position: relative;
  width: 0;
  height: 26px;
  vertical-align: -6px;
}
.cb .cb-caret::before {
  content: '';
  position: absolute;
  left: -1.25px;
  top: 0;
  width: 2.5px;
  height: 100%;
  border-radius: 1.25px;
  background: var(--color-ink);
}
/* Solid on each move, then the blink (lab.css p-blink). */
.cb .cb-caret.blink { animation: p-blink 1s step-end 220ms infinite; }
/* The margin (margin.css, scoped to .p-margin): the rail sits 24 right of
   the block; cards-b.js places the mark's slot on its line. */
.cb .cb-rail { z-index: 2; }
.cb .cb-rail .margin-mark { pointer-events: none; }

/* ---------------------------------------------------------------- 1. marks
   A block's top stays put as it types and it grows downward only, so the
   top is pinned where the finished paragraph sits centred: 3 lines
   (3 x 40 + 24 = 144 in the 460 slot, top 158). */
/* The block's wash is the app's, crisp and solid (.cb .cb-wash, radius 12):
   the block sits whole inside the card, so nothing of it leaves the frame
   to fade (Pat 2026-11-09 05:08: the wash was "blurred everywhere"). */
.cb-marks .cb-block { left: 64px; top: 158px; width: 412px; translate: none; }

/* ---------------------------------------------------------------- 2. drag
   The Documents drawer's body (DocumentsDrawer.css): the well and the grid
   side by side, the shared side menu's 16 lane between them
   (SideMenuPane.tsx). */
.cb-docs .cb-docs-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* The grid's two rows (420 to the foot of their last lines) sit centred
     in the 460 slot: 20 above and 20 below (Pat 2026-11-09 12:51). */
  padding: 20px 15px 16px 16px;
}

/* The well (SideMenu.css:7-50): its stop's 164 (2 grid columns), the 6
   inside it, --side-menu-well, radius 16; the rows 2 apart under a 6 inset
   (SideMenu.css:56-66). Inside it the surface is the well. */
.cb-docs .side-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 164px;
  padding: 0 6px;
  background: var(--side-menu-well);
  border-radius: 16px;
  overflow: hidden;
}
.cb-docs .side-menu > * { --color-surface: var(--side-menu-well); }
.cb-docs .side-menu-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}
.cb-docs .documents-well-folders,
.cb-docs .documents-well-row {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.cb-docs .documents-well-folders { gap: 2px; }

/* A well's row (SidebarNavItem.css:11-120): 40 high, radius 10, padding 0
   12, gap 12; the glyph 20, filled 500 in --glyph-rest, ink when chosen; the
   label 16/22, Medium when chosen; the count 13/18 muted on its baseline.
   Hover (data-hover, the card's pointer): the 55% mix of the well's
   active grey, in over 100, out over 140. Chosen: --color-selected. The
   drop target: the chosen fill, the inset 1.5 ink edge and folder_open in
   ink, eased over --motion-hover. */
.cb-docs .sidebar-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  height: 40px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px transparent;
  font-synthesis: none;
  transition:
    background-color var(--motion-hover) var(--ease-out),
    box-shadow var(--motion-hover) var(--ease-out),
    opacity var(--motion-hover) var(--ease-out);
}
.cb-docs .sidebar-nav-item[data-hover]:not([data-selected='true']) {
  background: color-mix(in srgb, var(--side-menu-well-active) 55%, var(--color-surface));
  transition-duration: var(--motion-hover-in), var(--motion-hover), var(--motion-hover);
}
.cb-docs .sidebar-nav-item[data-selected='true'] { background: var(--color-selected); }
.cb-docs .sidebar-nav-item[data-drop-active] {
  background: var(--color-selected);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}
.cb-docs .sidebar-nav-icon {
  --icon-wght: 500;
  flex-shrink: 0;
  width: 20px;
  font-size: 20px;
  line-height: 20px;
  color: var(--glyph-rest);
}
.cb-docs .sidebar-nav-item:is([data-selected='true'], [data-drop-active]) .sidebar-nav-icon {
  --icon-fill: 1;
  color: var(--color-ink);
}
.cb-docs .sidebar-nav-text {
  display: flex;
  align-items: baseline;
  column-gap: inherit;
  flex: 1 1 0;
  min-width: 0;
}
.cb-docs .sidebar-nav-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-docs .sidebar-nav-item[data-selected='true'] .sidebar-nav-label { font-weight: 500; }
.cb-docs .sidebar-nav-count {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-muted);
}
/* FOLDERS (SideMenu.css:106-130, eyebrow.css): 28 high, padding 0 2 0 12,
   the eyebrow 13/16 Medium muted, the New folder disc 28 with its 18
   glyph, no fill at rest. */
.cb-docs .side-menu-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 28px;
  padding: 0 2px 0 12px;
  color: var(--color-muted);
}
.cb-docs .eyebrow {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-docs .side-menu-group-add {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  color: var(--color-muted);
}
.cb-docs .side-menu-group-add .material-symbols-rounded { font-size: 18px; line-height: 1; }

/* The grid (tile.css:3-10): 119 cells, 16 apart. */
.cb-docs .documents-pane { flex: 1 1 0; min-width: 0; }
.cb-docs .tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 119px);
  gap: 16px;
  align-content: start;
}
/* A tile (tile.css:42-150): the 136 art plate (radius 12) over the label
   plate (padding 4 6, radius 10), 6 apart, clear at rest, --color-active
   under the pointer (in 100, out 140); the name 13/18 ink, two lines at
   most; the day 13/18 muted. The carried tile stays at 35%
   (DocumentsDrawer.css:251), over the tile's own 140 fade. */
.cb-docs .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 119px;
  transition: opacity var(--motion-hover) var(--ease-out);
}
.cb-docs .tile-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 119px;
  height: 136px;
  border-radius: 12px;
}
.cb-docs .tile-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 10px;
}
.cb-docs .tile-art,
.cb-docs .tile-labels { transition: background-color var(--motion-hover) var(--ease-out); }
.cb-docs .tile[data-hover] .tile-art,
.cb-docs .tile[data-hover] .tile-labels {
  background-color: var(--color-active);
  transition-duration: var(--motion-hover-in);
}
.cb-docs .documents-pane-list [data-drag-source='true'] { opacity: 0.35; }
.cb-docs .tile-name {
  display: block;
  width: 100%;
  max-height: 36px;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--color-ink);
}
.cb-docs .tile-line {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-muted);
}
/* The boards' page (previews.css:190-239): 75 x 104 on --color-page,
   radius 5, padding 8; eight 3-high lines in --color-active, 4 apart, a
   paragraph's ragged right; the kind's 12 badge muted, 6 in. */
.cb-docs .board-page {
  position: relative;
  box-sizing: border-box;
  width: 75px;
  height: 104px;
  padding: 8px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--color-page);
}
.cb-docs .board-page-lines { display: flex; flex-direction: column; gap: 4px; }
.cb-docs .board-page-line { height: 3px; border-radius: 100px; background: var(--color-active); }
.cb-docs .board-page-line:nth-child(4n + 2) { width: 85%; }
.cb-docs .board-page-line:nth-child(4n + 3) { width: 92%; }
.cb-docs .board-page-line:nth-child(4n) { width: 60%; }
.cb-docs .board-page-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--color-muted);
}

/* The ghost (well-drag.css, DocumentsDrawer.css:254-282): 36 high, radius
   10, padding 0 12, gap 10, --color-raised with the raise and the drag
   shadow, turned -2 degrees; the glyph 18 at 500, the name 14/18 ink. */
.cb-docs .documents-well-ghost {
  position: absolute;
  z-index: 20;
  display: none;
  pointer-events: none;
}
.cb-docs .documents-well-ghost[data-shown] { display: block; }
.cb-docs .well-ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background-color: var(--color-raised);
  background-image: var(--raise-shade);
  box-shadow:
    inset 0 1px 0 var(--raise-rim),
    0 6px 16px var(--shadow-drag);
  color: var(--color-ink);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.cb-docs .well-ghost > .material-symbols-rounded { --icon-wght: 500; font-size: 18px; line-height: 1; }
.cb-docs .well-ghost-name { font-size: 14px; line-height: 18px; }

/* ---------------------------------------------------------------- 3. focus
   A whole window (Stage.css), landscape (Pat 2026-11-09 02:24), the card
   563 x 358, the app inside it near its true size so the window reads as
   a window, not a zoom (Pat 05:08: "the UI shouldnt be so zoomed in"): a
   1280 x 815 window at 0.44 (the app opens at 1400 x 900), the window's 26
   corner.
   The writing ground is the stage's (the app's ground), the chrome at the
   25 corner inset (40 at the top), its rail every 55, the format pill
   centred in line with the top row, the handle bars 20 from the top and
   bottom edges, the block centred. */
.cb-focus {
  --chrome-hide: 0;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 815px;
  border-radius: 26px;
  translate: -50% -50%;
  scale: 0.44;
}
.cb-focus .cb-stage { position: absolute; inset: 0; background: var(--cb-ground); }
.cb-focus .cb-block { left: 320px; width: 640px; }
/* The pointer at 1.6 the window's own size: the window is shown at 0.44
   and a Mac arrow at true scale there would be lost. */
.cb-focus .cb-cursor { scale: 1.6; }

/* ChromeButton.css: the bare round 45 slot, the glyph muted, its own fades
   on --motion-hover; the raise on ::before and the bowl on ::after. */
.cb-focus .cb-chrome-btn {
  position: absolute;
  z-index: 1;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 45px;
  height: 45px;
  border-radius: 100px;
  background-color: transparent;
  box-shadow: none;
  color: var(--color-muted);
  opacity: 1;
  transition:
    background-color var(--motion-hover) var(--ease-out),
    box-shadow var(--motion-hover) var(--ease-out),
    color var(--motion-hover) var(--ease-out),
    opacity var(--motion-hover) var(--ease-out);
}
.cb-focus .stage-input-item > .cb-chrome-btn { position: relative; }
.cb-focus .cb-chrome-btn::before,
.cb-focus .cb-chrome-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.cb-focus .cb-chrome-btn::before {
  background-image: var(--raise-shade);
  transition: opacity var(--motion-hover) var(--ease-out);
}
.cb-focus .cb-chrome-btn::after {
  background-image: var(--bowl-shade);
  transition: opacity var(--motion-hover) var(--ease-out);
}
.cb-focus .cb-chrome-btn .material-symbols-rounded {
  --icon-fill: 1;
  font-size: 28px;
  line-height: 1;
}
/* Hover: the round raise on the hover fill, the glyph in ink (in 100). */
.cb-focus .cb-chrome-btn[data-hover]:not([data-pressed]) {
  color: var(--color-ink);
  background-color: var(--color-hover);
  box-shadow: inset 0 1px 0 var(--raise-rim);
  transition-duration: var(--motion-hover-in);
}
.cb-focus .cb-chrome-btn[data-hover]:not([data-pressed])::before {
  opacity: 1;
  transition-duration: var(--motion-hover-in);
}
/* Pressed: ink with the bowl, at once. */
.cb-focus .cb-chrome-btn[data-pressed] {
  color: var(--color-surface);
  background-color: var(--color-ink);
  box-shadow: none;
  transition-property: opacity;
}
.cb-focus .cb-chrome-btn[data-pressed]::before { opacity: 0; transition: none; }
.cb-focus .cb-chrome-btn[data-pressed]::after { opacity: 1; transition: none; }
/* One mass (Stage.css): each glyph's drawn size for one optical weight. */
.cb-focus .stage-power .material-symbols-rounded { font-size: calc(28px * 37 / 38); }
.cb-focus .stage-settings .material-symbols-rounded { font-size: calc(28px * 39 / 38); }
.cb-focus .stage-context .material-symbols-rounded { font-size: calc(28px * 40 / 38); }
.cb-focus .stage-folder .material-symbols-rounded { font-size: calc(28px * 35 / 38); }
.cb-focus .stage-profile .material-symbols-rounded { font-size: calc(28px * 35 / 38); }
.cb-focus .stage-hide .material-symbols-rounded { font-size: calc(28px * 42 / 38); }
.cb-focus .stage-input-methods .material-symbols-rounded { font-size: calc(28px * 39 / 38); }
/* The rail, top left (Stage.css:262-283), and the eye, bottom left; the
   input methods bottom right, the keyboard alone at rest (Stage.tsx:294). */
.cb-focus .stage-power { left: 25px; top: 40px; }
.cb-focus .stage-settings { left: 25px; top: 95px; }
.cb-focus .stage-context { left: 25px; top: 150px; }
.cb-focus .stage-folder { left: 25px; top: 205px; }
.cb-focus .stage-hide { left: 25px; bottom: 25px; }
/* Account above the eye (Stage.css:284-286, ProfileMenu.tsx: badge). */
.cb-focus .stage-profile { left: 25px; bottom: 80px; }
.cb-focus .stage-profile[hidden] { display: none; }
.cb-focus .stage-input-methods {
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 1;
  display: flex;
  align-items: center;
}
.cb-focus .stage-input-item { display: inline-flex; align-items: center; }

/* The format pill at rest (FormatPill.css): 48 high, padding 0 6, gap 8,
   the surface, centred 38.5 down (FormatPill.tsx:124); Body in a one-button
   capsule, then Link and Add, then the four marks, 30 discs in capsules
   (the drawer's .hb at rest, lab.css .p-drawer .hb). */
.cb-focus .format-pill {
  position: absolute;
  left: 50%;
  top: 38.5px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 100px;
  background: var(--color-surface);
  translate: -50% 0;
}
.cb-focus .hb {
  --hb-glyph: var(--color-ink);
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  border-radius: 100px;
  background-color: var(--color-active);
  color: var(--color-ink);
  font: 500 14px / 18px var(--font-sans);
  white-space: nowrap;
}
.cb-focus .hb > .material-symbols-rounded { font-size: 18px; color: var(--hb-glyph); }
.cb-focus .hb.format-pill-type {
  --hb-glyph: var(--color-muted);
  gap: 4px;
  padding: 0 10px 0 12px;
}
.cb-focus .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);
}
.cb-focus .hb-capsule .hb {
  --hb-glyph: var(--color-muted);
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  background-color: transparent;
}

/* The handles (Stage.css:450-520): a 46 x 5 bar, muted. A closed drawer's
   handle is placed inline at its edge plus the 8 gap (Stage.tsx:896, 933;
   panel-state.ts:42 PANEL_HANDLE_GAP_PX; the edge is 0 when closed), so the
   bar sits 20 from the edge (the button's 12 padding above or below it). */
.cb-focus .stage-handle {
  position: absolute;
  left: 50%;
  z-index: 3;
  display: flex;
  padding: 12px 20px;
  translate: -50% 0;
}
.cb-focus .stage-handle-documents { top: 8px; }
.cb-focus .stage-handle-moreinfo { bottom: 8px; }
.cb-focus .stage-handle-bar {
  width: 46px;
  height: 5px;
  border-radius: 100px;
  background: var(--color-muted);
  transition: opacity var(--motion-hover) var(--ease-out);
}

/* Focus mode (Stage.css:542-603, chrome-hidden.ts). Every affected layer
   fades on --chrome-hide, written each frame of the 240 ramp, with its own
   transitions off; the pill scales its resting opacity by it. The active
   block's wash goes at once. The survivors take their faded looks on their
   own 140 fades: the eye 30% (55% under the pointer), the active input 30%,
   the handle bars 8%. */
.cb-focus[data-chrome-hidden] [data-hide-affected='true'] {
  opacity: calc(1 - var(--chrome-hide, 1)) !important;
  transition: none !important;
}
.cb-focus[data-chrome-hidden] .cb-wash { background: transparent; }
.cb-focus[data-chrome-hidden] .stage-hide { opacity: 0.3; }
.cb-focus[data-chrome-hidden] .stage-hide[data-hover] { opacity: 0.55; }
.cb-focus[data-chrome-hidden] .stage-input-methods .cb-chrome-btn[data-active='true'] { opacity: 0.3; }
.cb-focus[data-chrome-hidden] .stage-handle-bar { opacity: 0.08; }
/* The spark surfaces carry the ramp themselves (BlockView's chromeHide):
   the wash's colours and the margin's marks fade on it; cards-b.js takes
   them away at its end and brings them back as it leaves 1. */
.cb-focus .cb-text .mk.washed {
  background-color: color-mix(in srgb, var(--mark) calc(100% - var(--chrome-hide) * 100%), transparent);
  border-bottom-color: color-mix(in srgb, var(--mark-edge) calc(100% - var(--chrome-hide) * 100%), transparent);
}
/* The ramp is the fade here: written each frame, so no transition. */
.cb-focus .cb-text .mk,
.cb-focus .cb-text .mk.washed { transition: none; }
.cb-focus .cb-rail { opacity: calc(1 - var(--chrome-hide)); }

@media (prefers-reduced-motion: reduce) {
  .cb .cb-caret.blink { animation: none; }
  .cb .cb-text .mk,
  .cb .cb-text .mk.washed { transition-duration: var(--motion-reduced); }
  .cb-docs .sidebar-nav-item,
  .cb-docs .tile,
  .cb-docs .tile-art,
  .cb-docs .tile-labels,
  .cb-focus .cb-chrome-btn,
  .cb-focus .stage-handle-bar { transition-duration: var(--motion-reduced); }
}