/* ============================================================
   Visual AI Workflow Builder - Base Layout, Tokens, Typography
   Design language inherited from the AirWanderer reference CSS:
   green/viridian palette, EB Garamond, soft shadows, mineral
   gradient buttons.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');

:root {
  --maingreen: rgba(0, 128, 68, 1);
  --secondgreen: rgb(0, 110, 59);
  --maintextgreen: rgba(219, 228, 224, 1);
  --grayback: rgba(241, 244, 243, 1);
  --lightgreen: #62af8b;
  --lighttextgreen: #7f928a82;
  --background-frames: rgba(242, 245, 244, 1);
  --bg: #f1f4f3;
  --bg-soft: #f7f7f7;
  --bg-card: #ffffff;
  --bg-canvas: #f5f7f6;
  --text: #2d3a33;
  --text-muted: #6b7a73;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.18);
  --accent: #316e51;
  --accent-2: #43916d;
  --accent-3: #62af8b;
  --warn: #cc9237;
  --error: #b04848;
  --info: #3b6e9c;
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --radius: 8px;
  --radius-lg: 12px;

  /* Phase 10 Slice 3A — floating shell tokens (header, nav, drawer
     cards on screens wider than 900px). The @media reset at the
     bottom of panels.css collapses this back to a flat layout for
     small screens.

     --shell-shadow is a two-layer green-tinted shadow tuned for the
     floating shell only: a long-blur ambient layer carries the
     "elevation" feel at very low alpha, and a tight 3px layer at
     slightly higher alpha gives the card a crisp edge so it doesn't
     look fogged or muddy. Using rgba(32, 56, 45) (dark accent green)
     instead of pure black lets the shadow sit harmoniously on the
     dotted-grid canvas without reading as a grey cloud. */
  --shell-gap: 12px;
  --shell-radius: 10px;
  --shell-shadow:
    0 10px 28px rgba(32, 56, 45, 0.055),
    0 1px 3px rgba(32, 56, 45, 0.07);

  /* Status colors used across blocks and indicators */
  --st-not-started: #b6c1bb;
  --st-waiting: #c9b56a;
  --st-running: #e0a437;
  --st-needs-review: #cc9237;
  --st-approved: #4a9d6a;
  --st-completed: #2e8e5d;
  --st-failed: #b04848;
  --st-skipped: #9aa6a0;
  --st-stopped: #6b6b6b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

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

/* ===== App shell ===== */
.app {
  --nav-width: 240px;
  --drawer-width: 380px;
  display: grid;
  grid-template-columns: var(--nav-width) 1fr var(--drawer-width);
  /* Phase 10 next slice — there is no header row in the grid: the
     new workflow top-bar component (#wfBar / .wf-bar) lives ON the
     canvas as a fixed-positioned floating pill (its `position:
     fixed` override is in topbar.css's AirWanderer integration
     block). The canvas-area / page-root therefore extend the full
     viewport height; the canvas-toolbar's top is shifted in
     topbar.css to clear the bar's footprint, and the page-root's
     top padding is bumped similarly. */
  grid-template-rows: 1fr;
  grid-template-areas:
    "nav canvas drawer";
  width: 100vw;
  height: 100vh;
  transition: grid-template-columns 0.18s ease;
}
.app.nav-hidden    { --nav-width: 0; }
.app.drawer-hidden { --drawer-width: 0; }
.app.nav-hidden    .app-nav    { display: none; }
.app.drawer-hidden .app-drawer { display: none; }

/* Square icon button — used for nav toggle, drawer toggle, dialog close,
   and small chip "remove" actions. Just an icon host. */
.icon-btn-square {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  line-height: 1;
}
.icon-btn-square:hover {
  background: rgba(67, 145, 109, 0.07);
  color: var(--accent);
  border-color: var(--accent-3);
}
.icon-btn-square.active { color: var(--accent); background: rgba(67, 145, 109, 0.10); border-color: var(--accent-3); }
.icon-btn-square:focus-visible {
  outline: 2px solid var(--accent-2, #43916d);
  outline-offset: 2px;
  border-color: var(--accent-3);
  color: var(--accent);
}
.icon-btn-square .ico { display: block; }

/* Phase 10 next slice — the legacy `.app-header` / `.header-left` /
   `.header-right` / `.app-header .brand` / `.app-header .brand-wordmark`
   / `.workflow-name-input` / `.header-actions` block (Phase 10 Slice
   3A) was removed when the new workflow top-bar component shipped.
   Header chrome now lives in topbar.css / topbar.js and is scoped to
   .wf-bar / .wf-rail / .wf-bpop / .wf-fly / .wf-toolbar. The
   #workflow-name-input rename + #initial-input + #btn-run / Pause /
   Resume / Stop + #btn-toggle-drawer + #user-pill-host + #dev-user-host
   controls were folded into the new component (see index.html and
   ai-workflow-builder/static/js/topbar-adapter.js for the migration
   map). */

/* ===== Empty state ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 12px;
  text-align: center;
  padding: 32px;
}
.empty-state h3 { color: var(--text); font-weight: 600; margin: 0; }
.empty-state p { max-width: 360px; line-height: 1.5; margin: 0; }
.empty-state ul { max-width: 380px; padding-left: 20px; margin: 0; }

/* Decision UX §16 — accessibility focus.
   WCAG Focus Visible says keyboard users need a clearly visible
   indicator. We use ``:focus-visible`` so mouse clicks don't show
   the ring, but Tab navigation does. */
:focus-visible {
  outline: 2px solid var(--accent-2, #43916d);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible,
.btn:focus-visible,
.kind-menu-item:focus-visible,
.tab:focus-visible,
.workflow-row:focus-visible {
  outline: 2px solid var(--accent-2, #43916d);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(67, 145, 109, 0.18);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none; /* the existing border-color + box-shadow handle this */
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(98, 175, 139, 0.25);
}
/* Disabled controls still need recognisable visual state. */
button:disabled, .btn:disabled, .input:disabled, .select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===== Toast ===== */
.toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}
.toast {
  background: #fff;
  border-left: 4px solid var(--accent-2);
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: var(--shadow-medium);
  font-size: 13px;
  min-width: 240px;
  max-width: 380px;
  animation: toastIn 0.25s ease-out;
}
.toast.error { border-left-color: var(--error); }
.toast.warn { border-left-color: var(--warn); }
.toast.success { border-left-color: var(--st-completed); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Modal =====
   Phase 10 Slice 2 note: AirWanderer deliberately keeps three
   coexisting modal patterns rather than consolidating them.
     • `.modal` / `.modal-backdrop` (this file) — generic confirm
       and small-dialog modal used across the app.
     • `.report-modal-*` (panels.css)            — Run Report
       modal with TOC + scrolling content area.
     • `.purge-modal-*` (saas-shell.css)         — Admin user
       purge modal with destructive-confirmation field.
   Each pattern carries context-specific layout that would be
   awkward to unify behind a single class set. Slice 2 keeps
   them separate; future module modals SHOULD reuse `.modal`
   unless they need a dedicated context like the two above. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

/* hide via class */
.hidden { display: none !important; }

/* misc */
.kbd {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  background: #ececec;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-muted);
}

/* ==========================================================================
   ROUND 23, track H (owner reports 1, 6 and 7) - the palette and the help
   popover under the PlanFlow flag. Everything here is scoped to
   body.aw-newblocks; flag off, panels.css / components.css paint both exactly
   as before.
   ========================================================================== */

/* --- the palette dodges floating chrome (report 1) ---
   The chrome coordinator (topbar-adapter.js layoutPaletteDodge) writes
   --aw-palette-dx / -dy on .app when the nav, the canvas tools, the zoom
   cluster, the help tile or an inspector would cover the bar at its
   bottom-centre home. `translate` composes with the bar's own
   transform: translateX(-50%) (panels.css), so the home stays the centre. */
body.aw-newblocks .palette {
  translate: var(--aw-palette-dx, 0px) var(--aw-palette-dy, 0px);
  transition: translate var(--aw-chrome-dur) var(--aw-chrome-ease), margin-left .18s ease,
              opacity var(--aw-chrome-dur) var(--aw-chrome-ease), scale var(--aw-chrome-dur) var(--aw-chrome-ease);
}
/* ROUND 30: the bar folds into its tile on the chrome clock (it used to vanish in one frame) */
body.aw-newblocks .palette.is-folding { opacity: 0; scale: .92; pointer-events: none; }

/* --- the palette's collapse (report 6) ---
   A hover-revealed chevron at the bar's right end, the same two-chevron glyph
   as the floating toolbar's own collapse; the bar hides and a 40 x 40 tile in
   the dock column stands in for it (the tile recipe = the help tile's glass
   card, like the collapsed zoom cluster and the collapsed canvas tools). */
body.aw-newblocks .palette.is-collapsed { display: none; }
/* ROUND 27 (track A; owner 2026-10-19): "There is an empty space on this
   element before we hover - this should not be the case. Without hover it
   should show no empty space and the container should expand when it is on
   hover to reveal the button."  At rest the chevron is 0 px wide and its
   negative margin swallows the bar's 6 px gap, so the bar ends at its last
   chip (measured on HEAD at 1600x950: a 451.7 px bar for 399.7 px of chips
   + 12 px padding + 2 px border = 38 px reserved; now 413.7 px, 0 reserved).
   On hover, or with keyboard focus inside the bar (:has(:focus-visible)),
   the chevron grows to its 30 px (+ 2 px margin) and fades in over .18 s.
   The bar is centred by `transform: translateX(-50%)`, so growing it alone
   would slide every chip 19 px LEFT under the pointer; the bar's own
   margin-left grows by that same 19 px in the same .18 s, so the chips hold
   still and the bar extends to the RIGHT only. */
body.aw-newblocks .palette .palette__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  height: 30px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #41584C;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  transition: width .18s ease, margin-left .18s ease, opacity .18s ease, background-color .12s, color .12s;
}
body.aw-newblocks .palette:hover,
body.aw-newblocks .palette:has(:focus-visible) { margin-left: 19px; }
body.aw-newblocks .palette:hover .palette__collapse,
body.aw-newblocks .palette:has(:focus-visible) .palette__collapse,
body.aw-newblocks .palette .palette__collapse:focus-visible { width: 30px; margin-left: 2px; opacity: 1; }
body.aw-newblocks .palette .palette__collapse:hover { background: rgba(56, 120, 90, 0.09); color: #1F6E45; }
body.aw-newblocks .palette .palette__collapse:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(60, 120, 92, .55); }
body.aw-newblocks .palette .palette__collapse svg { width: 18px; height: 18px; display: block; }
body.aw-newblocks .wf-paltile {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  color: #41584C;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.03);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 10px 30px rgba(55, 72, 64, 0.14);
  transition: background-color .12s, color .12s, transform .12s cubic-bezier(.4, 0, .2, 1);
  animation: wf-group-in var(--aw-chrome-dur) var(--aw-chrome-ease);
}
body.aw-newblocks .wf-paltile.is-shown { display: flex; }
body.aw-newblocks .wf-paltile.is-hiding { animation: wf-group-out var(--aw-chrome-dur) var(--aw-chrome-ease) forwards; pointer-events: none; }
@keyframes wf-group-out { to { transform: scale(.86) translateY(5px); opacity: 0; } }
body.aw-newblocks .wf-paltile:hover { background: rgba(56, 120, 90, 0.09); color: #1F6E45; }
body.aw-newblocks .wf-paltile:active { transform: translateY(1px); }
body.aw-newblocks .wf-paltile:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(60, 120, 92, .55); }
body.aw-newblocks .wf-paltile svg { width: 18px; height: 18px; display: block; }
body.route-page .wf-paltile { display: none !important; }   /* no canvas, no bar to stand in for */

/* --- the help popover in the panel's look (report 7) ---
   The inspector's well: the serif, 13 px body, the .wf-kbd key caps
   (planflow-inspector.css: 10 px, 600, 1px 5px, radius 4, --row-hover /
   --divider / --label), a 12 px radius glass card. Content is written by
   app.js (pfHelpHtml) from the gestures spec 36 arm G performs. */
body.aw-newblocks .canvas-help-popover {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13px;
  line-height: 1.45;
  color: #1F2D26;
  width: 400px;
  padding: 12px 14px 12px;
  background: rgba(252, 253, 250, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.03);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px rgba(55, 72, 64, 0.16);
}
body.aw-newblocks .canvas-help-popover .wf-help__t {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #41584C;
  margin: 0;
  flex: 1;
  min-width: 0;
}
/* ROUND 32: the popover floats on its own, placed by app.js where there is room (never over the
   chrome), dragged by its header, remembered; it glides aside on the chrome clock when the chrome
   moves onto it, and appears in place without a glide */
body.aw-newblocks .canvas-help-popover.wf-help--float {
  position: fixed;
  right: auto;
  bottom: auto;
  translate: none;
  z-index: 8600;
  width: 400px;
  transition: left var(--aw-chrome-dur, .32s) var(--aw-chrome-ease, cubic-bezier(.32, .72, 0, 1)),
              top var(--aw-chrome-dur, .32s) var(--aw-chrome-ease, cubic-bezier(.32, .72, 0, 1));
}
body.aw-newblocks .canvas-help-popover.wf-help--float.is-placing,
body.aw-newblocks .canvas-help-popover.wf-help--float.is-dragging { transition: none; }
body.aw-newblocks .canvas-help-popover .wf-help__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px -6px 8px -4px;
  padding: 2px 2px 2px 4px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
body.aw-newblocks .canvas-help-popover.is-dragging .wf-help__hd { cursor: grabbing; }
body.aw-newblocks .canvas-help-popover .wf-help__grip {
  width: 14px;
  height: 14px;
  flex: none;
  color: #8FA399;
  display: flex;
}
body.aw-newblocks .canvas-help-popover .wf-help__grip svg { width: 14px; height: 14px; display: block; }
body.aw-newblocks .canvas-help-popover .wf-help__x {
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  background: transparent;
  color: #6E8077;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .12s, color .12s;
}
body.aw-newblocks .canvas-help-popover .wf-help__x:hover { background: rgba(56, 120, 90, 0.09); color: #1F6E45; }
body.aw-newblocks .canvas-help-popover .wf-help__x:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(60, 120, 92, .55); }
body.aw-newblocks .canvas-help-popover .wf-help__x svg { width: 16px; height: 16px; display: block; }
body.aw-newblocks .canvas-help-popover .wf-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.aw-newblocks .canvas-help-popover .wf-help__list li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
  align-items: start;
  padding: 6px 0;
  border-top: 1px solid rgba(70, 92, 80, 0.12);
}
body.aw-newblocks .canvas-help-popover .wf-help__list li:first-child { border-top: 0; padding-top: 0; }
body.aw-newblocks .canvas-help-popover .wf-help__list li:last-child { padding-bottom: 0; }
body.aw-newblocks .canvas-help-popover .wf-help__k { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
body.aw-newblocks .canvas-help-popover .wf-help__k .wf-help__plus { color: #5A6B62; font-size: 11px; }   /* review fix 1: #6E8077 read 4.09:1 by day, below AA */
body.aw-newblocks .canvas-help-popover .wf-kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(60, 74, 67, 0.06);
  border: 1px solid rgba(70, 92, 80, 0.16);
  color: #41584C;
  white-space: nowrap;
}
body.aw-newblocks .canvas-help-popover .wf-help__d { color: #1F2D26; }
body.aw-newblocks .canvas-help-popover .wf-help__d small { display: block; color: #5A6B62; font-size: 12px; }

/* --- night mode (REVIEW FIX 1, round 23) ---
   topbar.js's Appearance popover toggles html.wf-theme-night; panels.css paints
   the popover's box dark there (#1B221E on #E7EFE9, the night half of the same
   token block). The rows above kept their day colours, so in night mode the
   text was dark on dark: measured 1.13:1 for the body rows and 2.11:1 for the
   title and the key caps (spec 36 arm K, red run). The night half here uses
   panels.css's own night values, restated for the box so this block does not
   depend on stylesheet order. */
html.wf-theme-night body.aw-newblocks .canvas-help-popover {
  background: #1B221E;
  border-color: rgba(255, 255, 255, 0.12);
  color: #E7EFE9;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__t { color: #CFE9DB; }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__grip { color: #7E9388; }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__x { color: #9FB4AA; }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__x:hover { background: rgba(120, 200, 160, 0.13); color: #CFE9DB; }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__list li { border-top-color: rgba(255, 255, 255, 0.09); }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__k .wf-help__plus { color: #9FB4AA; }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-kbd {
  color: #CFE9DB;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__d { color: #E7EFE9; }
html.wf-theme-night body.aw-newblocks .canvas-help-popover .wf-help__d small { color: #9FB4AA; }

/* --- the collapsed palette's tile in night mode (REVIEW FIX 2, round 23) ---
   The same night recipe as the help tile and the Run tile (topbar.css:
   `html.wf-theme-night .app > .toolbar-group.toolbar-help`), so the dock
   column reads as one set of tiles. Before: the day glass over the night
   canvas, glyph at 2.64:1 (spec 36 arm K, red run). */
html.wf-theme-night body.aw-newblocks .wf-paltile {
  background: rgba(28, 36, 32, 0.56);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(231, 239, 233, 0.80);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 10px 30px rgba(0, 0, 0, 0.30);
}
html.wf-theme-night body.aw-newblocks .wf-paltile:hover { background: rgba(150, 220, 200, 0.10); color: rgba(231, 239, 233, 1); }
html.wf-theme-night body.aw-newblocks .wf-paltile:focus-visible { box-shadow: 0 0 0 2px #0E1411, 0 0 0 4px rgba(127, 211, 168, .6); }