body {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
:root {
	--bg-color: #ffffff;
	--text-color: #000000;
	--header-border: #e5e5e5;
	--card-bg: #ffffff;
	--border-gray: #d4d4d4;
}
@media (prefers-color-scheme: dark) {
  :root {
	--bg-color: #1b1b1b;
	--text-color: rgba(255,255,255,0.8);
	--header-border: rgba(255,255,255,0.05);
	--card-bg: #2C2C2C;
	--border-gray: rgba(255,255,255,0.2);
  }
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Smooth nav transition between transparent and frosted state */
#main-nav {
  transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease, -webkit-backdrop-filter 200ms ease;
}

/* Transparent nav while at top of homepage hero.
   ID + class selector keeps specificity above any Tailwind utility (incl. dark variants). */
#main-nav.home-nav:not(.scrolled):not(.menu-open) {
  background-color: transparent;
  border-bottom-color: transparent;
  /* Safari paint fix: use blur(0) instead of `none` so the backdrop-filter
     compositing layer stays alive at scroll-top. With `none`, Safari tears
     down the layer and nav-link :hover paints have to wait on the still-
     animating hero behind, causing the hover pill to trail the cursor. The
     layer must already exist for hover paints to stay cheap on first load. */
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

/* While the mobile menu is open, match its solid background (no translucency, no blur). */
#main-nav.menu-open {
  background-color: #ffffff;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dark #main-nav.menu-open {
  background-color: #1b1b1b;
}

/* Mobile menu slide-down + fade animation.
   Default (closed) state shifts the sheet up slightly and fades it out.
   .is-open lands it in place. JS removes `hidden` first, then adds .is-open on
   the next frame so the transition fires; on close, .is-open is removed and
   `hidden` is restored after the transition completes. */
#mobile-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 250ms ease, transform 250ms ease;
}
#mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Pill bg for mobile menu links on hover and tap, matching the desktop nav
   treatment. Skipped on the active link (which already has a stronger pill).
   Hover scoped to (hover: hover) so it doesn't stick on touch devices. */
#mobile-menu a span {
  transition: background-color 150ms ease;
}
@media (hover: hover) {
  #mobile-menu a:not(.is-active):hover span {
    background-color: #fafafa;
  }
  .dark #mobile-menu a:not(.is-active):hover span {
    background-color: rgba(255, 255, 255, 0.05);
  }
}
#mobile-menu a:not(.is-active):active span {
  background-color: #f5f5f5;
}
.dark #mobile-menu a:not(.is-active):active span {
  background-color: rgba(255, 255, 255, 0.10);
}

/* When the nav is transparent over the homepage hero, the default hover tint
   (bg-gray-50 / white/5) is barely visible against the dot-grid + orbs and
   reads as laggy. Use a stronger, snappier hover bg in this state. */
#main-nav.home-nav:not(.scrolled):not(.menu-open) .nav-link {
  transition-duration: 100ms;
}
#main-nav.home-nav:not(.scrolled):not(.menu-open) .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.07);
}
.dark #main-nav.home-nav:not(.scrolled):not(.menu-open) .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Hero fade-in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.7s ease-out forwards;
}
.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.2s; }
.fade-in-up-3 { animation-delay: 0.4s; }
.fade-in-up-4 { animation-delay: 0.6s; }

/* Section/content backgrounds are flat solid colors — no gradient washes,
   no dot texture (`.dot-grid` is a no-op, kept on the homepage hero). The one
   exception is the text-only page heroes, which carry a very soft glow via
   `.hero-glow` (see that rule below). The old `.hero-orb` / `.cta-orb` divs
   are gone — page heroes now use `.hero-glow` + `.floating-icon` glyphs. */

/* Floating icons */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rotate)); }
  50% { transform: translateY(-8px) rotate(var(--rotate)); }
}
.floating-icon {
  position: absolute;
  opacity: 0.4;
  font-size: 40px;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}
.dark .floating-icon {
  opacity: 0.3;
}
/* Multicolor decorative glyphs — cycle the brand-tone palette (matches the
   Tailwind icon palette overridden in index.php; 500-level values). */
.floating-icon:nth-of-type(6n+1) { color: #1899F2; }
.floating-icon:nth-of-type(6n+2) { color: #FF3B47; }
.floating-icon:nth-of-type(6n+3) { color: #1AD24E; }
.floating-icon:nth-of-type(6n+4) { color: #FBB300; }
.floating-icon:nth-of-type(6n+5) { color: #0DC7C0; }
.floating-icon:nth-of-type(6n)   { color: #9A5BFF; }
.floating-icon:nth-child(odd) { animation-duration: 7s; }
.floating-icon:nth-child(3n) { animation-duration: 8s; }

/* Glyph glow */
.glyph-glow {
  filter: drop-shadow(0 0 28px rgba(0, 0, 0, 0.12));
}
.dark .glyph-glow {
  filter: drop-shadow(0 0 36px rgba(0, 0, 0, 0.45));
}

/* Headline color. (Formerly a purple gradient — neutralized to plain heading
   color for a classier, less attention-stealing look. Class name kept so the
   many `.gradient-text` spans across page heroes don't all need editing.) */
.gradient-text {
  color: #171717;
}
.dark .gradient-text {
  color: #ffffff;
}

/* Section heading */
.section-heading {
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Feature card hover */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}
.dark .feature-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Field type cards */
.field-type-card {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field-type-card:hover {
  border-color: rgba(0, 0, 0, 0.25);
}
.dark .field-type-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

/* Screenshot frame */
.screenshot-frame {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.04);
}
.dark .screenshot-frame {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Contact card hover */
.contact-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
}
.dark .contact-card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
}

/* CTA section — flat solid background (matches the alternate-section neutral),
   no gradient, no orbs. Visual interest comes from the multicolor cta-glyphs
   and the colorful bookend SVG. */
.cta-section {
  background: #fafafa;
}
.dark .cta-section {
  background: #212121;
}

/* CTA floating glyphs */
@keyframes cta-float {
  0%, 100% { transform: translateY(0) rotate(var(--rotate)); }
  50% { transform: translateY(-6px) rotate(var(--rotate)); }
}
.cta-glyph {
  position: absolute;
  opacity: 0.35;
  font-size: 32px;
  animation: cta-float 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.dark .cta-glyph {
  opacity: 0.28;
}
/* Multicolor decorative glyphs — cycle the brand-tone palette (500-level,
   matches the Tailwind icon palette overridden in index.php). */
.cta-glyph:nth-of-type(4n+1) { color: #1899F2; }
.cta-glyph:nth-of-type(4n+2) { color: #FF3B47; }
.cta-glyph:nth-of-type(4n+3) { color: #1AD24E; }
.cta-glyph:nth-of-type(4n)   { color: #FBB300; }
.cta-glyph:nth-child(odd) { animation-duration: 7s; }
.cta-glyph:nth-child(3n) { animation-duration: 8.5s; }

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-answer.open {
  max-height: 500px;
}
.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-chevron.open {
  transform: rotate(180deg);
}

/* Footer: tighten column gap on narrow mobile */
@media (max-width: 459px) {
  footer .grid.grid-cols-3 {
    gap: 1.25rem;
  }
}

/* ============================================================
   Device frames — pure-CSS mockups for screenshots.
   Rendered by nb_screenshot() in app/inc/screenshot.php.
   Each frame wraps a .device-screen that holds the dark/light
   <img> pair (or a placeholder until real screenshots exist).
   Three devices: iPhone 17 (portrait), iPad (landscape, ~1.45),
   MacBook Pro 14".
   ============================================================ */

.device {
  margin: 0 auto;
}

/* Shared screen area */
.device-screen {
  position: relative;
  overflow: hidden;
  background: #000;
}
.device-screen img {
  /* display is left to the Tailwind block/hidden/dark: classes on each <img>
     so the light/dark swap works — a `display: block` here would beat `.hidden`
     (specificity) and show both images at once. */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder shown until a real screenshot is dropped in */
.device-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6%;
  font-size: clamp(0.5rem, 2.4vw, 0.8rem);
  line-height: 1.35;
  color: #a3a3a3;
  background: rgba(0, 0, 0, 0.04);
}
.dark .device-placeholder {
  color: #737373;
  background: rgba(255, 255, 255, 0.04);
}

/* ----------------------------------------------------------------
   Bezel material — matte dark, modeled on phonegal.com's iPhone frame.
   A flat vertical gradient + soft layered drop shadow + hairline rim
   highlight, NOT the old chrome/metallic diagonal sheen. Shared by all
   three frames so iPhone, iPad and MacBook read as one device family.
   (Dark mode flips the gradient so the device stays visible against the
   #1b1b1b page instead of disappearing into it.)
   ---------------------------------------------------------------- */
.device-iphone .device-frame,
.device-ipad .device-frame,
.device-mac-lid {
  background: linear-gradient(180deg, #1d1d1f 0%, #2c2c2e 100%);
}
.dark .device-iphone .device-frame,
.dark .device-ipad .device-frame,
.dark .device-mac-lid {
  background: linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 100%);
}
/* Free-standing slabs (iPhone/iPad) cast the full drop shadow + rim. */
.device-iphone .device-frame,
.device-ipad .device-frame {
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 8px 20px -6px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
.dark .device-iphone .device-frame,
.dark .device-ipad .device-frame {
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 8px 20px -6px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 0.14);
}
/* MacBook lid carries the rim highlight only — the drop shadow sits on
   the base below it (otherwise it'd cast between lid and base). */
.device-mac-lid {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 0.10);
}
.dark .device-mac-lid {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 0.12);
}

/* ---------- iPhone 17 (portrait, 1206×2622) ---------- */
.device-iphone {
  width: 100%;
  max-width: 260px;
}
.device-iphone .device-frame {
  position: relative;
  padding: 3.1%;
  border-radius: 16% / 7.4%;
}
.device-iphone .device-screen {
  aspect-ratio: 1206 / 2622;
  border-radius: 12% / 5.4%;
}
/* Dynamic Island */
.device-iphone .device-screen::after {
  content: "";
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  aspect-ratio: 1 / 0.295;
  background: #000;
  border-radius: 999px;
  z-index: 3;
}

/* ---------- iPad (landscape, 2420×1668 — iPad Air/11" ~1.45) ----------
   Screen aspect is matched to the actual overview-ipad screenshots so
   object-fit: cover fills the frame edge-to-edge with no side cropping.
   (Was 4:3 / iPad Pro 13"; modern non-Pro iPads are ~1.45, not 4:3.) */
.device-ipad {
  width: 100%;
  max-width: 560px;
}
.device-ipad .device-frame {
  position: relative;
  padding: 2.1%;
  border-radius: 4.5% / 6%;
}
.device-ipad .device-screen {
  aspect-ratio: 2420 / 1668;
  border-radius: 1.8% / 2.6%;
}
/* Front camera, centered on the top long edge (in the bezel) */
.device-ipad .device-frame::after {
  content: "";
  position: absolute;
  top: 0.95%;
  left: 50%;
  transform: translateX(-50%);
  width: 0.8%;
  aspect-ratio: 1;
  background: #0a0a0b;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  z-index: 3;
}

/* ---------- MacBook Pro 14" (3024×1964) ---------- */
.device-mac {
  width: 100%;
  max-width: 620px;
}
.device-mac-lid {
  position: relative;
  padding: 1.2%;
  border-radius: 16px 16px 0 0;
}
.device-mac .device-screen {
  aspect-ratio: 3024 / 1964;
  border-radius: 4px;
}
/* Notch — continues the lid's top bezel into the screen */
.device-mac .device-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13.5%;
  aspect-ratio: 1 / 0.13;
  background: #1d1d1f;
  border-radius: 0 0 5px 5px;
  z-index: 3;
}
.dark .device-mac .device-screen::after {
  background: #2c2c2e;
}
/* Base / hinge bar, slightly wider than the lid — brushed aluminum */
.device-mac-base {
  position: relative;
  width: 108%;
  margin-left: -4%;
  height: 14px;
  background: linear-gradient(180deg, #cfcfd3 0%, #a8a8ad 100%);
  border-radius: 0 0 11px 11px;
  box-shadow: 0 16px 30px -8px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.dark .device-mac-base {
  background: linear-gradient(180deg, #3a3a3d 0%, #1f1f21 100%);
  box-shadow: 0 16px 30px -8px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Lid-open indent at the bottom center */
.device-mac-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 42%;
  background: #aeaeb3;
  border-radius: 0 0 7px 7px;
}
.dark .device-mac-base::after {
  background: #2a2a2c;
}

/* ---------- Frameless: raw screenshot, no shadow/border/fill ----------
   The screenshot's own background blends straight into the page (e.g. a
   Spotlight panel sitting on the dark desktop). No card chrome. The empty
   placeholder still gets a faint fill via .device-placeholder. */
.device-none {
  width: 100%;
}
.device-none .device-screen {
  aspect-ratio: 16 / 10; /* placeholder box */
  background: transparent;
}
/* With a real screenshot: show it at its own (cropped) aspect, no crop. */
.device-none.has-shot .device-screen {
  aspect-ratio: auto;
}
.device-none.has-shot .device-screen img {
  height: auto;
  object-fit: contain;
}

/* ---------- Frameless looping video (nb_video) ----------
   Animated app walkthrough shown raw — no shadow/border/fill — so it
   blends into the page like a frameless screenshot. Display is left to
   the block/dark:block swap classes (a `display` here would beat
   `.hidden` and show both theme variants at once). */
.nb-video {
  width: 100%;
  height: auto;
}
.nb-video-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6%;
  color: #a3a3a3;
  font-size: clamp(0.7rem, 2vw, 0.95rem);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}
.dark .nb-video-placeholder {
  color: #737373;
  background: rgba(255, 255, 255, 0.04);
}

/* ---------- Duo: iPad with an iPhone overlapping in front ----------
   Homepage "Works on every device you own." section. The iPad is the base
   (in normal flow, defining the height); the iPhone is absolutely positioned
   in front, to the right, slightly taller so it overhangs above and below. */
.device-duo {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding-bottom: 3.5%; /* room for the iPhone's bottom overhang */
}
.device-duo .device-ipad {
  width: 76%;
  margin: 0;
  max-width: none;
}
.device-duo .device-iphone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 29%;
  margin: 0;
  max-width: none;
  z-index: 2;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.22));
}
.dark .device-duo .device-iphone {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
}

/* ------------------------------------------------------------------
   Slideshow (nb_slideshow) — frameless crossfade carousel + dots.
   Slides are stacked in one grid cell and crossfaded by opacity, so
   the box sizes to the (equal-sized) screenshots and there is no
   layout jump. No card chrome — transparent screenshots blend in.
   Behavior (auto-rotate, dot clicks, pause-on-hover) is in
   app/js/slideshow.js.
   ------------------------------------------------------------------ */
.nb-slideshow {
  /* sizing classes (w-full max-w-…) come from the helper */
}
.nb-slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* don't let a min-width:750 mock slide blow out the track on mobile */
  align-items: center;
}
.nb-slide {
  grid-area: 1 / 1; /* stack every slide in the same cell */
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.nb-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.nb-slide img {
  width: 100%;
  height: auto;
  /* display is governed by the block/dark:block swap classes */
}

.nb-dots {
  display: flex;
  justify-content: center;
  gap: 0; /* spacing comes from each dot's padding (bigger tap target) */
  margin-top: 1.1rem;
}
/* The button is a generous transparent hit area around the visible bar. */
.nb-dot {
  display: inline-flex;
  align-items: center;
  padding: 8px 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The visible pill: a circle when inactive, an elongated track when active. */
.nb-dot-bar {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: width 0.3s ease, background-color 0.25s ease;
}
.dark .nb-dot-bar {
  background: rgba(255, 255, 255, 0.22);
}
.nb-dot:hover .nb-dot-bar {
  background: rgba(0, 0, 0, 0.3);
}
.dark .nb-dot:hover .nb-dot-bar {
  background: rgba(255, 255, 255, 0.4);
}
.nb-dot.is-active .nb-dot-bar {
  width: 32px;
}
/* The progress fill — JS animates its width 0→100% over the slide interval. */
.nb-dot-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #171717;
}
.dark .nb-dot-fill {
  background: #ffffff;
}

/* ------------------------------------------------------------------
   Lightbox (nb-zoomable / lightbox.js) — click a screenshot to zoom
   it into a fullscreen overlay. Opt-in per image via the .nb-zoomable
   class (helpers add it, e.g. nb_slideshow [..., 'lightbox' => true]).
   ------------------------------------------------------------------ */
.nb-zoomable {
  cursor: pointer;
}
.nb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100; /* above the nav (z-50) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.nb-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.nb-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------
   API code card (Features "Connect with anything" slot).
   A live HTML "terminal" card — crisp at any size, theme-independent
   (dark in both modes, like a real code block), no screenshot needed.
   Token colors use the multicolor on-page icon palette.
   ------------------------------------------------------------------ */
.nb-code-card {
  width: 100%;
  border-radius: 14px;
  background: #1b1d23;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5),
              0 8px 18px -10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.nb-code-card__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #15171c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nb-code-card__dot { width: 11px; height: 11px; border-radius: 50%; }
.nb-code-card__dot--r { background: #ff5f57; }
.nb-code-card__dot--y { background: #febc2e; }
.nb-code-card__dot--g { background: #28c840; }
.nb-code-card__label {
  margin-left: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.4);
}
.nb-code-card__body {
  margin: 0;
  padding: 18px 20px;
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nb-code-card__body code { font: inherit; }
.nb-code-card .tok-comment { color: #6b7280; }
.nb-code-card .tok-prompt  { color: #6b7280; }
.nb-code-card .tok-cmd     { color: #e5e7eb; }
.nb-code-card .tok-flag    { color: #1CD8E8; }
.nb-code-card .tok-url     { color: #1AD24E; }
.nb-code-card .tok-key     { color: #1899F2; }
.nb-code-card .tok-str     { color: #1AD24E; }
.nb-code-card .tok-num     { color: #FBB300; }
.nb-code-card .tok-bool    { color: #9A5BFF; }
.nb-code-card .tok-punc    { color: rgba(255, 255, 255, 0.45); }

/* ------------------------------------------------------------------
   Web-form mockup (Features "Collect data from anyone" slot).
   Pixel-matched to the REAL cloud.neatbase.com web form in its COMPACT
   layout at narrow (<600px) widths — exactly the width this mockup
   renders at (a ~448px half-column / full mobile). Specs mirror
   `cloud_neatbase_app/assets/css/form.css` `.form-card--compact` plus
   its `@media (max-width:600px)` overrides: header divider line, 36px
   logo, 18/18/16 header padding, 16/18/18 body padding, 1px #d5d5d5
   inputs, tag pills, 44×26 iOS-green toggle (switch-left), pill submit.
   Accent = #0088ff (matches the logo PNG) standing in for a published form's
   custom button color (the real default is Apple #007aff); toggle-on
   is iOS green #34c759 exactly like the real form.
   ------------------------------------------------------------------ */
.nb-form-mock {
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.dark .nb-form-mock {
  background: #212121;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* header — compact row (logo + title/subtitle) with the divider line under it */
.nb-form-mock__head {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .nb-form-mock__head { border-bottom-color: rgba(255, 255, 255, 0.08); }
.nb-form-mock__logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.nb-form-mock__headtext { flex: 1; min-width: 0; }
.nb-form-mock__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #111;
}
.dark .nb-form-mock__title { color: #f5f5f5; }
.nb-form-mock__sub {
  margin-top: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .nb-form-mock__sub { color: #aaa; }
/* body */
.nb-form-mock__body { padding: 16px 18px 18px; }
.nb-form-mock__field { margin-bottom: 14px; }
.nb-form-mock__field label {
  display: block;
  font-size: 0.813rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.dark .nb-form-mock__field label { color: #e5e5e5; }
.nb-form-mock__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.938rem;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
}
.dark .nb-form-mock__input {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e5e5e5;
}
/* tags */
.nb-form-mock__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-form-mock__tag {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.813rem;
  border: 1px solid #d5d5d5;
  border-radius: 980px;
  color: #555;
  background: #fff;
}
.dark .nb-form-mock__tag {
  border-color: rgba(255, 255, 255, 0.12);
  color: #888;
  background: rgba(255, 255, 255, 0.05);
}
.nb-form-mock__tag.is-on {
  background: #0088ff;
  border-color: #0088ff;
  color: #fff;
}
/* toggle — switch on the LEFT, then label (matches the real .toggle-label) */
.nb-form-mock__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.813rem;
  font-weight: 500;
  color: #1a1a1a;
}
.dark .nb-form-mock__toggle { color: #e5e5e5; }
.nb-form-mock__switch {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 26px;
  background: #34c759;
  flex-shrink: 0;
}
.nb-form-mock__switch::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transform: translateX(18px);
}
/* submit */
.nb-form-mock__submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #0088ff;
  border-radius: 980px;
}

/* ------------------------------------------------------------------
   Sharing mockup (Features "Share and collaborate, securely" slot).
   Copies the app's Share sheet: a notebook header card (icon, title,
   "Shared · N notes", collaborator avatar stack) + a "Participants"
   list card — each row = avatar + name, with an "Owner" badge on the
   owner and a × remove control on everyone else. Theme-aware; avatar
   colors match the reference screenshot.
   ------------------------------------------------------------------ */
/* outer panel — darker than the cards, like the app's Share sheet
   (#1b1b1b dark / #f5f5f5 light); holds the header card + Participants card */
.nb-collab {
  border-radius: 20px;
  background: #f5f5f5;
  padding: 12px 12px 14px;
}
.dark .nb-collab { background: #1b1b1b; }

/* inner cards (header + participants) — elevated above the panel */
.nb-collab__card {
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #ececec;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dark .nb-collab__card {
  background: #242426;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* notebook header card */
.nb-collab__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.nb-collab__nbicon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #ff3b7e;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nb-collab__nbicon i { color: #fff; font-size: 21px; }
.nb-collab__nbtext { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.nb-collab__title { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; color: #171717; }
.dark .nb-collab__title { color: #fff; }
.nb-collab__meta { font-size: 0.75rem; color: #9a9a9a; margin-top: 1px; }

/* avatar base + per-person colors (matched to the screenshot) */
.nb-collab__av {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0;
}
.nb-collab__av.av-sf   { background: #2FB5A4; }
.nb-collab__av.av-ac   { background: #E8922E; }
.nb-collab__av.av-jp   { background: #E6BE3A; }
.nb-collab__av.av-ps   { background: #32B58C; }
.nb-collab__av.av-sr   { background: #3B82F6; }
.nb-collab__av.av-more { background: #6B6B70; }

/* header avatar stack — small, overlapping, ringed */
.nb-collab__avatars { display: flex; align-items: center; flex-shrink: 0; }
.nb-collab__avatars .nb-collab__av { width: 30px; height: 30px; font-size: 0.625rem; border: 2px solid #fff; }
.dark .nb-collab__avatars .nb-collab__av { border-color: #242426; }
.nb-collab__avatars .nb-collab__av + .nb-collab__av { margin-left: -9px; }

/* "Participants" section label — sits on the panel, between the two cards */
.nb-collab__plabel {
  font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em;
  color: #171717; margin: 16px 0 8px; padding-left: 4px;
}
.dark .nb-collab__plabel { color: #fff; }

/* participants list card */
.nb-collab__plist { padding: 4px 16px; }

/* participant rows — hairline divider only between consecutive rows */
.nb-collab__prow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.nb-collab__prow + .nb-collab__prow { border-top: 1px solid #f0f0f0; }
.dark .nb-collab__prow + .nb-collab__prow { border-top-color: rgba(255, 255, 255, 0.07); }
.nb-collab__prow .nb-collab__av { width: 24px; height: 24px; font-size: 0.5625rem; }
.nb-collab__pname { min-width: 0; font-size: 0.8125rem; font-weight: 500; color: #171717; }
.dark .nb-collab__pname { color: #f0f0f0; }

/* owner badge — sits just to the right of the name (NOT the card edge) */
.nb-collab__owner {
  font-size: 0.625rem; font-weight: 600;
  padding: 2px 9px; border-radius: 980px;
  color: #2563eb; background: rgba(59, 130, 246, 0.12);
}
.dark .nb-collab__owner { color: #5AA0FF; background: rgba(90, 160, 255, 0.16); }

/* × remove control — pushed to the far right edge of the row */
.nb-collab__remove {
  margin-left: auto;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.05); flex-shrink: 0;
}
.dark .nb-collab__remove { background: rgba(255, 255, 255, 0.08); }
.nb-collab__remove i { font-size: 14px; color: #9a9a9a; }
.dark .nb-collab__remove i { color: #8a8a8a; }

/* ------------------------------------------------------------------
   Notification mockup (Features "Never miss a date"). Live HTML
   recreation of macOS notifications: a clean stack of standalone
   notification cards, each = app icon + title + body line + timestamp
   (no "Neatbase" group header — the cards name themselves). Theme-aware
   cards; the app icons are real PNGs (img/app-icon-{neatbase,photos}.png)
   shown the SAME in both modes — real macOS app icons are fixed assets
   that don't adapt to dark mode (the card behind them changes, not the
   icon). Matched to the reference screenshots: floating cards (no panel),
   elevated in both themes.
   ------------------------------------------------------------------ */
.nb-notify { display: flex; flex-direction: column; gap: 10px; }

/* notification card — floating, elevated in both themes */
.nb-notify__card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.dark .nb-notify__card {
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* app icon — real PNG; NO `display` here (swap classes govern it) */
.nb-notify__icon {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover;
}

.nb-notify__body { flex: 1; min-width: 0; }
.nb-notify__toprow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.nb-notify__app {
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em;
  color: #171717; min-width: 0; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .nb-notify__app { color: #ffffff; }
.nb-notify__time { font-size: 0.75rem; color: #8a8a8a; flex-shrink: 0; }
.dark .nb-notify__time { color: #8e8e8e; }
.nb-notify__text {
  font-size: 0.8125rem; color: #1f1f1f; margin-top: 0; line-height: 1.25;
}
.dark .nb-notify__text { color: #e5e5e5; }

/* ------------------------------------------------------------------
   Home-screen widget mockup (Features "Your notes, on your home
   screen"). Live HTML recreation of the iOS large widget: a rounded
   panel (subtle gradient + hairline + soft shadow) listing recent
   notes — each row = colored notebook icon + bold note title + gray
   "{Notebook} · {time} ago", with hairline dividers inset to align
   with the text. Icon colors mirror the real notebook accents (Apple
   system hues) — this is a faithful imitation, like .nb-collab's real
   avatar colors. Theme-aware. Matched to the reference screenshots.
   ------------------------------------------------------------------ */
.nb-widget {
  border-radius: 28px;
  padding: 6px 0;
  background: linear-gradient(180deg, #f4f4f5, #e9e9eb);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}
.dark .nb-widget {
  background: linear-gradient(180deg, #2c2c2e, #1d1d1f);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.nb-widget__row { display: flex; align-items: center; gap: 15px; padding: 0 18px; }
.nb-widget__icon {
  width: 30px; flex-shrink: 0; text-align: center;
  font-size: 29px; line-height: 1;
}
/* per-notebook accents (real app hues) */
.nb-widget__icon--recipe  { color: #34C759; }
.dark .nb-widget__icon--recipe  { color: #30D158; }
.nb-widget__icon--client  { color: #007AFF; }
.dark .nb-widget__icon--client  { color: #0A84FF; }
.nb-widget__icon--event   { color: #AF52DE; }
.dark .nb-widget__icon--event   { color: #BF5AF2; }
.nb-widget__icon--content { color: #FF3B30; }
.dark .nb-widget__icon--content { color: #FF453A; }

/* text column — carries the inset hairline divider (border-top) */
.nb-widget__body { flex: 1; min-width: 0; padding: 14px 0; }
.nb-widget__row + .nb-widget__row .nb-widget__body {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .nb-widget__row + .nb-widget__row .nb-widget__body {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.nb-widget__title {
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  color: #171717; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .nb-widget__title { color: #ffffff; }
.nb-widget__sub {
  font-size: 0.8125rem; color: #8a8a8a; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .nb-widget__sub { color: #8e8e8e; }

/* ------------------------------------------------------------------
   Spotlight mockup (Features "Find anything with Spotlight"). Live
   HTML recreation of the macOS Spotlight (Cmd+Space) panel: a search
   field (magnifier + query) + hairline + two category tabs (Photos,
   Neatbase) + a results list — a Neatbase note as the highlighted TOP
   HIT (icon + bold title + field-value subtitle), a Photos "3 Results"
   row with thumbnails, then Search iCloud Drive / Finder / Web / Ask
   Siri. App icons are real PNGs (Neatbase, Photos, iCloud, Finder,
   Safari, Siri) — DON'T set `display` on .nb-spotlight__icon (swap-bug
   class). Theme-aware (frosted light / frosted near-black dark). Matched
   to the reference screenshots img/feature-spotlight-{light,dark}.png.
   ------------------------------------------------------------------ */
.nb-spotlight {
  border-radius: 22px; overflow: hidden;
  background: #f5f5f6;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}
.dark .nb-spotlight {
  background: #161618;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6);
}

/* search field */
.nb-spotlight__search { display: flex; align-items: center; gap: 14px; padding: 15px 16px; }
.nb-spotlight__search i { font-size: 23px; color: #8a8a8a; flex-shrink: 0; }
.dark .nb-spotlight__search i { color: #98989d; }
.nb-spotlight__query {
  font-size: 1.4375rem; font-weight: 400; letter-spacing: -0.01em;
  color: #1c1c1e; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .nb-spotlight__query { color: #f5f5f5; }
/* "— Open" action hint pill (sits snug against the query) */
.nb-spotlight__open {
  flex-shrink: 0; white-space: nowrap; margin-left: -14px;
  font-size: 0.9375rem; color: #8a8a8a;
  background: rgba(0, 0, 0, 0.06); border-radius: 9px; padding: 3px 10px;
}
.dark .nb-spotlight__open { color: #98989d; background: rgba(255, 255, 255, 0.10); }
/* selected app's icon, pinned to the right of the search field */
.nb-spotlight__searchicon {
  width: 32px; height: 32px; border-radius: 8px;
  margin-left: auto; flex-shrink: 0;
}

/* hairline under the search field — inset, not edge-to-edge */
.nb-spotlight__divider { height: 1px; margin: 0 16px; background: rgba(0, 0, 0, 0.10); }
.dark .nb-spotlight__divider { background: rgba(255, 255, 255, 0.12); }

/* category tabs — short, borderless (soft elevation light / flat fill dark) */
.nb-spotlight__tabs { display: flex; gap: 12px; padding: 9px 16px 11px; }
.nb-spotlight__tab {
  flex: 1; text-align: center; padding: 5px 0; border-radius: 10px;
  font-size: 0.8125rem; color: #4a4a4a;
  background: #ffffff; box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.12);
}
.dark .nb-spotlight__tab {
  color: #e5e5e5; background: rgba(255, 255, 255, 0.07); box-shadow: none;
}

/* results list */
.nb-spotlight__list { padding: 2px 8px 10px; }
.nb-spotlight__row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px; border-radius: 15px;
}
/* selection highlight on the top hit — dark only (matches the references;
   the real light-mode capture shows no highlight on the selected row) */
.dark .nb-spotlight__row--tophit { background: rgba(255, 255, 255, 0.09); }
.nb-spotlight__icon { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.nb-spotlight__rtext { flex: 1; min-width: 0; }
.nb-spotlight__rtitle {
  font-size: 1.0625rem; color: #1c1c1e; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .nb-spotlight__rtitle { color: #ffffff; }
.nb-spotlight__row--tophit .nb-spotlight__rtitle { font-weight: 600; }
.nb-spotlight__rsub {
  font-size: 0.8125rem; color: #8a8a8a; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .nb-spotlight__rsub { color: #98989d; }

/* photos thumbnails (right of the Photos row) */
.nb-spotlight__thumbs { display: flex; gap: 4px; flex-shrink: 0; margin-left: 12px; }
.nb-spotlight__thumb {
  width: 38px; height: 38px; border-radius: 6px; object-fit: cover;
  background: linear-gradient(135deg, #d6d6d6, #c0c0c0);
}
.dark .nb-spotlight__thumb { background: linear-gradient(135deg, #3a3a3c, #29292b); }

/* ------------------------------------------------------------------
   Section divider (Mimestream-style). A SHORT, thick, centered bar —
   a deliberate "chapter break" marker, NOT a full-width hairline. Used
   SPARINGLY (at most one per page, at a major thematic boundary) — see
   the placement guideline in CLAUDE.md → Layout Conventions.
   ------------------------------------------------------------------ */
.section-divider {
  width: 40px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.13);
}
.dark .section-divider {
  background: rgba(255, 255, 255, 0.16);
}

/* ------------------------------------------------------------------
   Custom-fields mockup (home "Define your fields. Organize anything.").
   Live HTML recreation of the app's note-detail field stack, same
   quality/realism as the form + sharing mockups. Each field is a card
   (primary.opacity(0.06), 10px radius) with a tertiary type icon +
   uppercase secondary label + ellipsis menu, then its value. Accent =
   Apple UI blue #0088ff (selected tag, action button, toggle-on);
   rating stars are yellow. Theme-aware.
   ------------------------------------------------------------------ */
.nb-fields {
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.dark .nb-fields { background: #212121; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.06); }

/* field card */
.nb-fields__field { background: rgba(0, 0, 0, 0.05); border-radius: 10px; padding: 12px 14px; }
.dark .nb-fields__field { background: rgba(255, 255, 255, 0.06); }

/* label row: type icon + uppercase label + ellipsis menu */
.nb-fields__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(60, 60, 67, 0.6);
}
.dark .nb-fields__label { color: rgba(235, 235, 245, 0.6); }
.nb-fields__label > i:first-child { font-size: 13px; color: rgba(60, 60, 67, 0.32); }
.dark .nb-fields__label > i:first-child { color: rgba(235, 235, 245, 0.3); }
.nb-fields__more { margin-left: auto; font-size: 16px; color: #1a1a1a; }
.dark .nb-fields__more { color: #ffffff; }

/* value */
.nb-fields__value { margin-top: 7px; font-size: 0.9375rem; color: #1a1a1a; }
.dark .nb-fields__value { color: #f0f0f0; }

/* tags */
.nb-fields__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nb-fields__tag { font-size: 0.8125rem; padding: 4px 12px; border-radius: 980px; background: rgba(0, 0, 0, 0.05); color: #555; }
.dark .nb-fields__tag { background: rgba(255, 255, 255, 0.07); color: #aaa; }
.nb-fields__tag.is-on { background: rgba(0, 136, 255, 0.16); color: #0077e6; }
.dark .nb-fields__tag.is-on { background: rgba(0, 136, 255, 0.22); color: #4da8ff; }

/* rating */
.nb-fields__stars { display: flex; gap: 3px; margin-top: 7px; }
.nb-fields__star { font-size: 18px; color: rgba(0, 0, 0, 0.18); }
.dark .nb-fields__star { color: rgba(255, 255, 255, 0.22); }
.nb-fields__star.on { color: #fbbf24; }

/* email value + action button */
.nb-fields__valuerow { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.nb-fields__valuerow .nb-fields__value { margin-top: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-fields__action {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 136, 255, 0.12); color: #0088ff;
}
.dark .nb-fields__action { background: rgba(0, 136, 255, 0.2); color: #4da8ff; }
.nb-fields__action i { font-size: 17px; }

/* toggle — Apple blue (#0088ff) accent, on */
.nb-fields__switch { position: relative; width: 46px; height: 28px; border-radius: 28px; background: #0088ff; margin-top: 8px; }
.nb-fields__switch::before {
  content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px; transform: translateX(18px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------------
   Hero decoration for text-only page heroes (features, releases, …).
   A very soft brand-blue glow behind the heading + the scattered
   `.floating-icon` notebook glyphs (same as the homepage hero). This
   is a deliberate, SOFT exception to the "flat backgrounds" rule —
   kept faint so it reads as depth, not a heavy gradient wash.
   ------------------------------------------------------------------ */
.hero-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 80% at 50% 0%, rgba(0, 158, 255, 0.07), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.dark .hero-glow::before {
  background: radial-gradient(70% 80% at 50% 0%, rgba(0, 158, 255, 0.11), transparent 72%);
}

/* ------------------------------------------------------------------
   In-content text links (marketing pages) — Apple UI blue, matching the
   docs prose links. Soft blue underline that strengthens on hover.
   Nav, footer, and buttons/CTAs stay neutral — only inline body links.
   ------------------------------------------------------------------ */
.content-link {
  color: #0088ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 136, 255, 0.4);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.content-link:hover { text-decoration-color: #0088ff; }
.dark .content-link { color: #4da8ff; text-decoration-color: rgba(77, 168, 255, 0.4); }
.dark .content-link:hover { text-decoration-color: #4da8ff; }

/* ==================================================================
   Live app-UI mockup — Table view (.nb-tv). Pixel-faithful recreation
   of the macOS Table view, built at a fixed 750px design width and
   scaled to fit via .nb-fit + app/js/scale-fit.js. SF Symbol icons are
   tintable masks (.nb-sf / .nb-sf-*) rendered from the system. See
   CLAUDE.md "Live app-UI mockups (the .nb-tv standard)".
   Used: homepage hero + Features "Two ways to see your data" slideshow.
   ================================================================== */

/* scaler — holds the float shadow + rounding so the scaled inner can be
   clipped without cutting them; scale-fit.js sets height to scaled height */
.nb-fit { width:100%; margin:0 auto; overflow:hidden; border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.06); }
.dark .nb-fit { box-shadow:0 22px 60px rgba(0,0,0,.6); }
.nb-fit > .nb-tv, .nb-fit > .nb-nv, .nb-fit > .nb-cv, .nb-fit > .nb-fp, .nb-fit > .nb-nd { transform-origin:top left; }
/* slideshow: lock both slides to the same height (the Table view's natural
   height) so crossfading slides don't change the section height; .nb-fit
   clips the overflow (the Notes sidebar runs longer). */
.nb-fit--slide > .nb-tv, .nb-fit--slide > .nb-nv { height:622px; }

/* SF Symbol — tintable mask (currentColor); URLs CSS-relative (resolve on any page) */
.nb-sf { display:inline-block; background:currentColor; flex-shrink:0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.nb-sf-sidebar-left{-webkit-mask-image:url(../../img/sf/sidebar-left.png);mask-image:url(../../img/sf/sidebar-left.png)}
.nb-sf-book-badge-plus{-webkit-mask-image:url(../../img/sf/book-badge-plus.png);mask-image:url(../../img/sf/book-badge-plus.png)}
.nb-sf-rectangle-grid-1x2{-webkit-mask-image:url(../../img/sf/rectangle-grid-1x2.png);mask-image:url(../../img/sf/rectangle-grid-1x2.png)}
.nb-sf-tablecells{-webkit-mask-image:url(../../img/sf/tablecells.png);mask-image:url(../../img/sf/tablecells.png)}
.nb-sf-square-and-pencil{-webkit-mask-image:url(../../img/sf/square-and-pencil.png);mask-image:url(../../img/sf/square-and-pencil.png)}
.nb-sf-ellipsis{-webkit-mask-image:url(../../img/sf/ellipsis.png);mask-image:url(../../img/sf/ellipsis.png)}
.nb-sf-magnifyingglass{-webkit-mask-image:url(../../img/sf/magnifyingglass.png);mask-image:url(../../img/sf/magnifyingglass.png)}
.nb-sf-line-3-horizontal-decrease-circle{-webkit-mask-image:url(../../img/sf/line-3-horizontal-decrease-circle.png);mask-image:url(../../img/sf/line-3-horizontal-decrease-circle.png)}
.nb-sf-equal-square{-webkit-mask-image:url(../../img/sf/equal-square.png);mask-image:url(../../img/sf/equal-square.png)}
.nb-sf-arrow-up-and-down-text-horizontal{-webkit-mask-image:url(../../img/sf/arrow-up-and-down-text-horizontal.png);mask-image:url(../../img/sf/arrow-up-and-down-text-horizontal.png)}
.nb-sf-rectangle-split-3x1{-webkit-mask-image:url(../../img/sf/rectangle-split-3x1.png);mask-image:url(../../img/sf/rectangle-split-3x1.png)}
.nb-sf-chevron-down{-webkit-mask-image:url(../../img/sf/chevron-down.png);mask-image:url(../../img/sf/chevron-down.png)}
.nb-sf-textformat{-webkit-mask-image:url(../../img/sf/textformat.png);mask-image:url(../../img/sf/textformat.png)}
.nb-sf-tag{-webkit-mask-image:url(../../img/sf/tag.png);mask-image:url(../../img/sf/tag.png)}
.nb-sf-chart-bar-fill{-webkit-mask-image:url(../../img/sf/chart-bar-fill.png);mask-image:url(../../img/sf/chart-bar-fill.png)}
.nb-sf-calendar{-webkit-mask-image:url(../../img/sf/calendar.png);mask-image:url(../../img/sf/calendar.png)}
.nb-sf-number{-webkit-mask-image:url(../../img/sf/number.png);mask-image:url(../../img/sf/number.png)}
.nb-sf-checkmark-circle{-webkit-mask-image:url(../../img/sf/checkmark-circle.png);mask-image:url(../../img/sf/checkmark-circle.png)}
.nb-sf-arrow-up-arrow-down{-webkit-mask-image:url(../../img/sf/arrow-up-arrow-down.png);mask-image:url(../../img/sf/arrow-up-arrow-down.png)}
.nb-sf-pencil{-webkit-mask-image:url(../../img/sf/pencil.png);mask-image:url(../../img/sf/pencil.png)}
.nb-sf-person-crop-circle{-webkit-mask-image:url(../../img/sf/person-crop-circle.png);mask-image:url(../../img/sf/person-crop-circle.png)}
.nb-sf-star{-webkit-mask-image:url(../../img/sf/star.png);mask-image:url(../../img/sf/star.png)}
.nb-sf-star-fill{-webkit-mask-image:url(../../img/sf/star-fill.png);mask-image:url(../../img/sf/star-fill.png)}
.nb-sf-dollarsign-circle{-webkit-mask-image:url(../../img/sf/dollarsign-circle.png);mask-image:url(../../img/sf/dollarsign-circle.png)}
.nb-sf-book-closed-fill{-webkit-mask-image:url(../../img/sf/book-closed-fill.png);mask-image:url(../../img/sf/book-closed-fill.png)}
.nb-sf-creditcard-fill{-webkit-mask-image:url(../../img/sf/creditcard-fill.png);mask-image:url(../../img/sf/creditcard-fill.png)}
.nb-sf-ticket-fill{-webkit-mask-image:url(../../img/sf/ticket-fill.png);mask-image:url(../../img/sf/ticket-fill.png)}
.nb-sf-shippingbox-fill{-webkit-mask-image:url(../../img/sf/shippingbox-fill.png);mask-image:url(../../img/sf/shippingbox-fill.png)}
.nb-sf-person-2-fill{-webkit-mask-image:url(../../img/sf/person-2-fill.png);mask-image:url(../../img/sf/person-2-fill.png)}
.nb-sf-text-alignleft{-webkit-mask-image:url(../../img/sf/text-alignleft.png);mask-image:url(../../img/sf/text-alignleft.png)}
.nb-sf-eye-slash{-webkit-mask-image:url(../../img/sf/eye-slash.png);mask-image:url(../../img/sf/eye-slash.png)}
.nb-sf-envelope{-webkit-mask-image:url(../../img/sf/envelope.png);mask-image:url(../../img/sf/envelope.png)}
.nb-sf-phone{-webkit-mask-image:url(../../img/sf/phone.png);mask-image:url(../../img/sf/phone.png)}
.nb-sf-link{-webkit-mask-image:url(../../img/sf/link.png);mask-image:url(../../img/sf/link.png)}
.nb-sf-function{-webkit-mask-image:url(../../img/sf/function.png);mask-image:url(../../img/sf/function.png)}
.nb-sf-chevron-left{-webkit-mask-image:url(../../img/sf/chevron-left.png);mask-image:url(../../img/sf/chevron-left.png)}

/* table window — fluid: fills its container, scaling COLUMNS proportionally
   (font/row-height stay fixed); never narrower than the 750 design width
   (below that, scale-fit.js transform-scales the whole thing down) */
.nb-tv, .nb-nv, .nb-cv { width:100%; min-width:750px; background:#ffffff; color:#1c1c1e; font-size:11px; line-height:1.2; text-align:left; }
.dark .nb-tv, .dark .nb-nv, .dark .nb-cv { background:#1b1b1b; color:#fff; }

/* chrome / titlebar */
.nb-tv__chrome { position:relative; display:flex; align-items:center; gap:10px; padding:0 13px; height:42px; background:#f0f0f0; }
.dark .nb-tv__chrome { background:#2a2a2c; }
.nb-tv__lights { display:flex; gap:8px; }
.nb-tv__lights i { width:11px; height:11px; border-radius:50%; display:block; }
.nb-tv__lights .r{background:#ff5f57} .nb-tv__lights .y{background:#febc2e} .nb-tv__lights .g{background:#28c840}
.nb-tv__title { font-weight:600; font-size:12.5px; }

/* Liquid Glass toolbar capsules */
.nb-tv__glass { background:rgba(255,255,255,.6); border:.5px solid rgba(0,0,0,.05);
  box-shadow:0 .5px 1.5px rgba(0,0,0,.1), inset 0 .5px 0 rgba(255,255,255,.9); }
.dark .nb-tv__glass { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1);
  box-shadow:0 .5px 1.5px rgba(0,0,0,.3), inset 0 .5px 0 rgba(255,255,255,.14); }
.nb-tv__lgroup { display:flex; align-items:center; gap:6px; }
.nb-tv__gbtn { display:flex; align-items:center; justify-content:center; width:31px; height:26px; border-radius:999px; color:#5a5a5e; }
.dark .nb-tv__gbtn { color:#c6c6c9; }
.nb-tv__gbtn .nb-sf { width:16px; height:16px; }
.nb-tv__tools { display:flex; align-items:center; gap:9px; padding:5px 11px; border-radius:999px; color:#5a5a5e; }
.dark .nb-tv__tools { color:#c6c6c9; }
.nb-tv__tools .nb-sf { width:15px; height:15px; }
.nb-tv__right { margin-left:auto; }
.nb-tv__seg { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:3px; padding:3px; border-radius:999px; }
.nb-tv__seg-b { width:30px; height:21px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#7a7a7e; }
.dark .nb-tv__seg-b { color:#aeaeb2; }
.nb-tv__seg-b.on { background:rgba(255,255,255,.95); color:#1c1c1e; box-shadow:0 1px 2.5px rgba(0,0,0,.2), inset 0 .5px 0 rgba(255,255,255,1); }
.dark .nb-tv__seg-b.on { background:rgba(255,255,255,.22); color:#fff; box-shadow:0 1px 2.5px rgba(0,0,0,.4), inset 0 .5px 0 rgba(255,255,255,.25); }
.nb-tv__seg-b .nb-sf { width:15px; height:14px; }

/* search row */
.nb-tv__search { display:flex; align-items:center; gap:8px; padding:7px 13px; border-bottom:1px solid #e6e6e6; }
.dark .nb-tv__search { border-bottom-color:rgba(255,255,255,.07); }
.nb-tv__search .mag { width:14px; height:14px; color:#a0a0a0; }
.nb-tv__search .ph { color:#a0a0a0; flex:1; font-size:12px; }
.dark .nb-tv__search .ph { color:#8a8a8a; }
.nb-tv__search-ic { display:flex; align-items:center; gap:13px; color:#9a9a9a; }
.nb-tv__search-ic .nb-sf { width:15px; height:15px; }
.nb-tv__search-ic .b { color:#0a84ff; }

/* table grid */
/* proportional columns (fr) — widen with the container; equal the 750 px design at 750w */
.nb-tv__grid { display:grid; grid-template-columns:minmax(0,26fr) minmax(0,187fr) minmax(0,78fr) minmax(0,74fr) minmax(0,86fr) minmax(0,84fr) minmax(0,56fr) minmax(0,82fr) minmax(0,77fr); }
.nb-tv__hd, .nb-tv__row { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:center; }
.nb-tv__hd { height:29px; border-bottom:1px solid #e6e6e6; }
.dark .nb-tv__hd { border-bottom-color:rgba(255,255,255,.07); }
.nb-tv__hc { display:flex; align-items:center; gap:2px; padding:0 7px; color:#9a9a9a; font-size:8.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; overflow:hidden; border-right:1px solid #efefef; height:100%; }
.dark .nb-tv__hc { color:#8a8a8a; border-right-color:rgba(255,255,255,.05); }
.nb-tv__hc:last-child { border-right:0; }
.nb-tv__hc .nb-sf { width:9px; height:9px; opacity:.7; }

/* group header */
.nb-tv__grp { grid-column:1 / -1; display:flex; align-items:center; gap:6px; padding:5px 12px; background:#f7f7f7; color:#7a7a7a; font-size:11px; }
.dark .nb-tv__grp { background:#232325; color:#9a9a9a; }
.nb-tv__grp .nb-sf { width:11px; height:11px; color:#a0a0a0; }
.nb-tv__grp .cnt { background:rgba(0,0,0,.07); color:#8a8a8a; border-radius:9px; padding:0 7px; font-size:9.5px; line-height:15px; }
.dark .nb-tv__grp .cnt { background:rgba(255,255,255,.1); color:#aaa; }

/* rows */
.nb-tv__row { height:33px; border-bottom:1px solid #f1f1f1; }
.dark .nb-tv__row { border-bottom-color:rgba(255,255,255,.05); }
.nb-tv__row.alt { background:#f8f8f9; }
.dark .nb-tv__row.alt { background:rgba(255,255,255,.025); }
.nb-tv__row.sel { background:#e8f1fe; box-shadow:inset 2px 0 0 #0a84ff; }
.dark .nb-tv__row.sel { background:rgba(10,132,255,.16); box-shadow:inset 2px 0 0 #0a84ff; }
.nb-tv__c { padding:0 8px; height:100%; display:flex; align-items:center; border-right:1px solid #f3f3f3; overflow:hidden; }
.dark .nb-tv__c { border-right-color:rgba(255,255,255,.04); }
.nb-tv__c:last-child { border-right:0; }
.nb-tv__c.num { color:#b8b8b8; font-size:10.5px; }
.dark .nb-tv__c.num { color:#6a6a6a; }
.nb-tv__title-c { gap:4px; padding-left:5px; }
/* title dot = read/unread indicator in a RESERVED slot (always present, so the
   title text aligns whether or not a dot shows). Visible = Apple UI blue. */
.nb-tv__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:transparent; }
.nb-tv__dot.unread { background:#007AFF; }
.dark .nb-tv__dot.unread { background:#0A84FF; }
.nb-tv__title-t { font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-tv__title-t.wrap { white-space:normal; line-height:1.1; font-size:10.5px; }

/* tag pill — Apple TagColor palette, filled, white text (light/dark hexes) */
.nb-tv__tag { font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; color:#fff; }
.nb-tv__tag.tc-red{background:#FF3B30}    .dark .nb-tv__tag.tc-red{background:#FF453A}
.nb-tv__tag.tc-orange{background:#FF9500} .dark .nb-tv__tag.tc-orange{background:#FF9F0A}
.nb-tv__tag.tc-green{background:#34C759}  .dark .nb-tv__tag.tc-green{background:#30D158}
.nb-tv__tag.tc-blue{background:#007AFF}   .dark .nb-tv__tag.tc-blue{background:#0A84FF}
.nb-tv__tag.tc-purple{background:#AF52DE} .dark .nb-tv__tag.tc-purple{background:#BF5AF2}
.nb-tv__tag.tc-pink{background:#FF2D55}   .dark .nb-tv__tag.tc-pink{background:#FF375F}

/* progress */
.nb-tv__prog { display:flex; align-items:center; gap:6px; width:100%; }
.nb-tv__bar { flex:1; height:5px; border-radius:3px; background:#e6e6e6; overflow:hidden; min-width:0; }
.dark .nb-tv__bar { background:rgba(255,255,255,.1); }
.nb-tv__bar span { display:block; height:100%; border-radius:3px; }
.nb-tv__pct { color:#8a8a8a; font-size:10.5px; min-width:24px; text-align:right; }

.nb-tv__muted { color:#c2c2c2; }
.dark .nb-tv__muted { color:#6a6a6a; }
.nb-tv__val { font-size:11px; color:#3a3a3a; white-space:nowrap; }
.dark .nb-tv__val { color:#d4d4d4; }

/* toggle */
.nb-tv__tog { width:29px; height:17px; border-radius:9px; background:#d6d6d6; position:relative; flex-shrink:0; }
.dark .nb-tv__tog { background:#48484a; }
.nb-tv__tog.on { background:#0a84ff; }
.nb-tv__tog::after { content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; }
.nb-tv__tog.on::after { left:14px; }

/* ------------------------------------------------------------------
   Notes view (.nb-nv) — companion to .nb-tv (shares the window base +
   .nb-tv__chrome glass toolbar + .nb-sf masks). A note-list sidebar +
   a detail pane of field cards. See CLAUDE.md ".nb-tv standard".
   ------------------------------------------------------------------ */
/* 2-line title block + search/sort icons in the chrome */
.nb-nv__tb { display:flex; flex-direction:column; line-height:1.15; }
.nb-nv__tb-title { font-weight:600; font-size:12.5px; }
.nb-nv__tb-sub { font-size:9.5px; color:#9a9a9a; margin-top:1px; }
/* search + sort: two separate Liquid-Glass pills (reuse .nb-tv__gbtn) */
.nb-nv__cic { display:flex; align-items:center; gap:6px; margin-left:4px; }

/* window is a flex column (chrome + body) so a fixed window height
   (.nb-fit--slide in the slideshow) constrains the body — the sidebar list
   then clips and its footer stays pinned, while the detail fits. In natural
   height (hero / standalone) the body just takes its content height. */
.nb-nv { display:flex; flex-direction:column; }
.nb-nv__body { display:flex; align-items:stretch; flex:1; min-height:0; }

/* sidebar (note list) */
.nb-nv__sb { width:200px; flex-shrink:0; background:#f5f5f5; border-right:1px solid #e6e6e6; overflow:hidden; display:flex; flex-direction:column; }
.dark .nb-nv__sb { background:#202022; border-right-color:rgba(255,255,255,.06); }
.nb-nv__sb-head { font-size:10px; font-weight:600; color:#9a9a9a; padding:9px 13px 5px; }
.nb-nv__list { flex:1; overflow:hidden; }
.nb-nv__note { padding:7px 13px; border-bottom:1px solid #ececec; }
.dark .nb-nv__note { border-bottom-color:rgba(255,255,255,.05); }
.nb-nv__note.sel { background:#e2e2e4; }
.dark .nb-nv__note.sel { background:rgba(255,255,255,.10); }
.nb-nv__nt { display:flex; align-items:center; gap:4px; }
.nb-nv__dot { width:6px; height:6px; border-radius:50%; background:transparent; flex-shrink:0; }
.nb-nv__dot.unread { background:#007AFF; }
.dark .nb-nv__dot.unread { background:#0A84FF; }
.nb-nv__ntitle { font-size:11px; font-weight:600; color:#171717; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dark .nb-nv__ntitle { color:#fff; }
.nb-nv__nprev { margin-top:3px; }
.nb-nv__nline { font-size:10px; color:#9a9a9a; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-nv__ndate { font-size:9px; color:#b3b3b3; text-align:right; margin-top:3px; }
.dark .nb-nv__ndate { color:#6e6e72; }
.nb-nv__sb-foot { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-top:1px solid #e6e6e6; font-size:9.5px; color:#8a8a8a; }
.dark .nb-nv__sb-foot { border-top-color:rgba(255,255,255,.06); }
.nb-nv__sb-foot .mr { display:flex; align-items:center; gap:4px; }
.nb-nv__sb-foot .nb-sf { width:11px; height:11px; }

/* detail pane */
.nb-nv__detail { flex:1; min-width:0; padding:18px 20px 20px; overflow:hidden; }
.nb-nv__dtitle { font-size:17px; font-weight:700; letter-spacing:-0.01em; color:#171717; }
.dark .nb-nv__dtitle { color:#fff; }
.nb-nv__dts { font-size:10.5px; color:#9a9a9a; margin-top:4px; }
.nb-nv__dmeta { display:flex; gap:14px; margin-top:5px; }
.nb-nv__dmeta span { display:flex; align-items:center; gap:4px; font-size:10px; color:#a8a8a8; }
.nb-nv__dmeta .nb-sf { width:11px; height:11px; }

/* field cards */
.nb-nv__field { background:#f2f2f2; border-radius:12px; padding:11px 14px; margin-top:9px; }
.dark .nb-nv__field { background:#272727; }
.nb-nv__fh { display:flex; align-items:center; gap:5px; }
.nb-nv__fl { font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#9a9a9a; }
.nb-nv__fh .nb-sf { width:11px; height:11px; color:#a8a8a8; }
.nb-nv__more { margin-left:auto; width:13px; height:13px; color:#b0b0b0; }
.dark .nb-nv__more { color:#8a8a8a; }
.nb-nv__fv { font-size:13px; color:#1c1c1e; margin-top:7px; }
.dark .nb-nv__fv { color:#fff; }

/* detail tag pills — unselected gray, the note's value colored */
.nb-nv__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.nb-nv__tag { font-size:11px; padding:3px 10px; border-radius:11px; background:rgba(0,0,0,.05); color:#70707a; white-space:nowrap; }
.dark .nb-nv__tag { background:rgba(255,255,255,.08); color:#bcbcc2; }
.nb-nv__tag.sel { color:#fff; }
.nb-nv__tag.sel.tc-purple { background:#AF52DE; } .dark .nb-nv__tag.sel.tc-purple { background:#BF5AF2; }
.nb-nv__tag.sel.tc-blue   { background:#007AFF; } .dark .nb-nv__tag.sel.tc-blue   { background:#0A84FF; }
.nb-nv__tag.sel.tc-red    { background:#FF3B30; } .dark .nb-nv__tag.sel.tc-red    { background:#FF453A; }
.nb-nv__tag.sel.tc-green  { background:#34C759; } .dark .nb-nv__tag.sel.tc-green  { background:#30D158; }
.nb-nv__tag.sel.tc-orange { background:#FF9500; } .dark .nb-nv__tag.sel.tc-orange { background:#FF9F0A; }

/* progress field */
.nb-nv__prog-num { font-size:18px; font-weight:600; margin-top:6px; }
.nb-nv__prog-num small { font-size:12px; color:#9a9a9a; font-weight:400; margin-left:3px; }
.nb-nv__pbar { height:6px; border-radius:3px; background:#e0e0e2; overflow:hidden; margin-top:8px; }
.dark .nb-nv__pbar { background:rgba(255,255,255,.1); }
.nb-nv__pbar span { display:block; height:100%; background:#0a84ff; border-radius:3px; }

/* date chip */
.nb-nv__chip { display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:rgba(0,0,0,.05); border-radius:8px; padding:5px 10px; font-size:12px; }
.dark .nb-nv__chip { background:rgba(255,255,255,.08); }
.nb-nv__chip .nb-sf { width:13px; height:13px; color:#8a8a8a; }

/* ------------------------------------------------------------------
   Cards view (.nb-cv) — the full THREE-pane macOS screen: a notebook
   sidebar (colored notebook icons + counts + unread dot + shared avatar)
   | a note-list | a detail pane of field cards. Reuses the .nb-nv
   note-list + detail vocabulary wholesale; only the notebook sidebar and
   the 3-section toolbar are new. Fixed window height (capture aspect ~1.59:1)
   so the panes clip like a real window. See CLAUDE.md ".nb-tv standard".
   ------------------------------------------------------------------ */
/* Designed at a WIDER base (1120) than the 750 .nb-tv standard: a 3-pane
   window needs the room so the notebook names fit and all detail fields show,
   matching the proportions of the real ~1333px capture. (The reused .nb-nv
   font sizes are shared with the slideshow and can't shrink, so we widen the
   window instead.) scale-fit.js shrinks the whole window to the docs column. */
.nb-cv { display:flex; min-width:1120px; height:650px; position:relative; background:#ffffff; }
.dark .nb-cv { background:#1b1b1b; }
.nb-cv__nbs, .nb-cv__main, .nb-cv__chrome, .nb-cv__tb-b, .nb-cv__tb-c, .nb-cv__list, .nb-cv__detail { box-sizing:border-box; }

/* main area (right of the sidebar): a TRANSPARENT toolbar floating on the white
   content surface (no gray titlebar bar), above the note-list + detail row */
.nb-cv__main { flex:1; min-width:0; display:flex; flex-direction:column; }
/* stretch the sections to full height so tb-b's right border reaches the very
   top and meets the note-list border below with no gap (continuous divider) */
.nb-cv__chrome { display:flex; align-items:stretch; height:46px; flex-shrink:0; }
/* tb-b carries the same right border as the note-list so the note-list/detail
   divider runs unbroken from the top of the window (through the toolbar) down */
.nb-cv__tb-b { width:244px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-right:1px solid #e6e6e6; }
.dark .nb-cv__tb-b { border-right-color:rgba(0,0,0,.6); }
.nb-cv__tb-c { flex:1; min-width:0; position:relative; display:flex; align-items:center; padding:0 13px; }
.nb-cv__tb-c .nb-tv__seg { left:50%; transform:translateX(-50%); }   /* centered over detail */
.nb-cv__mainbody { flex:1; min-height:0; display:flex; align-items:stretch; }
/* titlebar icons inside the glass sidebar (book.badge.plus + sidebar toggle) */
.nb-cv__tbicons { display:flex; align-items:center; gap:13px; color:#5a5a5e; }
.dark .nb-cv__tbicons { color:#c6c6c9; }
.nb-cv__tbicons .nb-sf { width:16px; height:16px; }
/* note-list title block in the toolbar */
.nb-cv__tbtitle { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.nb-cv__tbtitle b { font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-cv__tbtitle span { font-size:9.5px; color:#9a9a9a; margin-top:1px; white-space:nowrap; }

/* floating Liquid Glass notebook sidebar — inset on all sides (rounded panel,
   hairline border + soft shadow) that WRAPS the window traffic lights. The
   fill is barely off the window bg; the float reads from the border + shadow. */
.nb-cv__nbs { width:212px; flex-shrink:0; margin:8px; border-radius:13px; overflow:hidden;
  display:flex; flex-direction:column; padding:0 8px 8px;
  background:#f6f6f7; border:.5px solid rgba(0,0,0,.08);
  box-shadow:0 .5px 1.5px rgba(0,0,0,.05), 0 5px 16px rgba(0,0,0,.06); }
.dark .nb-cv__nbs { background:#151515; border-color:rgba(255,255,255,.16);
  box-shadow:0 .5px 1.5px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.45); }
/* traffic lights + new-notebook/sidebar icons live in the panel's top row */
.nb-cv__nbs-top { display:flex; align-items:center; justify-content:space-between; padding:11px 5px 5px; }
.nb-cv__nbs-head { font-size:9.5px; font-weight:500; color:#9a9a9a; padding:8px 6px 6px; }
.nb-cv__nbs-head--mt { padding-top:14px; }
.nb-cv__nbrow { display:flex; align-items:center; gap:6px; padding:6px 6px; border-radius:7px; }
.nb-cv__nbrow.sel { background:#e6e6e8; }
.dark .nb-cv__nbrow.sel { background:rgba(255,255,255,.09); }
.nb-cv__nbdot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:transparent; }
.nb-cv__nbdot.unread { background:#007AFF; }
.dark .nb-cv__nbdot.unread { background:#0A84FF; }
/* colored glyph on a transparent bg (no rounded-tile container) — the actual
   SF Symbol the app uses, rendered as a mask, tinted by the inline color */
.nb-cv__nbic { width:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nb-cv__nbic .nb-sf { width:16px; height:15px; }
.nb-cv__nbtext { flex:1; min-width:0; overflow:hidden; line-height:1.2; }
/* title/subtitle match the note-list text (.nb-nv__ntitle 11px / .nb-nv__nline 10px) */
.nb-cv__nbname { display:block; font-size:11px; font-weight:700; color:#171717; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dark .nb-cv__nbname { color:#fff; }
.nb-cv__nbcount { display:block; font-size:10px; color:#7e7e7e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.dark .nb-cv__nbcount { color:#a0a0a4; }
.nb-cv__nbav { width:14px; height:14px; flex-shrink:0; color:#9a9a9a; }
.dark .nb-cv__nbav { color:#7a7a7e; }
.nb-cv__nbav .nb-sf { width:100%; height:100%; }

/* note-list (middle) — white, reuses .nb-nv__note/.nb-nv__nline internals */
.nb-cv__list { width:244px; flex-shrink:0; background:#fff; border-right:1px solid #e6e6e6; overflow:hidden; display:flex; flex-direction:column; }
.dark .nb-cv__list { background:#1b1b1b; border-right-color:rgba(0,0,0,.6); }

/* note-list "Notes" header gets a hairline divider under it */
.nb-cv__list .nb-nv__sb-head { border-bottom:1px solid #e6e6e6; }
.dark .nb-cv__list .nb-nv__sb-head { border-bottom-color:rgba(255,255,255,.07); }
/* unread dot sits in the left padding (absolute) so it never shifts the title —
   every note title starts at the same x whether or not it has a dot */
.nb-cv__list .nb-nv__nt { position:relative; }
.nb-cv__list .nb-nv__dot { position:absolute; left:-10px; top:50%; transform:translateY(-50%); margin:0; }
/* field-value preview lines a bit less muted (matches the notebook subtitles) */
.nb-cv__list .nb-nv__nline { color:#7e7e7e; }
.dark .nb-cv__list .nb-nv__nline { color:#a0a0a4; }

/* detail (right) — reuses .nb-nv__detail + field cards */
.nb-cv__detail { flex:1; min-width:0; padding:16px 20px 20px; overflow:hidden; }
/* a touch more separation between field cards (and before the first) */
.nb-cv__detail .nb-nv__field { margin-top:13px; }
.nb-cv__detail .nb-nv__dmeta + .nb-nv__field { margin-top:17px; }
/* "Added by / Edited by" meta — slightly smaller + more muted */
.nb-cv__detail .nb-nv__dmeta span { font-size:9.5px; color:#bcbcbc; }
.dark .nb-cv__detail .nb-nv__dmeta span { color:#6c6c70; }
.nb-cv__detail .nb-nv__dmeta .nb-sf { width:10px; height:10px; }

/* currency value: gray symbol + bold amount */
.nb-cv__money { font-size:15px; font-weight:600; margin-top:6px; color:#1c1c1e; }
.dark .nb-cv__money { color:#fff; }
.nb-cv__money span { color:#9a9a9a; font-weight:400; margin-right:5px; }

/* rating stars */
.nb-cv__stars { display:flex; gap:6px; margin-top:7px; }
.nb-cv__stars .nb-sf { width:17px; height:17px; color:#FBB90A; }
.nb-cv__stars .nb-sf.empty { color:#d0d0d2; }
.dark .nb-cv__stars .nb-sf.empty { color:#48484a; }
/* small stars in note-list preview lines */
.nb-cv__rstars { display:inline-flex; gap:2px; vertical-align:-1px; }
.nb-cv__rstars .nb-sf { width:9px; height:9px; color:#9a9a9a; }

/* ------------------------------------------------------------------
   Field-type picker (.nb-fp) — the "New Field" sheet: a header + sections
   (Text/Contact/Numbers), each a gray label + a 2-col grid of field-type
   cards (centered colored SF-Symbol icon + label + description). A bottom
   fade reads as "and more below." Built to the .nb-tv standard (fixed design
   width + .nb-fit / scale-fit.js). See CLAUDE.md "Live app-UI mockups".
   ------------------------------------------------------------------ */
.nb-fp { position:relative; width:100%; min-width:680px; height:516px; display:flex; flex-direction:column;
  background:#ffffff; color:#1c1c1e; font-size:13px; line-height:1.2; text-align:left; }
.dark .nb-fp { background:#1b1b1b; color:#fff; }
/* the sheet is more rounded than a window — bump the clip radius on its .nb-fit,
   and give it a clearer (less muted) edge than the shadow alone */
.nb-fit:has(> .nb-fp) { border-radius:22px; border:1px solid rgba(0,0,0,.12); }
.dark .nb-fit:has(> .nb-fp) { border-color:rgba(255,255,255,.18); }

/* header: round back button + title, hairline divider under it */
.nb-fp__head { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid #ececec; flex-shrink:0; }
.dark .nb-fp__head { border-bottom-color:rgba(0,0,0,.55); }
.nb-fp__back { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#f0f0f0; color:#3a3a3c; }
.dark .nb-fp__back { background:#2c2c2e; color:#d6d6d8; }
.nb-fp__back .nb-sf { width:10px; height:14px; }
.nb-fp__htitle { font-size:14px; font-weight:600; letter-spacing:-.01em; color:#1c1c1e; }
.dark .nb-fp__htitle { color:#fff; }

/* body: scrolling sections (clipped + faded to imply more) */
.nb-fp__body { flex:1; min-height:0; overflow:hidden; padding:16px 18px; display:flex; flex-direction:column; gap:20px; }
/* search field at the top of the body */
.nb-fp__search { display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; border-radius:9px; flex-shrink:0; background:#f4f4f4; color:#8a8a8a; }
.dark .nb-fp__search { background:#252525; color:#98989a; }
.nb-fp__search .nb-sf { width:15px; height:15px; }
.nb-fp__search span { font-size:15px; }
.nb-fp__sec-label { font-size:13px; font-weight:500; color:#8a8a8a; margin-bottom:9px; }
.dark .nb-fp__sec-label { color:#9a9a9a; }
.nb-fp__grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }

/* field-type card */
.nb-fp__card { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:#f9f9f9; border-radius:14px; padding:22px 14px; }
.dark .nb-fp__card { background:#212121; }
.nb-fp__ic { width:26px; height:25px; margin-bottom:11px; }   /* .nb-sf mask; color from the fc-* class */
.nb-fp__ct { font-size:14px; font-weight:600; color:#1c1c1e; }
.dark .nb-fp__ct { color:#fff; }
.nb-fp__cs { font-size:12px; color:#8a8a8a; margin-top:4px; }
.dark .nb-fp__cs { color:#98989a; }

/* field-type icon colors (Apple system hues, light / dark) */
.nb-fp__ic.fc-blue   { color:#007AFF; } .dark .nb-fp__ic.fc-blue   { color:#0A84FF; }
.nb-fp__ic.fc-purple { color:#AF52DE; } .dark .nb-fp__ic.fc-purple { color:#BF5AF2; }
.nb-fp__ic.fc-pink   { color:#FF2D55; } .dark .nb-fp__ic.fc-pink   { color:#FF375F; }
.nb-fp__ic.fc-teal   { color:#30B0C7; } .dark .nb-fp__ic.fc-teal   { color:#40C8E0; }
.nb-fp__ic.fc-green  { color:#34C759; } .dark .nb-fp__ic.fc-green  { color:#30D158; }
.nb-fp__ic.fc-cyan   { color:#32ADE6; } .dark .nb-fp__ic.fc-cyan   { color:#64D2FF; }
.nb-fp__ic.fc-orange { color:#FF9500; } .dark .nb-fp__ic.fc-orange { color:#FF9F0A; }
.nb-fp__ic.fc-mint   { color:#00C7BE; } .dark .nb-fp__ic.fc-mint   { color:#66D4CF; }
.nb-fp__ic.fc-yellow { color:#FFCC00; } .dark .nb-fp__ic.fc-yellow { color:#FFD60A; }

/* bottom fade — implies the picker scrolls to more sections */
.nb-fp__fade { position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0), #ffffff); }
.dark .nb-fp__fade { background:linear-gradient(rgba(27,27,27,0), #1b1b1b); }

/* ------------------------------------------------------------------
   Note detail (.nb-nd) — a single note open in the detail pane (standalone).
   Reuses the .nb-nv field-card vocabulary; capped to a single-column width.
   See CLAUDE.md "Live app-UI mockups".
   ------------------------------------------------------------------ */
.nb-nd { width:100%; min-width:540px; background:#ffffff; color:#1c1c1e; font-size:11px; line-height:1.2;
  text-align:left; padding:20px 22px 24px; }
.dark .nb-nd { background:#1b1b1b; color:#fff; }
.nb-fit:has(> .nb-nd) { max-width:540px; }   /* a single detail column, not full width */
.nb-nd .nb-nv__field { margin-top:11px; }
.nb-nd .nb-nv__dmeta + .nb-nv__field { margin-top:16px; }
.nb-nd__longtext { line-height:1.5; }
/* the reused .nb-fields__switch is a span — make it block-sized so its height
   applies and the knob doesn't overflow the card */
.nb-nd .nb-fields__switch { display:inline-block; }