/* ============================================================
   NAZA\LAB wireframe layer — shared by every tool page (Oct 17, 2026)
   ------------------------------------------------------------
   Loaded LAST on each page (after styles.css and the page's own <style>), so it
   re-points the DXD tokens and flattens components without editing each tool's CSS.
   Same language as the app shell (shell.css "NAZA\LAB wireframe"): white ground,
   black hairlines, square corners, monospace labels, no shadows, no accent colour.
   Yellow tokens become greys so every "highlight" stays readable with black text.
   Applies to NAZA and EJE alike. Client-branded tools (Sub Builder, Melanoma Cam,
   Open Call) do not load this file on purpose.
   ============================================================ */
:root, body, body.ws-eje {
  /* styles.css tokens (Sign In, Signature Builder, Rooms, Settings) */
  --white: #FFFFFF; --black: #000000; --black-80: #3D3D3D;
  --yellow: #E9E9E9; --yellow-60: #D6D6D6; --yellow-30: #F3F3F3;
  --analog: #FFFFFF; --analog-light: #F6F6F6; --analog-dark: #CFCFCF;
  --eje-red: #000000;
  --font-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-grotesk: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-tagline: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Prospects (careers) tokens */
  --tbwa-white: #FFFFFF; --tbwa-black: #000000; --tbwa-black-80: #3D3D3D;
  --tbwa-yellow: #E9E9E9; --tbwa-yellow-60: #D6D6D6; --tbwa-yellow-30: #F3F3F3;
  --tbwa-analog: #FFFFFF; --tbwa-analog-light: #F6F6F6; --tbwa-analog-dark: #CFCFCF;
  --radius-pill: 0;
  /* News Finder (monitor) tokens */
  --black80: #3D3D3D; --yellow30: #F3F3F3;
  --analog-d: #CFCFCF; --analog-l: #F6F6F6;
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --grot: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html, body { background: #FFFFFF; }
body { color: #000; }

/* flat, square, still */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; }
*:hover { transform: none !important; }
::selection { background: #000; color: #fff; }

/* type: big sans headlines, mono structure */
h1, h2, h3, .serif-display, .hero h1, .panel h2, .card h3 { font-family: var(--font-title) !important; font-weight: 400 !important; letter-spacing: -0.02em; }
.serif-display em, h1 em, h2 em { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.kicker, .badge, .chip, .navlink, .btn, button, .mono, label, th, .stamp, .um-label, .site-footer {
  font-family: var(--font-mono) !important; letter-spacing: .04em;
}

/* buttons: square, mono, black or outline */
.btn, button.btn { border: 1px solid #000 !important; background: #fff; color: #000; text-transform: uppercase; }
.btn.yellow, .btn.primary, .btn.black { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.btn.yellow:hover, .btn.primary:hover, .btn.black:hover { background: #fff !important; color: #000 !important; }
.btn.ghost:hover, .btn:hover { background: #F3F3F3; }

/* surfaces: hairline boxes */
.card, .panel, .modal, .notice, .empty, .stamp, table { border-color: #000 !important; }
.card:hover { outline: 1px solid #000; }
.badge, .chip { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
.badge.live, .chip.active { background: #000 !important; color: #fff !important; }
.badge.building { border-style: dashed !important; }
input, select, textarea { border: 1px solid #000 !important; background: #fff !important; font-family: var(--font-body); }
input:focus, select:focus, textarea:focus { outline: 2px solid #000 !important; outline-offset: 0; }

/* chrome that only shows outside the app frame */
.portal-header, .site-footer { background: #fff !important; border-color: #000 !important; }
.wordmark { font-family: var(--font-mono) !important; font-weight: 700 !important; letter-spacing: .02em; }
.wordmark .slash, .wordmark .dot-mark { color: #000 !important; -webkit-text-stroke: 0 !important; background: none !important; }
.live-dot { background: #000 !important; border-color: #000 !important; }

/* ---------- Motion (v0.8, Oct 18) — page-to-page ----------
   Moving between /app/ and a tool page (same origin) cross-fades instead of flashing white.
   Browsers without cross-document view transitions just navigate as before. */
/* @view-transition { navigation: auto; } — OFF since v0.8.1 (Oct 18): a cross-document transition inside the
   tool iframe, running while the shell's own view transition was in flight, froze the tab in Chrome. */
@keyframes nz-out { to { opacity: 0; } }
@keyframes nz-in  { from { opacity: 0; transform: translateY(8px); } }
::view-transition-old(root) { animation: nz-out .14s ease-in both; }
::view-transition-new(root) { animation: nz-in .28s cubic-bezier(.2,.7,.2,1) .04s both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   v0.9 KIT (Oct 20, 2026) — one wireframe for the app, every tool and the login
   ------------------------------------------------------------
   Source of truth = the app shell (shell.css "NAZA\LAB wireframe"). These rules make every
   page that loads this file use the same pieces as the shell:
     type     sans (Helvetica Neue) for reading, IBM Plex Mono for structure (labels, buttons, tabs)
     titles   30px sans 400, -0.02em; landing titles (Studio, Assets, login) 34px — like the home greeting
     labels   mono 11px, uppercase, .08em, #3d3d3d — no marks, no extra tracking
     buttons  mono 12px 600, sentence case, 7px 14px, 1px black; primary black, secondary white; hover inverts
     tabs     mono 12px, 1px black boxes in a row; the active one is black
     inputs   14px sans, 1px black, focus thickens the line
     cards    1px black; clickable ones lift with the hard 4px offset on hover (no soft shadows)
     menus    popovers and dialogs carry the same hard offset
   Inside the app (html.nz-embed) a tool shows no chrome of its own: no logo row, no
   "Back to NAZA\LAB", no workspace switch — the shell already has them.
   ============================================================ */
:root {
  --wf-ink: #000; --wf-2: #3D3D3D; --wf-3: #8A8A8A; --wf-soft: #D6D6D6; --wf-fill: #F3F3F3;
  --wf-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --wf-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wf-lift: 4px 4px 0 rgba(0,0,0,.14);
}
body { font-family: var(--wf-sans); }

/* titles */
.hero h1, h1.serif-display, .mast h1, #app > header > h1, .st-head h1 {
  font: 400 30px/1.1 var(--wf-sans) !important; letter-spacing: -0.02em !important; margin: 6px 0 0 !important; text-transform: none !important;
}
.hero h1 em, h1.serif-display em, .serif-display em { font-style: normal !important; text-decoration: none !important; }
.hero { margin-bottom: 28px !important; }
.hero .sub, .mast .sub { font-size: 13.5px !important; color: var(--wf-3) !important; margin-top: 8px !important; }
.panel h2, .modal h2, .gate__box h2, #login h2 { font: 400 20px/1.2 var(--wf-sans) !important; letter-spacing: -0.01em; }

/* labels */
.kicker, .grid-label, .sec-k, .src, label.f, .field label, .meta-row, .mast__meta {
  font-family: var(--wf-mono) !important; font-weight: 500 !important; font-size: 11px !important;
  letter-spacing: .08em !important; text-transform: uppercase; color: var(--wf-2);
}
.kicker::before { content: none !important; }
.kicker .bs { display: none; }
.vchip { font: 500 10px/1 var(--wf-mono) !important; letter-spacing: .04em !important; background: #000 !important; color: #fff !important; border: 0 !important; padding: 3px 6px !important; }

/* buttons */
.btn, a.btn, button.btn, .rowbtn, .as-up, .gen, .srcc button, .dacts button, .acts button {
  font: 600 12px/1.2 var(--wf-mono) !important; letter-spacing: .02em !important; text-transform: none !important;
  padding: 7px 14px !important; border: 1px solid #000 !important; border-radius: 0 !important;
  background: #fff !important; color: #000 !important; transform: none !important; cursor: pointer;
}
.btn.yellow, .btn.primary, .btn.black, .btn-k, .btn-y, .btn--black, .btn--yellow, .as-up, .gen, .dacts button.k, .acts button.done {
  background: #000 !important; color: #fff !important;
}
.btn:hover, .rowbtn:hover, .srcc button:hover, .dacts button:hover, .acts button:hover { background: #000 !important; color: #fff !important; }
.btn.yellow:hover, .btn.primary:hover, .btn.black:hover, .btn-k:hover, .btn-y:hover, .btn--black:hover, .btn--yellow:hover, .as-up:hover, .gen:hover { background: #fff !important; color: #000 !important; }
.btn:disabled, .rowbtn:disabled { opacity: .45 !important; cursor: default; }
.btn.small, .btn--small { padding: 6px 12px !important; font-size: 11.5px !important; }

/* tabs */
.tabs-row, .tabs, .day-tabs { display: flex !important; gap: 6px !important; flex-wrap: wrap; border-bottom: 0 !important; }
.tabs-row .navlink, .tabs .tab, .tab, .theme-toggle button, .chips .chip, .filters .chip, .day-tabs .chip {
  font: 500 12px/1.2 var(--wf-mono) !important; letter-spacing: .02em !important; text-transform: none !important;
  padding: 6px 12px !important; border: 1px solid #000 !important; border-radius: 0 !important; margin: 0 !important;
  background: #fff !important; color: #000 !important;
}
.tabs-row .navlink.active, .tabs .tab.on, .tab.on, .day-tabs .chip.active, .theme-toggle button.active, .chips .chip.on, .chips .chip.active, .filters .chip.active { background: #000 !important; color: #fff !important; }
.tab .n { font: inherit !important; color: inherit !important; opacity: .55; }

/* inputs */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
  font-family: var(--wf-sans); border: 1px solid #000 !important; border-radius: 0 !important; background: #fff !important;
}
input:focus, select:focus, textarea:focus { outline: none !important; box-shadow: inset 0 0 0 1px #000 !important; }
input[type=checkbox], input[type=radio] { accent-color: #000; }

/* cards, panels, menus */
.card, .panel, .pcard, .acard, .gcard, .gate__box, #login { border: 1px solid #000 !important; border-radius: 0 !important; background: #fff; }
.card:hover, .pcard:hover, .acard:hover, .work-card:hover { box-shadow: var(--wf-lift) !important; outline: 0 !important; }
.modal, .pop, .pop-model, .user-menu, .ws-menu { border: 1px solid #000 !important; box-shadow: var(--wf-lift) !important; }
.toast, #toast { font: 500 12px/1.3 var(--wf-mono) !important; background: #000 !important; color: #fff !important; border-radius: 0 !important; }

/* tables */
th { font: 500 10px/1.3 var(--wf-mono) !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--wf-2) !important; background: transparent !important; border-bottom: 1px solid #000 !important; }
td { border-bottom-color: var(--wf-soft) !important; }
tr:hover td { background: var(--wf-fill) !important; }

/* inside the app: no tool chrome of its own */
html.nz-embed .mast__top, html.nz-embed #app > header > .lockup, html.nz-embed #app > header > .kicker,
html.nz-embed a[data-portal-link], html.nz-embed .portal-header, html.nz-embed .site-footer { display: none !important; }
html.nz-embed .portal-main { padding-top: 36px !important; }
html.nz-embed body { padding-top: 0; }

/* login: the same canvas as the empty home */
body:has(.gate-min) { background-image: radial-gradient(#cfcfcf 1px, transparent 1.2px) !important; background-size: 18px 18px !important; }
.gate-min .wordmark { font: 700 28px/1 var(--wf-mono) !important; letter-spacing: .02em !important; background: #fff; padding: 4px 8px; }
.gate-min .kicker { background: #fff; padding: 2px 6px; color: var(--wf-3) !important; }
.gate-min .cta { margin-top: 32px !important; }
.gate-min .btn { padding: 10px 18px !important; font-size: 12.5px !important; }
.gate-min .btn:hover { box-shadow: var(--wf-lift) !important; }

/* content that happens to live in a <button> reads in sans, like the shell's lists (labels stay mono) */
button.row, button.row .row__name, button.row .row__sub, button.row .cell, .rail button, .rail a { font-family: var(--wf-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
button.row .st, button.row .res, button.row .rep, button.row .cell--muted, button.row .num { font-family: var(--wf-mono) !important; }
.count { font: 400 20px/1.1 var(--wf-sans) !important; }
hr.rule { border-top-width: 1px !important; }