:root {
  --nvz-surface: #F7F8FB;
  --nvz-card: #FFFFFF;
  --nvz-ink: #1B1F2A;
  --nvz-muted: #8A93A6;
  --nvz-accent: #4553F5;
  --nvz-border: #E2E5EF;
  --nvz-radius: 12px;
}
[data-theme="dark"] {
  --nvz-surface: #12172B;
  --nvz-card: #1A2036;
  --nvz-ink: #EDEFF7;
  --nvz-muted: #8A93A6;
  --nvz-border: #2A3050;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--nvz-surface);
  color: var(--nvz-ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.nvz-surface { background: var(--nvz-surface); color: var(--nvz-ink); }
.nvz-display, .nvz-h1 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.01em; }
.nvz-h1 { font-size: 22px; font-weight: 600; }
.nvz-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.nvz-muted { color: var(--nvz-muted); }
.nvz-border { border-color: var(--nvz-border); }
.nvz-link { color: var(--nvz-accent); cursor: pointer; background: none; border: none; padding: 0; }
.nvz-link:hover { text-decoration: underline; }

.nvz-card {
  background: var(--nvz-card);
  border: 1px solid var(--nvz-border);
  border-radius: var(--nvz-radius);
  box-shadow: 0 1px 2px rgba(20,25,50,.04);
}

.nvz-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--nvz-border);
  background: var(--nvz-card);
  color: var(--nvz-ink);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: outline-color 150ms ease;
}
.nvz-input:focus { outline: 2px solid var(--nvz-accent); outline-offset: 1px; }
.nvz-label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; color: var(--nvz-muted); }

.nvz-btn-primary, .nvz-btn-secondary, .nvz-btn-danger, .nvz-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 14px;
  cursor: pointer; border: 1px solid transparent; transition: opacity 150ms ease, background 150ms ease;
  /* A link wearing a button's clothes is still a link to the browser, and the
     default underline cut straight through the label. */
  text-decoration: none;
}
.nvz-btn-primary { background: var(--nvz-accent); color: white; }
.nvz-btn-primary:hover { opacity: .92; }
.nvz-btn-secondary { background: var(--nvz-card); color: var(--nvz-ink); border-color: var(--nvz-border); }
.nvz-btn-secondary:hover { background: var(--nvz-surface); }
.nvz-btn-danger { background: #E5484D1a; color: #E5484D; border-color: #E5484D55; }
.nvz-btn-danger:hover { background: #E5484D2a; }
.nvz-btn-ghost { background: transparent; color: var(--nvz-muted); }
.nvz-btn-ghost:hover { color: var(--nvz-ink); }

.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge-pulse { animation: nvz-pulse 1.8s ease-in-out infinite; }
@keyframes nvz-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .badge-pulse { animation: none; } }

.nvz-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--nvz-border); background: var(--nvz-card);
  font-size: 13px; cursor: pointer; color: var(--nvz-muted);
}
.nvz-chip.active { background: var(--nvz-accent); color: white; border-color: var(--nvz-accent); }

.nvz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nvz-table th { text-align: left; font-weight: 500; color: var(--nvz-muted); font-size: 12.5px; padding: 10px 16px; border-bottom: 1px solid var(--nvz-border); }
.nvz-table td { padding: 10px 16px; border-bottom: 1px solid var(--nvz-border); }
.nvz-table tr:last-child td { border-bottom: none; }
.nvz-row-clickable { cursor: pointer; }
.nvz-row-clickable:hover { background: var(--nvz-surface); }

.nvz-dl { display: grid; grid-template-columns: 140px 1fr; row-gap: 8px; font-size: 14px; }
.nvz-dl dt { color: var(--nvz-muted); }

.nvz-sidebar {
  width: 232px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--nvz-card); border-right: 1px solid var(--nvz-border);
}
.nvz-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 8px;
  font-size: 14px; color: var(--nvz-muted); margin: 2px 0; text-decoration: none;
}
.nvz-nav-item:hover { background: var(--nvz-surface); color: var(--nvz-ink); }
.nvz-nav-item.active { background: var(--nvz-accent); color: white; }

.nvz-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; border-bottom: 1px solid var(--nvz-border); background: var(--nvz-card);
}
.nvz-icon-btn { padding: 6px; border-radius: 8px; border: 1px solid var(--nvz-border); background: var(--nvz-card); cursor: pointer; color: var(--nvz-muted); }
.nvz-icon-btn:hover { color: var(--nvz-ink); }
.nvz-avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--nvz-accent); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.nvz-dropdown {
  position: absolute; top: 36px; left: 0; right: 0; background: var(--nvz-card); border: 1px solid var(--nvz-border);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(20,25,50,.12); max-height: 320px; overflow-y: auto; z-index: 40;
}
.nvz-dropdown-item { display: block; padding: 8px 14px; font-size: 13px; text-decoration: none; color: var(--nvz-ink); }
.nvz-dropdown-item:hover { background: var(--nvz-surface); }

.nvz-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,18,35,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
/*
 * `overflow-auto` is a Tailwind class name, not a CSS declaration. Written here
 * it is not a property at all, so the browser dropped it — and a modal capped
 * at 90vh with no way to scroll simply cut off whatever did not fit. On the
 * Edit order dialog that was the Save button: the only way to reach it was to
 * zoom the browser out to 50%.
 */
.nvz-modal {
  background: var(--nvz-card); border-radius: var(--nvz-radius);
  padding: 24px; width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto; overflow-x: hidden;
}

/*
 * And once it scrolls, the button that finishes the job should not be the thing
 * you have to go looking for. It rides at the bottom of the dialog while the
 * fields scroll past behind it.
 */
.nvz-modal .nvz-btn-primary.w-full {
  position: sticky; bottom: -24px; z-index: 2;
  margin-bottom: 4px;
  box-shadow: 0 0 0 6px var(--nvz-card), 0 -10px 14px -6px var(--nvz-card);
}

.nvz-toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.nvz-toast {
  background: var(--nvz-ink); color: var(--nvz-surface); padding: 10px 16px; border-radius: 10px; font-size: 14px;
  opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease;
  /* An error message can be a full sentence with a file and line in it. Without
     a width it ran off the edge of the screen on one line and was unreadable. */
  max-width: min(460px, calc(100vw - 40px));
  overflow-wrap: anywhere; line-height: 1.45; text-align: left;
}
.nvz-toast.show { opacity: 1; transform: translateY(0); }
.nvz-toast-error { background: #E5484D; color: white; }

.nvz-error-box { background: #E5484D1a; border: 1px solid #E5484D55; color: #b23338; padding: 10px 14px; border-radius: 10px; font-size: 13px; }
[data-theme="dark"] .nvz-error-box { color: #ff9a9d; }
.nvz-empty { text-align: center; color: var(--nvz-muted); padding: 28px; font-size: 14px; }
.nvz-loading { color: var(--nvz-muted); padding: 24px; font-size: 14px; }

.pipeline-node { cursor: default; }
.pipeline-node:hover circle { filter: brightness(1.1); }

/* Utility classes used inline (kept minimal — no Tailwind build step) */
.flex{display:flex}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-center{align-items:center}
.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.min-h-screen{min-height:100vh}.min-w-0{min-width:0}
.w-full{width:100%}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}
.px-2{padding-left:8px;padding-right:8px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
.py-5{padding-top:20px;padding-bottom:20px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}
.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.space-y-2>*+*{margin-top:8px}
.space-y-3>*+*{margin-top:12px}.space-y-6>*+*{margin-top:24px}.grid{display:grid}.grid-cols-1{grid-template-columns:1fr}
.gap-6{gap:24px}.rounded{border-radius:10px}.font-medium{font-weight:500}.font-semibold{font-weight:600}
.font-normal{font-weight:400}.text-xs{font-size:11px}.text-sm{font-size:13px}.text-lg{font-size:17px}
.text-xl{font-size:19px}.text-2xl{font-size:22px}.text-3xl{font-size:28px}.text-center{text-align:center}
.hidden{display:none}.relative{position:relative}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
.divide-y>*+*{border-top:1px solid var(--nvz-border)}.border-b{border-bottom:1px solid var(--nvz-border)}
.border-t{border-top:1px solid var(--nvz-border)}.border-l-2{border-left:2px solid}.flex-wrap{flex-wrap:wrap}
.whitespace-nowrap{white-space:nowrap}.list-disc{list-style:disc}.list-inside{list-style-position:inside}
.tracking-widest{letter-spacing:.2em}.inline-flex{display:inline-flex}
@media (min-width: 768px) {
  .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .lg\:col-span-2{grid-column:span 2 / span 2}
}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}

/* Additional utility classes (found via usage audit) */
.h-4{height:16px}.w-4{width:16px}.h-auto{height:auto}.w-24{width:96px}.w-28{width:112px}.w-40{width:160px}
.w-auto{width:auto !important}.mb-0{margin-bottom:0}.mb-5{margin-bottom:20px}.mb-8{margin-bottom:32px}
.mt-0{margin-top:0}.p-3{padding:12px}.pl-3{padding-left:12px}.pt-3{padding-top:12px}.py-1{padding-top:4px;padding-bottom:4px}
.space-y-0>*+*{margin-top:0}.hover\:underline:hover{text-decoration:underline}
input[type="checkbox"]{width:auto}

/* ---------------------------------------------------------------------------
   Phones. The sidebar used to be a fixed 232px column at every width, which on
   a 375px phone left about 140px for the actual work — unusable for a worker
   ticking off sites. Below 768px it slides in over the page instead, and tap
   targets grow to a comfortable size.
   --------------------------------------------------------------------------- */
.nvz-sidebar-backdrop { display: none; }
#menu-btn { display: none; }

@media (max-width: 767px) {
  #menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  .nvz-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 260px;
    transform: translateX(-100%); transition: transform 180ms ease;
    box-shadow: 0 0 40px rgba(15,18,35,.18);
  }
  .nvz-sidebar.open { transform: translateX(0); }

  .nvz-sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15,18,35,.45);
  }

  /* Comfortable thumb targets */
  .nvz-nav-item { padding: 12px 14px; font-size: 15px; }
  .nvz-btn-primary, .nvz-btn-secondary, .nvz-btn-danger, .nvz-btn-ghost { padding: 11px 16px; }
  .nvz-input { padding: 11px 12px; font-size: 16px; }   /* 16px stops iOS zooming on focus */

  main { padding: 16px !important; }
  .nvz-topbar { padding: 10px 14px; gap: 10px; }
  .nvz-table th, .nvz-table td { padding: 9px 10px; }
  .nvz-dl { grid-template-columns: 1fr; row-gap: 2px; }
  .nvz-dl dt { margin-top: 8px; font-size: 12px; }
  .nvz-modal { padding: 18px; max-height: 94vh; }
  .nvz-h1 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .nvz-sidebar { transition: none; }
}

/* A number the eye lands on first — used by the worker and QA dashboards. */
.nvz-bignum { font-size: 44px; line-height: 1.05; font-weight: 600; }
@media (max-width: 767px) { .nvz-bignum { font-size: 36px; } }

.nvz-tile-link { text-decoration: none; color: inherit; display: block; }
.nvz-tile-link:hover { border-color: var(--nvz-accent); }

/* ---------------------------------------------------------------------------
   Payments table. Previously each role had its own table with its own columns
   (the QA one carried thirteen), so the page read as three unrelated grids and
   an empty header when a team had no workers. Now every person is one row in
   one table and the role-specific arithmetic lives in the detail panel below.
   --------------------------------------------------------------------------- */
.text-right { text-align: right; }
.ml-2 { margin-left: 8px; }
.leading-relaxed { line-height: 1.65; }

.nvz-pay-table th, .nvz-pay-table td { vertical-align: top; }
.nvz-pay-table td { padding-top: 12px; padding-bottom: 12px; }
.nvz-warn-text { color: #F5A524; }

.nvz-pay-detail {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 240px);
  gap: 48px;
  padding: 14px 16px 18px;
}
@media (max-width: 767px) {
  .nvz-pay-detail { grid-template-columns: 1fr; gap: 20px; }
}

.nvz-kv { width: 100%; border-collapse: collapse; font-size: 13px; max-width: 460px; }
.nvz-kv td { padding: 5px 0; border-bottom: 1px solid var(--nvz-border); }
.nvz-kv tr:last-child td { border-bottom: none; font-weight: 600; }
.nvz-kv td:first-child { color: var(--nvz-muted); padding-right: 16px; }

/* Right-aligned money headers need to beat ".nvz-table th"'s own alignment. */
.nvz-table th.text-right, .nvz-table td.text-right { text-align: right; }

.nvz-pay-detail-cell { background: rgba(127,127,127,.05); padding: 0 !important; }

/* The app-wide stat grids asked for four columns on desktop, but a later bare
   ".grid-cols-2" rule was overriding the md: variant by source order, so every
   one of them sat at two columns. Re-stating them last restores the intent. */
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Phones: eight columns cannot be read side by side on a 390px screen, so each
   person becomes a stacked card with the column name as the label. The child
   combinators matter — the breakdown table lives inside this one, and without
   them it would be flattened too. */
@media (max-width: 767px) {
  .nvz-pay-table,
  .nvz-pay-table > tbody,
  .nvz-pay-table > tbody > tr,
  .nvz-pay-table > tbody > tr > td { display: block; width: 100%; }
  .nvz-pay-table > thead { display: none; }
  /* Block display above would otherwise defeat the [hidden] attribute that
     keeps a collapsed detail panel closed. */
  .nvz-pay-table > tbody > tr[hidden] { display: none; }

  .nvz-pay-table > tbody > tr.nvz-pay-row { border-bottom: 1px solid var(--nvz-border); padding: 12px 0 14px; }
  .nvz-pay-table > tbody > tr > td { border-bottom: none; padding: 4px 14px; }
  .nvz-pay-table > tbody > tr > td[data-label] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  }
  .nvz-pay-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    color: var(--nvz-muted); font-size: 12px; text-align: left;
    flex: 0 0 auto; white-space: nowrap;
  }
  .nvz-cellv { text-align: right; min-width: 0; }
  .nvz-pay-person { padding-bottom: 8px !important; }
  .nvz-pay-person .font-medium { font-size: 15px; }
  .nvz-pay-actions { display: flex !important; gap: 14px; align-items: center; padding-top: 12px !important; }
  .nvz-kv { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Order page.
   Everything used to stack down one column — journey, details, workers, files,
   comments, history, QA reviews — so an order with a long brief scrolled for
   several screens. Tabs show one section at a time, with the facts you check
   at a glance pinned above them.
   --------------------------------------------------------------------------- */
.nvz-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.nvz-order-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--nvz-border); border: 1px solid var(--nvz-border); border-radius: 10px; overflow: hidden;
}
.nvz-fact { background: var(--nvz-surface); padding: 10px 14px; min-width: 0; }
.nvz-fact > div:last-child { font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 767px) { .nvz-order-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nvz-tabs { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
.nvz-tab {
  border: 1px solid transparent; background: none; color: var(--nvz-muted);
  padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.nvz-tab:hover { color: var(--nvz-ink); }
.nvz-tab.is-on {
  color: var(--nvz-ink); background: var(--nvz-surface);
  border-color: var(--nvz-border); border-bottom-color: var(--nvz-surface);
}
.nvz-tab-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--nvz-border); color: var(--nvz-muted);
  font-size: 11px; line-height: 18px; text-align: center;
}

/* The owner pastes a business brief with line breaks; without this it rendered
   as one unbroken wall of text. */
.nvz-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.nvz-brief {
  background: rgba(127,127,127,.06); border: 1px solid var(--nvz-border);
  border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
  max-height: 420px; overflow: auto;
}

/* Totals row under a split order's worker table. */
.nvz-total-row td { font-weight: 600; border-top: 1px solid var(--nvz-border); }

/* ---------------------------------------------------------------------------
   Order journey + history.
   The journey was an SVG with a viewBox and width:100%, so on a two-step order
   it stretched to the card's full width and scaled its circles and labels up
   with it — enormous text around a mostly empty strip. Plain elements keep the
   type at the size it was meant to be, whatever the width.
   --------------------------------------------------------------------------- */
.nvz-journey {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0;
}
.nvz-journey-step {
  position: relative; flex: 0 0 auto; min-width: 132px; max-width: 168px;
  padding: 0 14px 10px 0; display: flex; flex-direction: column; gap: 3px;
}
.nvz-journey-label { overflow-wrap: anywhere; }
/* The line runs from each dot to the next, never past the last one. */
.nvz-journey-step:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; right: 0; top: 7px;
  height: 2px; background: var(--nvz-border);
}
.nvz-journey-dot {
  position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--nvz-surface);
}
.nvz-journey-step.is-loop .nvz-journey-dot { width: 14px; height: 14px; margin-left: 1px; }
.nvz-journey-count { color: #fff; font-size: 9px; font-weight: 600; line-height: 1; }
.nvz-journey-label { font-size: 13px; font-weight: 500; line-height: 1.25; }
.nvz-journey-step.is-now .nvz-journey-label { font-weight: 600; }
.nvz-journey-time { font-size: 11px; color: var(--nvz-muted); }

.nvz-history-day {
  font-size: 11px; color: var(--nvz-muted); text-transform: uppercase; letter-spacing: .04em;
  margin: 14px 0 6px;
}
.nvz-history-day:first-child { margin-top: 0; }
.nvz-history-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 6px 0; border-bottom: 1px solid var(--nvz-border); font-size: 13px;
}
.nvz-history-row:last-child { border-bottom: none; }
.nvz-history-time { flex: 0 0 64px; color: var(--nvz-muted); font-size: 12px; padding-top: 2px; white-space: nowrap; }
.nvz-history-what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.nvz-history-note { flex-basis: 100%; color: var(--nvz-muted); font-size: 12.5px; }
/* The client's details, pasted as one block by the owner and read line by line
   by the worker — who is copying each value into a directory form, and should
   not have to select it by hand every time. */
.nvz-biz-lines { display: flex; flex-direction: column; }
.nvz-biz-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; font-size: 14px; line-height: 1.5;
}
.nvz-biz-line + .nvz-biz-line { border-top: 1px solid var(--nvz-border); }
.nvz-biz-gap { height: 8px; }
.nvz-biz-input { resize: vertical; min-height: 150px; line-height: 1.5; }

/* Fields an older build collected one at a time; still shown where they exist. */
.nvz-biz { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.nvz-biz dt { color: var(--nvz-muted); font-size: 13px; }
.nvz-biz dd { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nvz-biz dd.nvz-pre { white-space: pre-wrap; }
.nvz-biz-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nvz-copy {
  flex: 0 0 auto; font-size: 11px; line-height: 1.6; padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--nvz-border); background: var(--nvz-card); color: var(--nvz-muted); cursor: pointer;
}
.nvz-copy:hover { color: var(--nvz-ink); }
.nvz-copy.is-done { color: #2FAE60; border-color: #2FAE60; }

/* The order's own ID, in the page header. It is the thing people quote to each
   other — in a message, on a call, in a spreadsheet — so it copies with a tap
   rather than being selected by hand on a phone. */
.nvz-copy-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7; padding: 1px 10px; border-radius: 999px;
  border: 1px solid var(--nvz-border); background: var(--nvz-card);
  color: var(--nvz-muted); cursor: pointer; letter-spacing: .02em;
}
.nvz-copy-id:hover { color: var(--nvz-ink); border-color: var(--nvz-ink); }
.nvz-copy-id.is-done { color: #2FAE60; border-color: #2FAE60; }

/* Where a person's notifications land, on the Users list. */
.nvz-contact { line-height: 1.5; max-width: 230px; overflow-wrap: anywhere; }

/* Proving a channel works without creating an order and waiting. Sits under
   the form it belongs to, separated so it reads as a check, not a field. */
.nvz-test-send {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nvz-border);
}
.nvz-test-result:empty { display: none; }
.nvz-test-result { line-height: 1.5; }

/* The live clock beside the timezone picker — the one thing that tells the
   owner at a glance whether the setting is right. */
.nvz-clock-now {
  margin-left: auto; text-align: right; line-height: 1.4;
}
@media (max-width: 640px) {
  .nvz-clock-now { margin-left: 0; text-align: left; width: 100%; }
}

/* Clearing the trial data. Marked out so it is never mistaken for one more
   settings panel, and placed last on the page. */
.nvz-danger-zone { border-color: #E5484D; }
.nvz-reset-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
}
.nvz-reset-tile {
  border: 1px solid var(--nvz-border); border-radius: 10px; padding: 10px 12px;
}
.nvz-reset-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; font-weight: 600; line-height: 1.3;
}
/* The extra things to clear. Each is one short line with its box beside it —
   they are choices, not cards, and four cards was four screens of scrolling. */
.nvz-reset-opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 20px;
}
.nvz-reset-opts .nvz-pick { align-items: flex-start; }
.nvz-reset-opts .nvz-pick input { margin-top: 3px; flex: 0 0 auto; }

/* Two orders may legitimately share a client's folder reference; it is worth
   saying so once, at the moment it happens, not refusing the order. */
.nvz-heads-up {
  border: 1px solid #F5A524; background: rgba(245,165,36,.09);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
}

/* A heading inside a form, where one group of fields ends and another begins. */
.nvz-form-section {
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--nvz-border);
  font-size: 13px; font-weight: 600;
}

@media (max-width: 560px) {
  .nvz-biz { grid-template-columns: 1fr; gap: 2px; }
  .nvz-biz dt { margin-top: 8px; }
}

/* Files on an order, grouped by what they are — the brief the worker was given
   sits apart from the work they sent back. */
.nvz-file-group + .nvz-file-group { margin-top: 16px; }
.nvz-file-stage {
  font-size: 11px; color: var(--nvz-muted); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}
.nvz-file-group ul { padding-left: 0; margin: 0; }
.nvz-file-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--nvz-border); font-size: 14px;
}
.nvz-file-row:last-child { border-bottom: none; }
.nvz-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nvz-file-meta { flex: 0 0 auto; }
.nvz-file-newest {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px;
  color: var(--nvz-accent); border: 1px solid var(--nvz-accent);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.nvz-file-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--nvz-border);
}

@media (max-width: 640px) {
  .nvz-file-row { align-items: flex-start; }
  .nvz-file-name { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   Notes on an order.

   These are a conversation between the owner, QA and the workers, so they are
   set out as one: each note is its own block with the writer's initials beside
   it, and the text keeps the line breaks it was typed with. Run together as
   plain lines of text, as they were before, it took a second look to see where
   one note ended and the next began.
   --------------------------------------------------------------------------- */
.nvz-thread { display: flex; flex-direction: column; gap: 14px; }
.nvz-thread-day {
  font-size: 11px; color: var(--nvz-muted); text-transform: uppercase; letter-spacing: .04em;
  margin: 4px 0 -4px;
}
.nvz-thread-day:first-child { margin-top: 0; }
.nvz-note { display: flex; gap: 10px; align-items: flex-start; }
.nvz-note-avatar { flex: 0 0 32px; }
.nvz-note.is-mine .nvz-note-avatar { background: var(--nvz-muted); }
.nvz-note-body {
  flex: 1; min-width: 0;
  background: var(--nvz-surface);
  border: 1px solid var(--nvz-border);
  border-radius: 12px; border-top-left-radius: 4px;
  padding: 9px 13px 10px;
}
.nvz-note.is-mine .nvz-note-body { border-color: var(--nvz-accent); }
.nvz-note-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 13px; margin-bottom: 3px;
}
.nvz-note-only {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: #F5A524; border: 1px solid #F5A524;
  border-radius: 999px; padding: 1px 7px;
}
.nvz-note-role {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nvz-muted); border: 1px solid var(--nvz-border);
  border-radius: 999px; padding: 1px 7px;
}
/* A note typed on several lines is read on several lines. */
.nvz-note-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Calling somebody into a note. */
.nvz-mention-wrap { position: relative; }
.nvz-mention-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30;
  background: var(--nvz-card); border: 1px solid var(--nvz-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,18,35,.28); overflow: hidden; max-height: 240px; overflow-y: auto;
}
.nvz-mention-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 12px; background: none; border: 0; cursor: pointer;
  color: var(--nvz-ink); font-size: 14px;
}
.nvz-mention-item.is-on, .nvz-mention-item:hover { background: var(--nvz-surface); }
.nvz-mention-avatar { width: 24px; height: 24px; font-size: 10px; flex: 0 0 24px; }
.nvz-mention {
  color: var(--nvz-accent); font-weight: 600;
  background: color-mix(in srgb, var(--nvz-accent) 12%, transparent);
  border-radius: 4px; padding: 0 3px;
}
.nvz-pick { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; cursor: pointer; }

/* One of several things the person could mean, each named by what happens. */
.nvz-choice {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  background: var(--nvz-surface); color: var(--nvz-ink);
  border: 1px solid var(--nvz-border); border-radius: 10px;
}
.nvz-choice:hover { border-color: var(--nvz-accent); }
.nvz-choice:last-child { margin-bottom: 0; }
.nvz-file-for {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px;
  color: #F5A524; border: 1px solid #F5A524; border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}

.nvz-composer { border-top: 1px solid var(--nvz-border); padding-top: 14px; }
.nvz-composer-text { resize: vertical; min-height: 62px; line-height: 1.5; }
.nvz-composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px; flex-wrap: wrap;
}

@media (max-width: 640px) {
  /* The hint is for a keyboard; on a phone the button says it all. */
  .nvz-composer-foot .nvz-muted { display: none; }
  .nvz-composer-foot { justify-content: flex-end; }
}

.list-none{list-style:none}

@media (max-width: 767px) {
  /* Wrapped onto several rows, the connector runs off the end of each row and
     points at nothing. The order is clear from the reading order anyway. */
  .nvz-journey-step:not(:last-child)::after { display: none; }
  .nvz-journey-step { min-width: 46%; max-width: none; }
}

/* The rate reads as one phrase ("Rs 3.00 / citation + Rs 8.00 extra"); broken
   over four lines in a narrow column it stops being readable at a glance. */
.nvz-rate-cell { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Native date and month pickers.
   Chrome draws the little calendar button in a fixed near-black, which on the
   dark theme sits on a dark field and all but disappears — the month picker in
   Payments looked like it had no button at all.
   `color-scheme: dark` is the right lever: it tells the browser to draw its own
   controls for a dark surface, so the icon comes out white and the drop-down
   panel is dark too. (Inverting the icon by hand fights this and lands back at
   black, which is how the first attempt at this made no visible difference.)
   --------------------------------------------------------------------------- */
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"] { color-scheme: dark; }

[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .8;
  cursor: pointer;
}
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* A primary button that cannot be pressed yet should look that way, or the
   click that does nothing reads as the app being broken. */
.nvz-btn-primary:disabled,
.nvz-btn-secondary:disabled {
  opacity: .45;
  cursor: not-allowed;
}