/* =============================================================
   NCGraph — landing page stylesheet
   -------------------------------------------------------------
   Organization:
     1. Design tokens (CSS custom properties)
     2. Resets & base
     3. Layout primitives (container, section)
     4. Buttons, chips, eyebrow
     5. Navbar
     6. Hero
     7. Features
     8. Demo
     9. CTA
    10. Footer
    11. Responsive overrides
   ============================================================= */

/* 1. Design tokens --------------------------------------------- */
:root {
  --color-bg: #0b0f17;
  --color-bg-elev: #10151f;
  --color-bg-soft: #141a26;
  --color-surface: #ffffff;
  --color-text: #e7ecf3;
  --color-text-muted: #9aa4b2;
  --color-text-strong: #ffffff;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-brand: #7cc4ff;
  --color-brand-2: #5b6cff;
  --color-brand-soft: rgba(124, 196, 255, 0.12);

  --color-success: #4ade80;
  --color-warning: #fbbf24;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.45);

  --container-max: 1160px;
  /* Vertical rhythm between sections on the landing page. Kept compact so
     the page reads as one flow rather than a stack of tall chapters. */
  --section-pad-y: clamp(40px, 5vw, 72px);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

/* 2. Resets & base -------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.page {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: radial-gradient(
      1200px 600px at 80% -10%,
      rgba(91, 108, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at -10% 10%,
      rgba(124, 196, 255, 0.12),
      transparent 60%
    ),
    var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  color: var(--color-text-strong);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
}
h3 {
  font-size: 1.15rem;
  font-weight: 600;
}
p {
  margin: 0 0 1em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.page__main {
  display: block;
}

/* 3. Layout primitives ---------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-pad-y);
}

.section__header {
  max-width: 720px;
  margin: 0 auto 2rem;
  text-align: center;
}

.section__title {
  margin-bottom: 0.5rem;
}

.section__lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid rgba(124, 196, 255, 0.2);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* 4. Buttons, chips ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.btn--lg {
  padding: 0.85rem 1.3rem;
  font-size: 1rem;
}
.btn--primary {
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  color: #0b0f17;
  box-shadow: 0 8px 24px rgba(91, 108, 255, 0.35);
}
.btn--primary:hover {
  box-shadow: 0 10px 30px rgba(91, 108, 255, 0.45);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.28);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text);
  font-family: var(--font-mono);
}
.chip--muted {
  color: var(--color-text-muted);
}

/* 5. Navbar --------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(11, 15, 23, 0.72);
  border-bottom: 1px solid var(--color-border);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 1rem;
}
.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-strong);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.navbar__brand:hover {
  text-decoration: none;
}
.navbar__name {
  font-size: 1.05rem;
}
.navbar__logo {
  display: inline-flex;
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.navbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
}
.navbar__links a {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
}
.navbar__links a:hover {
  color: var(--color-text-strong);
  text-decoration: none;
}

.navbar__toggle,
.navbar__toggle-input {
  display: none;
}

/* 6. Hero ----------------------------------------------------- */
.hero {
  padding-top: clamp(48px, 6vw, 88px);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero__title {
  margin-bottom: 1rem;
}
.hero__lead {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 48ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.hero__bullets {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.hero__bullets li {
  position: relative;
  padding-left: 1.1rem;
}
.hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(124, 196, 255, 0.18);
}

.hero__visual {
  position: relative;
}
.hero__panel {
  background: linear-gradient(
    180deg,
    var(--color-bg-elev),
    var(--color-bg-soft)
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__panel-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}
.hero__panel-bar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}
.hero__panel-body {
  position: relative;
  aspect-ratio: 16 / 9;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(
    ellipse at center,
    black 60%,
    transparent 100%
  );
}
.hero__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 7. Features ------------------------------------------------- */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.feature-card {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    var(--color-bg-elev),
    var(--color-bg-soft)
  );
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.feature-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.feature-card__title {
  margin-bottom: 0.4rem;
}
.feature-card__body {
  color: var(--color-text-muted);
  margin: 0;
}
.feature-card__status {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}
.feature-card__status[data-state="available"] {
  color: var(--color-success);
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
}
.feature-card__status[data-state="planned"] {
  color: var(--color-warning);
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

/* 8. Demo ----------------------------------------------------- */
.demo__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: center;
}
.demo__bullets {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.6rem;
  color: var(--color-text-muted);
}
.demo__bullets strong {
  color: var(--color-text-strong);
  font-weight: 600;
  margin-right: 0.25rem;
}

.demo__viewer {
  background: linear-gradient(
    180deg,
    var(--color-bg-elev),
    var(--color-bg-soft)
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.demo__viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.demo__viewer-tools {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.demo__viewer-file {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.demo__viewer-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(
      600px 240px at 50% 30%,
      rgba(124, 196, 255, 0.08),
      transparent 70%
    ),
    var(--color-bg);
}
.demo__viewer-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(
    ellipse at center,
    black 65%,
    transparent 100%
  );
}
.demo__viewer-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.demo__viewer-footer {
  display: flex;
  gap: 1.25rem;
  justify-content: flex-end;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.demo__promos {
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
}

/* 8b. Promos (Measure + API spotlights) ----------------------- */
.promos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.promo-card {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    var(--color-bg-elev),
    var(--color-bg-soft)
  );
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.promo-card::before {
  /* Subtle brand outline that echoes the CTA panel without the full glow. */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(124, 196, 255, 0.25),
    rgba(91, 108, 255, 0.15)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  opacity: 0.5;
}
.promo-card__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  /* Leave room for the absolutely-positioned "Planned" badge (top-right). */
  padding-right: 4.5rem;
}
.promo-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.promo-card__title {
  margin: 0;
  font-size: 1.35rem;
}
.promo-card__lead {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 1rem;
}
.promo-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--color-text);
}
.promo-card__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text);
}
.promo-card__list li::before {
  /* Checkmark glyph to convey concrete capability, not a generic bullet. */
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.8rem;
  height: 0.45rem;
  border-left: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  transform: rotate(-45deg);
}

/* 9. CTA ------------------------------------------------------ */
.cta__panel {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(
      135deg,
      rgba(124, 196, 255, 0.08),
      rgba(91, 108, 255, 0.08)
    ),
    var(--color-bg-elev);
  border: 1px solid var(--color-border-strong);
  text-align: center;
  overflow: hidden;
}
.cta__panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(124, 196, 255, 0.35),
    rgba(91, 108, 255, 0.35)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}
.cta__title {
  margin-bottom: 0.5rem;
}
.cta__lead {
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-inline: auto;
}
.cta__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* 10. Footer -------------------------------------------------- */
.footer {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.2);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 3rem;
  padding-block: 3rem;
}
.footer__name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-strong);
  margin-bottom: 0.4rem;
}
.footer__tagline {
  color: var(--color-text-muted);
  max-width: 36ch;
}
.footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer__col h4 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.footer__col a {
  color: var(--color-text);
}
.footer__col a:hover {
  color: var(--color-brand);
  text-decoration: none;
}
.footer__meta {
  display: flex;
  gap: 0.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* 11. Responsive --------------------------------------------- */
@media (max-width: 960px) {
  .hero__inner,
  .demo__inner {
    grid-template-columns: 1fr;
  }
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .promos__grid {
    grid-template-columns: 1fr;
  }
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .navbar__nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--color-bg-elev);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .navbar__links {
    flex-direction: column;
    gap: 0;
  }
  .navbar__links li {
    border-bottom: 1px solid var(--color-border);
  }
  .navbar__links a {
    display: block;
    padding: 0.9rem 0;
    color: var(--color-text);
  }
  .navbar__cta {
    margin-top: 0.75rem;
    align-self: flex-start;
  }
  .navbar__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
  }
  .navbar__toggle span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .navbar__toggle-input:checked ~ .navbar__nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .navbar__toggle-input:checked ~ .navbar__toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .navbar__toggle-input:checked ~ .navbar__toggle span:nth-child(2) {
    opacity: 0;
  }
  .navbar__toggle-input:checked ~ .navbar__toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .features__grid {
    grid-template-columns: 1fr;
  }
  .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__actions,
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    width: 100%;
  }
}

/* =============================================================
   NC View page
   ============================================================= */

/* Full-width mode: pages that need the entire viewport width (tools,
   workspaces, editors) opt in via <body class="page--wide">.

   The preview frame has a single authoritative size stored in
   `--nc-preview-h`. By default it's viewport-relative so the main tools
   (navbar + hero + workspace) fit in one screen and the footer sits
   just below the fold (accessible by scrolling). A safety floor keeps
   the frame usable on short windows; a ceiling prevents it from growing
   absurdly tall on 4K monitors. Override per-page with e.g.
   `style="--nc-preview-h: 720px;"` on <body> for a strictly fixed size. */
.page--wide {
  /* 260px offset covers: navbar (~60) + hero (~44) + workspace padding
     (~44) + panel padding (~40) + panel header+margin (~64) + safety.
     Tune this value if the navbar/hero change height. */
  --nc-preview-h: clamp(360px, calc(100dvh - 320px), 1000px);
}
.page--wide .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.nc-hero {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: 0;
}
.page--wide .nc-hero {
  padding-top: clamp(12px, 1.5vw, 20px);
  padding-bottom: 0;
  flex: 0 0 auto;
}
/* Compact one-line hero: eyebrow, title, and lead share a single row so the
   header takes as little vertical space as possible. It wraps gracefully on
   narrow viewports. */
.page--wide .nc-hero > .container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.nc-hero__title {
  margin-top: 0.4rem;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}
.page--wide .nc-hero__title {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.2;
}
.nc-hero__lead {
  color: var(--color-text-muted);
  max-width: 70ch;
  font-size: 1rem;
}
.page--wide .nc-hero__lead {
  margin: 0;
  font-size: 0.85rem;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  /* Truncate the lead with an ellipsis if the row gets tight rather than
     wrapping onto a second line. It's just context copy, not critical. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-workspace {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(40px, 5vw, 80px);
}
/* Full-width mode: workspace is allowed to size naturally to its content
   now that the preview frame is a fixed height. The row height is driven
   by the preview panel (the tallest natural child) and the sidebar
   stretches to the same row height, scrolling internally when its content
   overflows. This gives predictable, file-independent dimensions. */
.page--wide .nc-workspace {
  padding-top: clamp(14px, 1.5vw, 22px);
  padding-bottom: clamp(14px, 1.5vw, 22px);
}
.nc-workspace__grid {
  display: grid;
  grid-template-columns: minmax(360px, 420px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.page--wide .nc-workspace__grid {
  align-items: stretch;
  grid-template-rows: auto;
}
.nc-workspace__grid--share {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: stretch;
}
.nc-workspace__grid--share .nc-workspace__side,
.nc-workspace__grid--share .nc-workspace__main {
  min-height: 0;
}
.nc-workspace__grid--share .nc-workspace__side {
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
}
.nc-workspace__grid--share .nc-workspace__side > .nc-panel,
.nc-workspace__grid--share .nc-workspace__main > .nc-panel {
  height: 100%;
}
.nc-workspace__grid--share .nc-workspace__main {
  display: flex;
}
.nc-workspace__grid--share .nc-workspace__main > .nc-preview {
  flex: 1 1 auto;
}
.nc-workspace__grid--share .nc-metadata {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nc-workspace__grid--share .nc-metadata .nc-meta,
.nc-workspace__grid--share .nc-metadata .nc-meta--extra {
  overflow: auto;
  min-height: 0;
}
.nc-workspace__grid--share .nc-metadata .nc-meta {
  flex: 1 1 auto;
}
.nc-workspace__side {
  display: grid;
  gap: 1.25rem;
  position: sticky;
  top: 88px;
}
/* Sidebar with internal scroll. It is no longer sticky (the workspace is
   always fully visible now that the preview is a fixed size) and it is
   bounded to the same height as the preview panel so the two columns line
   up and extra metadata scrolls inside the sidebar rather than growing
   the page. The bound tracks `--nc-preview-h` — the chrome offset covers
   the preview panel's header (~50px) + panel padding (~40px) + a small
   safety margin. */
.page--wide .nc-workspace__side {
  position: static;
  top: auto;
  max-height: calc(var(--nc-preview-h, 640px) + 104px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  /* Breathing room so the scrollbar doesn't sit flush against the
     metadata panel's right edge. */
  padding-right: 0.35rem;
  /* Firefox thin scrollbar styled with the panel palette. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
/* WebKit/Blink: matching compact scrollbar. */
.page--wide .nc-workspace__side::-webkit-scrollbar {
  width: 10px;
}
.page--wide .nc-workspace__side::-webkit-scrollbar-track {
  background: transparent;
}
.page--wide .nc-workspace__side::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.page--wide .nc-workspace__side:hover::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  background-clip: padding-box;
  border: 2px solid transparent;
}
/* Shared link page: override generic sidebar clamp so metadata can truly
   stretch to match preview panel height in the same row. */
.page--wide .nc-workspace__grid--share .nc-workspace__side {
  max-height: none;
  height: 100%;
  overflow: hidden;
  padding-right: 0;
}
.page--wide .nc-workspace__grid--share .nc-workspace__main {
  height: 100%;
}
.page--wide .nc-workspace__grid--share .nc-workspace__side,
.page--wide .nc-workspace__grid--share .nc-workspace__main {
  min-height: calc(var(--nc-preview-h, 640px) + 126px);
}
.page--wide .nc-workspace__grid--share .nc-workspace__side > .nc-metadata,
.page--wide .nc-workspace__grid--share .nc-workspace__main > .nc-preview {
  height: 100%;
}
.page--wide .nc-workspace__grid--share .nc-preview {
  display: flex;
  flex-direction: column;
}
.page--wide .nc-workspace__grid--share .nc-preview .nc-panel__header {
  margin-bottom: 1rem;
}
.page--wide .nc-workspace__grid--share .nc-measure__hint {
  margin-bottom: 0.65rem;
}
.page--wide .nc-workspace__grid--share .nc-preview__canvas {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.page--wide .nc-workspace__grid--share .nc-metadata .nc-meta,
.page--wide .nc-workspace__grid--share .nc-metadata .nc-meta--extra {
  overflow-y: auto;
}
.nc-workspace__main {
  display: grid;
  gap: 1.25rem;
}
/* Preview column sizes to the preview panel's natural height. */
.page--wide .nc-workspace__main {
  min-height: 0;
}

/* --- shared panel look (upload / metadata / preview) ----------- */
.nc-panel {
  background: linear-gradient(
    180deg,
    var(--color-bg-elev),
    var(--color-bg-soft)
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
.nc-panel__header {
  margin-bottom: 1.25rem;
}
.nc-panel__header--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.nc-panel__title {
  margin: 0.35rem 0 0.3rem;
  font-size: 1.15rem;
}
.nc-panel__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* --- upload ---------------------------------------------------- */
.nc-upload__form {
  display: grid;
  gap: 0.9rem;
}
.nc-upload__mode-switch {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.nc-upload__mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 1 1 0;
  padding: 0 0.85rem;
  height: 2rem;
  cursor: pointer;
  text-align: center;
}
.nc-upload__mode-btn + .nc-upload__mode-btn {
  border-left: 1px solid var(--color-border);
}
.nc-upload__mode-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-strong);
}
.nc-upload__mode-btn.is-active {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.nc-upload__manual {
  display: grid;
  gap: 0.45rem;
}
.nc-upload__sample {
  display: grid;
  gap: 0.45rem;
}
.nc-upload__manual-label {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 600;
}
.nc-upload__sample-label {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 600;
}
.nc-upload__textarea {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  padding: 0.75rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.45;
}
.nc-upload__textarea:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}
.nc-upload__sample-list {
  width: 100%;
  max-height: 168px;
  overflow: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.25rem;
  display: grid;
  gap: 0.22rem;
}
.nc-upload__sample-list:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}
.nc-upload__sample-item {
  appearance: none;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  display: grid;
  gap: 0.1rem;
}
.nc-upload__sample-item:hover {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.04);
}
.nc-upload__sample-item.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}
.nc-upload__sample-name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-strong);
}
.nc-upload__sample-caption {
  font-size: 0.73rem;
  color: var(--color-text-muted);
}
.nc-upload__manual-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.nc-dropzone {
  position: relative;
  display: block;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: rgba(255, 255, 255, 0.02);
}
.nc-dropzone:hover,
.nc-dropzone.is-drag {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}
.nc-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.nc-dropzone__icon {
  color: var(--color-brand);
  margin-bottom: 0.6rem;
}
.nc-dropzone__text {
  color: var(--color-text);
  font-weight: 500;
}
.nc-dropzone__text strong {
  color: var(--color-text-strong);
  font-weight: 600;
}
.nc-dropzone__hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
}

.nc-upload__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text);
}
.nc-upload__selected[hidden] {
  display: none;
}
.nc-upload__selected-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-upload__clear {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
}
.nc-upload__clear:hover {
  color: var(--color-text-strong);
}

.nc-upload__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.nc-upload__status {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.nc-upload__status[data-level="error"] {
  color: #ff8b6b;
}
.nc-upload__status[data-level="ok"] {
  color: var(--color-success);
}
.nc-upload__status[data-level="busy"] {
  color: var(--color-brand);
}

/* --- metadata -------------------------------------------------- */
.nc-meta {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.nc-meta__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border);
}
.nc-meta__row dt {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}
.nc-meta__row dd {
  margin: 0;
  color: var(--color-text-strong);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: right;
  overflow-wrap: anywhere;
}
.nc-meta--extra {
  margin-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.nc-meta--extra[hidden] {
  display: none;
}
.nc-meta__format {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-brand-soft);
  border: 1px solid rgba(124, 196, 255, 0.28);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.nc-meta__format[hidden] {
  display: none;
}

/* --- preview --------------------------------------------------- */
.nc-preview {
  --nc-preview-outer: var(--color-brand);
  --nc-preview-inner: #a7b4ff;
  --nc-preview-hole: #ff8b6b;
  --nc-preview-slot: #ff8b6b;
  --nc-preview-marking: #cfd6e0;
  --nc-preview-canvas-bg: var(--color-bg);
  --nc-preview-canvas-glow: rgba(124, 196, 255, 0.08);
  --nc-preview-canvas-grid: rgba(255, 255, 255, 0.04);
  --nc-preview-control-bg: rgba(255, 255, 255, 0.04);
  --nc-preview-control-hover: rgba(255, 255, 255, 0.06);
}
.nc-preview[data-nc-preview-theme="light"] {
  --nc-preview-outer: #2469d9;
  --nc-preview-inner: #6f85dc;
  --nc-preview-hole: #df5f3f;
  --nc-preview-slot: #df5f3f;
  --nc-preview-marking: #51627a;
  --nc-preview-canvas-bg: #f7faff;
  --nc-preview-canvas-glow: rgba(59, 130, 246, 0.14);
  --nc-preview-canvas-grid: rgba(31, 41, 55, 0.12);
  --nc-preview-control-bg: rgba(15, 23, 42, 0.04);
  --nc-preview-control-hover: rgba(15, 23, 42, 0.08);
}
.nc-preview[data-nc-preview-theme="dwg"] {
  /* DWG-like: light paper + monochrome black geometry. */
  --nc-preview-outer: #101010;
  --nc-preview-inner: #101010;
  --nc-preview-hole: #101010;
  --nc-preview-slot: #101010;
  --nc-preview-marking: #101010;
  --nc-preview-canvas-bg: #ffffff;
  --nc-preview-canvas-glow: rgba(0, 0, 0, 0.02);
  --nc-preview-canvas-grid: rgba(0, 0, 0, 0.09);
  --nc-preview-control-bg: rgba(0, 0, 0, 0.03);
  --nc-preview-control-hover: rgba(0, 0, 0, 0.07);
}
.nc-preview__legend {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}
.nc-preview__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.swatch {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 2px;
}
.swatch--outer {
  background: var(--nc-preview-outer);
}
.swatch--inner {
  background: repeating-linear-gradient(
    90deg,
    var(--nc-preview-inner) 0 4px,
    transparent 4px 8px
  );
}
.swatch--hole,
.swatch--slot {
  width: 12px;
  height: 8px;
  border-radius: 4px;
  background: var(--nc-preview-hole);
  opacity: 0.85;
}
.swatch--slot {
  width: 18px;
  border-radius: 999px;
  background: var(--nc-preview-slot);
}
.swatch--marking {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--nc-preview-marking);
  position: relative;
}
.swatch--marking::before,
.swatch--marking::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 1px;
  background: var(--nc-preview-marking);
  transform: translate(-50%, -50%);
}
.swatch--marking::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* In full-width mode the preview panel must grow to fill its grid cell so
   the canvas can in turn fill the remaining viewport height. */
/* Fixed preview frame: the canvas is pinned to a specific height so the
   preview never changes size from file to file or when the sidebar grows.
   The preview panel therefore sizes to its content (header + canvas). */
.page--wide .nc-preview {
  padding-bottom: 1rem;
}
.page--wide .nc-preview .nc-panel__header {
  margin-bottom: 0.75rem;
}
.page--wide .nc-preview__canvas {
  /* Preview frame dimensions — change --nc-preview-h on <body> or a page
     to resize. Width is the grid column width. `min-height` is kept low
     so the clamp in --nc-preview-h can safely shrink the frame on short
     viewports without forcing page overflow. */
  height: var(--nc-preview-h, 640px);
  min-height: 320px;
  flex: none;
}

.nc-preview__canvas {
  position: relative;
  min-height: min(78vh, 900px);
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(
      800px 320px at 50% 20%,
      var(--nc-preview-canvas-glow),
      transparent 70%
    ),
    var(--nc-preview-canvas-bg);
  background-image:
    linear-gradient(var(--nc-preview-canvas-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nc-preview-canvas-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.nc-preview__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Keep strokes visually constant regardless of zoom level. This matters on
   the NC View page: without it, zooming in to see a tiny marking would make
   the contour lines bloated and detail would blur together. */
.nc-preview__svg :is(line, path, circle, rect) {
  vector-effect: non-scaling-stroke;
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-preview__outer path {
  stroke-width: 1.6px !important;
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-preview__inner path,
.nc-preview[data-nc-preview-theme="dwg"] .nc-preview__holes circle,
.nc-preview[data-nc-preview-theme="dwg"] .nc-preview__slots rect,
.nc-preview[data-nc-preview-theme="dwg"] .nc-preview__markings :is(circle, line) {
  stroke-width: 1.2px !important;
}

/* Debug overlay: the gDebug group holds vertex markers. It's hidden unless
   the user toggles the Debug button in the preview toolbar. */
.nc-preview__debug {
  display: none;
}
.nc-preview__svg.is-debug .nc-preview__debug {
  display: inline;
}

/* In debug mode, override the production palette so each entity type is
   trivially distinguishable and mis-grouped geometry stands out. */
.nc-preview__svg.is-debug .nc-preview__outer {
  stroke: #2ecc71;
}
.nc-preview__svg.is-debug .nc-preview__inner {
  stroke: #e74c3c;
}
.nc-preview__svg.is-debug .nc-preview__holes {
  fill: #9b59b6;
  stroke: #9b59b6;
  fill-opacity: 0.45;
}
.nc-preview__svg.is-debug .nc-preview__slots {
  fill: #f1c40f;
  stroke: #f1c40f;
  fill-opacity: 0.4;
}
.nc-preview__svg.is-debug .nc-preview__markings {
  stroke: #1abc9c;
}
.nc-preview__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  text-align: center;
  padding: 1rem;
}
.nc-preview__canvas.is-panning {
  cursor: grabbing;
}
.nc-preview__canvas[data-nc-measure-mode="h"],
.nc-preview__canvas[data-nc-measure-mode="v"],
.nc-preview__canvas[data-nc-measure-mode="r"] {
  cursor: crosshair;
}
.nc-preview__canvas:has(.nc-preview__empty) {
  cursor: default;
}
/* Prevent pan-drag from triggering text selection across the page. */
.nc-preview__canvas * {
  user-select: none;
  -webkit-user-select: none;
}

/* --- zoom toolbar (preview header) ----------------------------- */
.nc-preview__controls {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--nc-preview-control-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.nc-measure__controls {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--nc-preview-control-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.nc-zoom-btn,
.nc-zoom-level {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.7rem;
  min-width: 2.1rem;
  height: 2.1rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nc-zoom-btn {
  font-size: 1.1rem;
  font-weight: 600;
}
.nc-zoom-btn + .nc-zoom-level,
.nc-zoom-level + .nc-zoom-btn {
  border-left: 1px solid var(--color-border);
}
.nc-zoom-btn:hover:not(:disabled),
.nc-zoom-level:hover:not(:disabled) {
  background: var(--nc-preview-control-hover);
  color: var(--color-text-strong);
}
.nc-zoom-level {
  min-width: 4rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.nc-zoom-level:hover:not(:disabled) {
  color: var(--color-brand);
}
.nc-zoom-btn:disabled,
.nc-zoom-level:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.nc-zoom-btn:focus-visible,
.nc-zoom-level:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.nc-debug-btn {
  appearance: none;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 0.85rem;
  height: 2.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.nc-debug-btn:hover {
  background: var(--nc-preview-control-hover);
  color: var(--color-text-strong);
}
.nc-debug-btn.is-active {
  background: #ffd166;
  color: #1f1300;
  border-color: #ffd166;
}
.nc-debug-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.nc-preview__icon-btn {
  appearance: none;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nc-preview__icon-btn:hover {
  background: var(--nc-preview-control-hover);
  color: var(--color-text-strong);
}
.nc-preview__icon-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.nc-share-popup {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 1200;
}
.nc-share-popup__card {
  width: min(560px, calc(100vw - 2rem));
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  padding: 1rem;
}
.nc-share-popup__title {
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: 0.35rem;
}
.nc-share-popup__lead {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.nc-share-popup__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.nc-share-popup__input {
  width: 100%;
  height: 2.3rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text);
  padding: 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.nc-share-popup__copy,
.nc-share-popup__close {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  height: 2.3rem;
  padding: 0 0.85rem;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nc-share-popup__copy:hover,
.nc-share-popup__close:hover {
  background: var(--nc-preview-control-hover);
}
.nc-share-popup__meta {
  margin-top: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.nc-share-popup__close {
  margin-top: 0.7rem;
}
.nc-measure-btn,
.nc-measure-clear {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.7rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nc-measure-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.nc-measure-btn + .nc-measure-btn,
.nc-measure-btn + .nc-measure-clear {
  border-left: 1px solid var(--color-border);
}
.nc-measure-clear {
  min-width: auto;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nc-measure-btn:hover,
.nc-measure-clear:hover {
  background: var(--nc-preview-control-hover);
  color: var(--color-text-strong);
}
.nc-measure-btn.is-active {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.nc-measure-btn:focus-visible,
.nc-measure-clear:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}
.nc-measure__hint {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* --- measurement overlay ------------------------------------- */
.nc-preview__measure-layer {
  pointer-events: auto;
}
.nc-measure__annotation :is(line, path, circle, rect, polygon, text) {
  pointer-events: none;
}
.nc-measure__annotation .nc-measure__drag-hit {
  pointer-events: stroke;
}
.nc-measure__annotation .nc-measure__remove,
.nc-measure__annotation .nc-measure__remove * {
  pointer-events: auto;
}
.nc-measure__line {
  stroke: var(--color-brand);
  stroke-width: 0.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.nc-measure__drag-hit {
  stroke: transparent;
  stroke-width: 14;
  fill: none;
  pointer-events: stroke;
}
.nc-measure__drag-hit--h {
  cursor: ns-resize;
}
.nc-measure__drag-hit--v {
  cursor: ew-resize;
}
.nc-measure__annotation.is-draggable-hover .nc-measure__line--dim {
  stroke: #fbbf24;
  stroke-width: 0.75;
}
.nc-measure__annotation.is-draggable-hover .nc-measure__arrow,
.nc-measure__annotation.is-draggable-hover .nc-measure__text {
  fill: #fbbf24;
  stroke: rgba(0, 0, 0, 0.8);
}
.nc-measure__annotation.is-draggable-hover .nc-measure__drag-hit {
  stroke: rgba(251, 191, 36, 0.18);
}
.nc-measure__remove {
  cursor: pointer;
}
.nc-measure__remove-box {
  fill: rgba(17, 24, 39, 0.94);
  stroke: rgba(251, 191, 36, 0.9);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}
.nc-measure__remove-icon {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 0.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.nc-measure__remove:hover .nc-measure__remove-box {
  fill: rgba(55, 65, 81, 0.95);
}
.nc-measure__remove:hover .nc-measure__remove-icon {
  stroke: #fde68a;
}
.nc-measure__line--ext {
  opacity: 0.7;
  stroke-dasharray: 2.2 1.7;
}
.nc-measure__line--dim {
  opacity: 0.95;
}
.nc-measure__arrow {
  fill: var(--color-brand);
  stroke: none;
  vector-effect: non-scaling-stroke;
}
.nc-measure__center {
  fill: var(--color-brand);
  stroke: none;
  vector-effect: non-scaling-stroke;
}
.nc-measure__text {
  fill: var(--color-brand);
  font-family: var(--font-mono);
  font-size: 3.8px;
  font-weight: 600;
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.75);
  stroke-width: 0.65px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.nc-measure__hover-line {
  stroke: #fbbf24;
  stroke-width: 0.7;
  stroke-dasharray: 2.2 1.7;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
}
.nc-measure__hover-point {
  fill: #fbbf24;
  stroke: #111827;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.nc-measure__pending-point {
  fill: #22c55e;
  stroke: #052e16;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.nc-preview[data-nc-preview-theme="light"] .nc-measure__line,
.nc-preview[data-nc-preview-theme="light"] .nc-measure__center,
.nc-preview[data-nc-preview-theme="light"] .nc-measure__text {
  stroke: #2563eb;
  fill: #2563eb;
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__line,
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__center,
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__text,
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__arrow {
  stroke: #1f2937;
  fill: #1f2937;
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__line {
  stroke-width: 0.65;
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__text {
  stroke: rgba(255, 255, 255, 0.95);
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__hover-point {
  fill: #f59e0b;
  stroke: #111827;
}
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__pending-point {
  fill: #16a34a;
  stroke: #ffffff;
}
.nc-preview[data-nc-preview-theme="light"] .nc-measure__annotation.is-draggable-hover .nc-measure__line--dim,
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__annotation.is-draggable-hover .nc-measure__line--dim {
  stroke: #d97706;
}
.nc-preview[data-nc-preview-theme="light"] .nc-measure__annotation.is-draggable-hover .nc-measure__arrow,
.nc-preview[data-nc-preview-theme="light"] .nc-measure__annotation.is-draggable-hover .nc-measure__text,
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__annotation.is-draggable-hover .nc-measure__arrow,
.nc-preview[data-nc-preview-theme="dwg"] .nc-measure__annotation.is-draggable-hover .nc-measure__text {
  fill: #d97706;
}
.nc-preview[data-nc-preview-theme="light"] .nc-measure__text {
  stroke: rgba(255, 255, 255, 0.85);
}
.nc-preview[data-nc-preview-theme="light"] .nc-measure__hover-point {
  stroke: #ffffff;
}
.nc-preview[data-nc-preview-theme="light"] .nc-measure__pending-point {
  stroke: #ffffff;
}
.nc-theme-switcher {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--nc-preview-control-bg);
  overflow: hidden;
}
.nc-theme-option {
  appearance: none;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  padding: 0 0.65rem;
  height: 2.1rem;
  min-width: 2.1rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nc-theme-option + .nc-theme-option {
  border-left: 1px solid var(--color-border);
}
.nc-theme-option:hover {
  background: var(--nc-preview-control-hover);
  color: var(--color-text-strong);
}
.nc-theme-option.is-active {
  background: var(--color-brand-soft);
  border-color: rgba(124, 196, 255, 0.28);
  color: var(--color-brand);
}
.nc-theme-option:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

/* --- responsive ------------------------------------------------ */
@media (max-width: 960px) {
  .nc-workspace__grid {
    grid-template-columns: 1fr;
  }
  .nc-workspace__side {
    position: static;
  }
  .nc-preview__canvas {
    min-height: 60vh;
  }
  /* On narrow screens the fit-to-viewport trick fights the stacked layout.
     Fall back to natural flow: the page scrolls and each panel sizes to its
     content, which is friendlier on tablets/phones. */
  .page--wide {
    min-height: 0;
    display: block;
  }
  .page--wide .page__main,
  .page--wide .nc-workspace,
  .page--wide .nc-workspace > .container,
  .page--wide .nc-workspace__grid,
  .page--wide .nc-workspace__main {
    display: block;
    min-height: 0;
    height: auto;
  }
  .page--wide .nc-workspace__side {
    max-height: none;
    overflow: visible;
    margin-bottom: 1.25rem;
  }
  .page--wide .nc-preview__canvas {
    flex: none;
    min-height: 60vh;
  }
}