/* ============================================================================
   SHARED BASE — loaded by both index.html (viewer) and
   html/edit_user_process.html (editor), before their own page-specific
   stylesheet, so page CSS can still override where the two pages
   genuinely need to differ.

   Token system redesigned 18 July 2026 to match a reference design
   (Jehudi's "Swimlanes Redesign" Claude Design mockup) -- procedural
   OKLCH colors (warm-neutral hue 90 throughout instead of pure gray,
   accent hue 228 close to the old #005fa3/#007acc blue identity so it
   reads as a refinement, not a rebrand), Inter + IBM Plex Mono
   typography, soft-fill/bordered components instead of solid-fill
   buttons. Scope is chrome only -- the swim-lane diagram's own SVG
   rendering (js/svg/*.js) and diagramOverlay.css's .lane-header-cell
   family (deliberately pixel-matched to it) are untouched by this pass.

   This supersedes the earlier, narrower "unify shared visual language
   only, don't restructure" scoping decision from the Phase 1 work --
   done at Jehudi's explicit request this time, not silently: this pass
   reaches into every button/table/modal/popover, not just base
   html/body/header rules. Page-specific layout choices (header height/
   padding) and semantically distinct action colors (Add Project's
   green, Create Flow's teal) still stay in each page's own file --
   real differences, not drift -- just restyled to the same soft/
   bordered/deep three-tier shape as everything else for visual
   consistency.
   ============================================================================ */

:root {
  /* Neutrals (warm gray, hue 90). Widened 19 July 2026 -- the original
     97/98.5/99% steps read as one flat off-white wash (Jehudi: "slightly
     more contrast... between the yellows and whites"); bg-base pulled
     down and warmed a touch, surface pushed toward true white, so the
     work-area panels (.flow-diagram-wrapper, .meta-box) visibly separate
     from the page behind them instead of blending into it. */
  --bg-base: oklch(95.5% 0.007 90);
  --surface: oklch(99.6% 0.001 90);        /* headers, toolbars, table/card backgrounds */
  --surface-subtle: oklch(97.5% 0.004 90); /* panels, sidebars, sticky table headers */
  --border: oklch(90% 0.006 90);
  --border-soft: oklch(92% 0.006 90);
  --border-input: oklch(85% 0.008 90);
  --text-base: oklch(22% 0.006 90);
  --text-secondary: oklch(45% 0.008 90);
  --text-tertiary: oklch(55% 0.01 90);

  /* Fonts */
  --font-base: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Accent (primary), hue 228 */
  --accent-soft: oklch(95% 0.02 228);
  --accent-border: oklch(82% 0.045 228);
  --accent-deep: oklch(38% 0.06 228);
  --accent-soft-hover: oklch(92% 0.03 228);

  /* Danger, hue 27 */
  --danger-soft: oklch(95% 0.02 27);
  --danger-border: oklch(78% 0.06 27);
  --danger-deep: oklch(42% 0.09 27);
  --danger-soft-hover: oklch(92% 0.03 27);

  /* Success, hue 145 -- unifies the several one-off greens scattered
     across the editor (button.flash-success, the save-status "ok"
     state, the Add Project button) into the same three-tier shape. */
  --success-soft: oklch(95% 0.03 145);
  --success-border: oklch(78% 0.08 145);
  --success-deep: oklch(40% 0.09 145);

  /* Warning/info, hue 80 -- the save-status "warn" state. */
  --warning-soft: oklch(95% 0.04 80);
  --warning-border: oklch(80% 0.08 80);
  --warning-deep: oklch(45% 0.09 80);

  /* Alternative-path variants ("diamonds", 18 July 2026), hue 300 --
     violet, distinct from accent/danger/success/warning above so a
     variant's diamond marker and overlay never read as one of those
     existing states. */
  --variant-soft: oklch(95% 0.02 300);
  --variant-border: oklch(78% 0.07 300);
  --variant-deep: oklch(42% 0.09 300);

  /* Back-compat aliases -- keep the OLD variable names resolving to
     sane new values, so anything this pass doesn't explicitly touch (a
     missed selector, a future addition) still renders coherently
     rather than keeping a hardcoded 2025 blue next to the new palette. */
  --primary-color: var(--accent-deep);
  --primary-hover: oklch(32% 0.065 228);
  --danger-color: var(--danger-deep);
  --header-bg: var(--accent-deep);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-base);
  background-color: var(--bg-base);
  color: var(--text-base);
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: var(--header-bg);
  color: white;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Numeric/reference content (step order refs, table Order column, the
   EN/NL toggle) -- applied selectively via this utility, not globally. */
.mono {
  font-family: var(--font-mono);
}

/* ---- Buttons ----
   Neutral is the default look -- most toolbar buttons in the reference
   are neutral (white/bordered), only the one clearly-confirming action
   per toolbar (Save Changes, Arrange Lanes) is primary. Every unclassed
   <button> in the app already gets this exact look via the generic
   button{} rule in each page's own stylesheet (kept there, not merged
   here, since it also carries page-specific margin/spacing); .btn just
   gives call sites an explicit name for the same shape, and
   .btn-primary/.btn-danger are the two real variants. */
.btn {
  padding: 7px 14px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-base);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.btn[aria-pressed="false"] {
  opacity: 0.55;
}
.btn:hover {
  background: var(--surface-subtle);
}
.btn-primary {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-soft-hover);
}
.btn-danger {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-deep);
  font-weight: 600;
}
.btn-danger:hover {
  background: var(--danger-soft-hover);
}
/* Existing markup uses class="btn primary" (compound selector) in a few
   places rather than the hyphenated .btn-primary -- alias rather than
   touch markup that already works. */
.btn.primary {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.btn.primary:hover {
  background: var(--accent-soft-hover);
}

/* ---- Shared chrome, deduped from byte-identical/near-identical
   per-page copies (flowDiagramStyle.css/flowEditorStyle.css's own
   .nav-link and .selection-bar; index.html's .lane-modal* and
   edit_user_process.html's .modal* -- same shape, different names) ---- */
.nav-link {
  color: var(--surface);
  text-decoration: none;
  background-color: var(--accent-deep);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: bold;
  display: inline-block;
  margin-right: 1rem;
}
.nav-link:hover {
  background-color: var(--primary-hover);
}

.selection-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface-subtle);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 3rem;
  z-index: 9;
}
/* Explicit, complete styling -- not just padding -- so selects don't fall
   through to the generic `input, select, textarea {}` rule further down
   (flowEditorStyle.css), which sets width:100% and margin-top:5px for
   *stacked vertical forms* and looks broken inside this flex toolbar row:
   the width stretches unpredictably and the margin knocks it out of
   vertical alignment with the buttons next to it. */
.selection-bar select {
  width: auto;
  margin-top: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-base);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.modal-backdrop,
.lane-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal,
.lane-modal {
  background: var(--surface);
  border-radius: 8px;
  width: 90vw;
  max-width: 900px; /* .lane-modal (Arrange Lanes, needs room for many lane
    chips in a row) overrides this back up to 1200px in flowDiagramStyle.css
    -- a real per-page difference, not drift, unlike every other property
    here which was genuinely byte-identical between the two pages. */
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.14);
}
.modal header,
.lane-modal header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
}
.modal .body,
.lane-modal .body {
  padding: 12px 16px;
  text-align: left;
}
.modal .footer,
.lane-modal .footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
}
.modal .footer .btn,
.lane-modal .footer .btn {
  margin: 2px 0;
}

/* ---- Alternative-path variants ("diamonds", 18 July 2026) ----
   js/variantOverlay.js. .variant-overlay-mount is a sibling of the main
   diagram's own <svg> inside the same position:relative container --
   deliberately its own element, never a child of the main svg/.svg-mount,
   so a variant's rendered overlay is structurally impossible to include
   when that container's own svg is rasterized for docx export (see
   docs/As-built.md). pointer-events:none on the mount + overlay svg
   themselves -- v1's overlay is look-only, the diamond glyph (real SVG
   content inside the MAIN svg, drawn by SvgRenderer -- see
   js/svg/SvgVariantMarker.js) is the only interactive part. */
.variant-overlay-mount {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 4;
}
.variant-overlay-svg {
  display: block;
  opacity: 0.6;
  pointer-events: none;
}
.variant-diamond-marker {
  cursor: pointer;
}
.variant-diamond-marker:hover {
  filter: brightness(1.15);
}

/* Global show/hide-all-diamonds toggle -- one class on <body>, reaches
   every diamond glyph and any open overlay regardless of which container
   rendered it (js/variantOverlay.js's setGlobalVariantsVisible). */
.variants-hidden .variant-diamond-marker,
.variants-hidden .variant-diamond-target,
.variants-hidden .variant-overlay-mount {
  display: none;
}

/* ---- Lane header boxes + drag-to-reorder (19 July 2026) ----
   js/laneHeaderOverlay.js, used by both the editor's live preview
   (js/diagramOverlay.js) and the viewer (js/main.js) -- moved here from
   diagramOverlay.css specifically so the viewer (which never loads that
   editor-only stylesheet) renders the exact same boxes, not a second,
   divergent look. .lane-menu-btn/.lane-gap-target stay in
   diagramOverlay.css -- rename/delete/add-lane are real content edits,
   editor-only. */

/* The "sticky header with no real <thead> to lean on" trick: this wrapper
   reserves zero flow height (so it sits exactly at the diagram's own
   y=0, where the SVG's own actor-header boxes are drawn) while its
   children render at full size above that zero box and stick to the top
   of the scroll container as the diagram scrolls under it. */
.lane-header-overlay {
  position: sticky;
  top: 0;
  height: 0;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
}

.lane-header-cell {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  background: #ddd;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  pointer-events: auto; /* needs to receive hover/dblclick/drag */
  cursor: grab;
}
.lane-header-cell.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.lane-header-label {
  padding: 0 4px;
  font-size: 11px;
  font-family: sans-serif;
  color: #000;
  word-break: break-word;
}