/* noda.css -- the Noda Technologies cobrand for this preview.
   Loaded AFTER tokens.css so it overrides only the brand-swappable surface. Structure and
   layout stay in app.css and are untouched, which is the whole point of the token contract:
   a cobrand is a colour and logo swap, never a fork of the CSS.

   Palette sampled from the real Noda mark (assets/logo_noda.png), which is a left-to-right
   gradient: deep indigo #000078 -> purple #700098 -> magenta #9800a8. The three stops below
   are taken from that gradient rather than invented, so the chrome and the wordmark agree.

   Note for anyone porting this back: do NOT push these values into the shared tokens.css.
   That file's own header records that a purple default was a Noda cobrand leaking into the
   Mindmatrix baseline once already. Cobrands live in their own sheet. */
:root {
  --brand-primary: #7a0fa5;        /* buttons, links, active nav, chart primary */
  --brand-primary-dark: #5a0a7c;   /* hover */
  --brand-primary-soft: #f4e7fb;   /* active nav pill, soft fills */
  --brand-accent: #c010c8;         /* magenta, the right-hand end of the mark */
  --brand-navy-1: #0b0140;
  --brand-navy-2: #2a0068;
  --brand-navy-3: #1b0078;
  --brand-glow: rgba(122, 15, 165, 0.42);
  --brand-hero-from: #0b0140;
  --brand-hero-to: #2a0068;
  --brand-link: #7a0fa5;
  --brand-logo: url('assets/logo_noda.png');
  --brand-logo-white: url('assets/logo_noda.png');
}

/* the preview ships one page, so the shell is simplified: no mega-menu panels, no drawers */
.frame { min-height: 100vh; display: flex; flex-direction: column; background: var(--chrome-page); }
.content { flex: 1; }

/* Breathing room above the logo and nav (Josh, 2026-07-28: "a little crammed"). The shared rule
   is `padding: 0 26px` with the row height coming from the logo alone, which reads tight once the
   Noda mark sits in it. Set here rather than in app.css: the demo-env clone's topbar is measured
   against the real product's own metrics, so changing it there would break those screens. */
.topbar { padding-top: 18px; padding-bottom: 14px; }
.topbar .logo { background-image: var(--brand-logo); background-repeat: no-repeat; background-position: left center; background-size: contain; width: 150px; height: 42px; display: block; flex: none; }
.mainnav .nav-link { cursor: default; }

/* The shared user-menu label ships text-transform:uppercase, which breaks the standing no
   all-caps rule. Overridden here rather than edited in app.css, which other screens depend on. */
.pdd-label { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* the menu's monogram slot takes a photo the same way the topbar avatar does */
.pdd-mono { overflow: hidden; padding: 0; }
.pdd-mono img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* a preview banner, so nobody mistakes an open demo page for live client data */
.preview-note { background: #fff; border-bottom: 1px solid var(--chrome-border); padding: 9px 30px; font-size: 12.5px; color: var(--chrome-text-muted); display: flex; gap: 9px; align-items: center; }
.preview-note b { color: var(--chrome-text); font-weight: 600; }
.preview-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); flex: none; }