/* ============================================================
   Left navigation, central canvas, right inspector / drawer.
   ============================================================ */

/* ===== Central canvas ===== */
.canvas-area {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
  background: var(--bg-canvas);
  /* Soft dotted grid */
  background-image:
    radial-gradient(circle, rgba(67, 145, 109, 0.16) 1px, transparent 1px),
    radial-gradient(circle, rgba(67, 145, 109, 0.06) 1px, transparent 1px);
  background-size: 24px 24px, 6px 6px;
  background-position: 0 0, 0 0;
}

.canvas-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  /* SINGLE SOURCE for the right inset. `body.route-workflow .canvas-toolbar`
     in topbar.css re-declares `right` so the coordinator's dx can be given
     back to the box it was taken from (see the comment there); it reads this
     custom property rather than repeating the number, so the two
     declarations cannot drift apart. */
  --aw-tools-toolbar-right-base: 12px;
  right: var(--aw-tools-toolbar-right-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}
.canvas-toolbar > * { pointer-events: auto; }
/* When the left nav is hidden, the floating "show panel" FAB sits at
   left:10/top:12 over the canvas — push the toolbar in to keep both
   visible. */
.app.nav-hidden .canvas-toolbar { left: 52px; }

/* Compact help button + popover replaces the long inline shortcuts
   string. The popover anchors below the right side of the toolbar so it
   doesn't overflow the viewport on narrow screens. */
.toolbar-help { position: relative; }

/* ============================================================
   OWNER ASK H2 — the canvas-shortcuts popover speaks PlanFlow.

   "can you make it look nicer? It does not look like our design
   plus it is all messy."

   Measured on 090a9bb (r4/ev/probe3-head.json, every cell —
   1920/1280/1100 at dsf 1, 1.25 and 1.5 — and the screenshot
   r4/ev/p3-head-1280x800@1-popup-zoom.png):
     background  rgb(255,255,255)   opaque white, not glass
     radius      8px                the shell's radius is 16
     backdrop    none               every other floating surface blurs
     shadow      0 8px 24px rgba(0,0,0,.15)   a grey drop shadow, no
                                    inset highlight, not --bar-shadow
     width       280 (min) .. 360   ragged: rows re-wrapped per row
     .kbd        90.6x17 grey #ececec chip, 4px radius, no cap relief
   i.e. the pre-PlanFlow chrome, unchanged, sitting under a glass tile.

   CONTENT IS UNTOUCHED — and this file could not change it in any
   case: the markup lives in index.html, which this track does not
   own. Every rule below is presentation only; the six shortcut rows
   and their wording ship exactly as they are.

   Every value below is quoted BY VALUE from the token block declared
   on `.wf-bar, .wf-bpop, .wf-fly, .wf-toolbar` (topbar.css:14-73),
   because the popover sits outside that scope and inherits none of it:
     --surface-solid  #FBFCFA                 topbar.css:19
     --border         rgba(255,255,255,.70)   topbar.css:20
     --bar-radius     16px                    topbar.css:67
     --divider        rgba(70,92,80,.16)      topbar.css:21
     --cta            #1F6E45                 topbar.css:68
     --label-hover    #27543C                 topbar.css:23
     --text           #1F2D26                 topbar.css:25
   plus `.wf-bpop`'s own popover shadow, topbar.css:886.

   WHY --surface-solid AND NO BLUR, when `.wf-bar` itself is
   `--surface` (rgba(255,255,255,.56)) + `--blur`. Because this is a
   POPOVER, and the language already ships one in this exact token
   block: `.wf-bpop`, the account popover (topbar.css:882-889), which
   is `background: var(--surface-solid)` with a popover shadow and no
   backdrop-filter. The glass variant was built and MEASURED first, and
   it failed for the reason `.wf-bpop` avoids it: the popover is the
   only floating surface here that opens ON TOP OF another panel. At
   1100x800 with the tile docked left (owner ask H1) the .56 surface
   put the nav flyout's own rows — "Search navigation", "New workflow",
   "TOOLS", "PROJECTS" — straight through the shortcut text, both
   unreadable. `.wf-bar` never has that problem because it only ever
   sits over the canvas. Same token block, the variant meant for this
   job.
   ============================================================ */
.canvas-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* ONE width, not a 280..360 range. The old min/max let the box
     re-wrap per row, which is most of what read as "messy": the
     Right-click row broke mid-sentence over two lines while the rows
     above it had slack. A single width makes the wrap points stable
     at every device scale. */
  width: 316px;
  min-width: 0;
  max-width: none;
  padding: 12px 14px;
  background: #FBFCFA;
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(40, 56, 48, 0.20),
              0 0 0 1px rgba(60, 74, 67, 0.05);
  font-size: 12px;
  line-height: 1.5;
  color: #1F2D26;
  display: none;
  z-index: 7;
  /* CONTAINMENT (matrix ruling 5). The popover is anchored `right: 0`
     on a tile the chrome coordinator now moves anywhere along the
     canvas-tools row, so its left edge is `tile.right - 316` and goes
     negative as soon as the tile docks left (owner ask H1). The
     coordinator writes this counter-translate; it is 0 in every state
     where the box already fits, so the default position is untouched. */
  translate: var(--aw-help-pop-dx, 0px) var(--aw-help-pop-dy, 0px);
}
.canvas-help-popover.open { display: block; }
.canvas-help-popover .help-title {
  /* Section-label voice — the one the nav ("NAVIGATION", "PAGES") and
     the inspector ("OBJECTIVE", "PLAN — STEP BLOCKS") already use.
     Styling only: the string in the markup is unchanged. */
  margin: 0 0 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(70, 92, 80, 0.16);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #27543C;
}
.canvas-help-popover .help-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ROW RHYTHM. What is uniform is the SEPARATION, and it is stated
   precisely because a row's height still follows its content: a
   two-line row is still taller than a one-line row and nothing in CSS
   can change that without editing the copy. Before, the six rows were
   4px apart with no rule between them, so the two-line "Right-click a
   block" row simply merged into its neighbours — measured row pitch on
   090a9bb at 1280x800 dsf 1 was 21.4 / 21.4 / 21.4 / 38.8 / 21.4
   (r4/chrome-h2-head.json, `rowPitch`). Here every row carries the
   same 6px above and below plus one hairline, so the boundary between
   rows is drawn rather than inferred from the gap. */
.canvas-help-popover .help-list li {
  padding: 6px 0;
  border-top: 1px solid rgba(70, 92, 80, 0.10);
}
.canvas-help-popover .help-list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.canvas-help-popover .help-list li:last-child { padding-bottom: 0; }
/* REAL KEY CAPS. The shipped `.kbd` (main.css:261) is a flat grey
   #ececec chip; these are caps — glass face, a heavier bottom edge for
   key travel, an inset top highlight, and the same green ink as the
   rest of the surface. `inline-flex` plus a min-width stops one-glyph
   caps ("Shift") collapsing narrower than the rest. */
.canvas-help-popover .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 7px 1px;
  margin: 0 1px;
  font-family: 'SF Mono', Consolas, ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #27543C;
  background: #FFFFFF;
  border: 1px solid rgba(70, 92, 80, 0.18);
  border-bottom-color: rgba(70, 92, 80, 0.30);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  vertical-align: 1px;
}
.canvas-help-popover em {
  font-style: normal;
  font-weight: 600;
  color: #1F6E45;
}
/* Night theme — the night half of the same token block: --surface-solid
   #1B221E (topbar.css:81), --border rgba(255,255,255,.12)
   (topbar.css:82), --text #E7EFE9 (topbar.css:87), and `.wf-bpop`'s own
   night shadow (topbar.css:890-891). */
html.wf-theme-night .canvas-help-popover {
  background: #1B221E;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #E7EFE9;
}
html.wf-theme-night .canvas-help-popover .help-title {
  color: #CFE9DB;
  border-bottom-color: rgba(255, 255, 255, 0.13);
}
html.wf-theme-night .canvas-help-popover .help-list li {
  border-top-color: rgba(255, 255, 255, 0.09);
}
html.wf-theme-night .canvas-help-popover .kbd {
  color: #CFE9DB;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  border-bottom-color: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
html.wf-theme-night .canvas-help-popover em { color: #7FD3A8; }

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: var(--shadow-soft);
}

.canvas-viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
}
.canvas-viewport.panning { cursor: grabbing; }

.canvas-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}

.connections-svg {
  position: absolute;
  /* Deliberately 0/0. A global nudge was tried here to cure port dots that
     looked a fraction low, but the owner then observed that only ALTERNATE
     dots were off — which a whole-layer shift can never explain, and which
     it would break for the dots that were already right. The real cause is
     per-dot device-pixel rounding, fixed at the anchor in
     planflow-blocks.js portAnchor(). This layer must stay aligned with the
     block layer it shares #canvas-stage with. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.connection-path {
  stroke: var(--accent-2);
  stroke-width: 2;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
  opacity: 0.85;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.connection-path:hover { stroke: var(--accent); stroke-width: 3; }
.connection-path.flowing {
  stroke-dasharray: 8 5;
  stroke-width: 2.6;
  animation: dashFlow 0.8s linear infinite;
  filter: drop-shadow(0 0 3px rgba(67, 145, 109, 0.45));
}
.connection-path.from-input.flowing  { filter: drop-shadow(0 0 3px rgba(199, 148, 40, 0.55)); }
.connection-path.from-output.flowing { filter: drop-shadow(0 0 3px rgba(166, 69, 69, 0.55)); }
.connection-path.kind-trigger.flowing { filter: drop-shadow(0 0 3px rgba(214, 138, 28, 0.55)); }
.connection-path.preview { stroke-dasharray: 4 3; opacity: 0.6; }
@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -26; }
}

.canvas-empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
}
.canvas-empty-hint h3 { color: var(--text); margin: 0 0 4px; font-weight: 600; }

/* Block palette (floating) */
.palette {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-medium);
  z-index: 5;
}

/* ===== Right drawer (inspector / execution) =====
   Phase 10 Slice 3A — floating drawer card on the workflow route.
   8px top margin matches the nav and gives a small gap below the
   floating header. Left edge hugs the canvas (margin-left: 0) so
   the floating shell doesn't steal canvas width. On page routes,
   the drawer is display: none — its floating margins simply don't
   render. The @media reset below 900px strips the float. */
.app-drawer {
  grid-area: drawer;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--shell-radius);
  box-shadow: var(--shell-shadow);
  margin: 8px var(--shell-gap) var(--shell-gap) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafcfb, #f3f7f5);
}
.drawer-tab {
  flex: 1;
  padding: 11px 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.drawer-tab:hover { color: var(--accent); }
.drawer-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent-2);
  background: #fff;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  /* Phase 10 Slice 2 — reserve scrollbar gutter so switching between
     tabs with/without overflow (Details/Settings vs Files/Output)
     doesn't shift content width when the scrollbar appears or
     disappears. Modern browsers honor this; older Safari (< 18.2)
     simply ignores the property. */
  scrollbar-gutter: stable;
}

/* ----- Block inspector: Details / Settings / Files / Output sub-tabs -----
   The sub-tab strip mirrors the main drawer-tabs so the inspector
   feels like a single navigational unit: tabs across the top, content
   below. The strip is sticky so it stays visible while users scroll
   long Settings panels. */
.block-subtabs {
  display: flex;
  position: sticky;
  top: -18px;        /* drawer-body has 18px padding; pull the strip up */
  margin: -18px -18px 14px;
  background: linear-gradient(to bottom, #fafcfb, #f3f7f5);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.block-subtab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
  text-align: center;
  font-family: inherit;
}
.block-subtab:hover { color: var(--accent); }
.block-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent-2);
  background: #fff;
}

.block-subtab-body { /* inherits drawer scroll; nothing else to do */ }

/* Details panel: title input + run/approval toggles + prompt + actions */
.run-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 14px;
  padding: 8px 10px;
  background: #f7faf8;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.run-options .checkbox-row { margin: 2px 0; }

.details-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.details-actions .details-actions-end { display: flex; gap: 6px; }

.output-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.output-empty p { margin: 4px 0; }

/* ----- Output-block report viewer ----- */
.report-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
}
.report-status {
  font-weight: 600;
  color: var(--accent);
  font-size: 12.5px;
}
.report-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.report-meta-pill {
  display: inline-block;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
}
.report-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.report-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 12px;
  background: #fbfcfc;
}
.report-toc-item {
  /* Phase 9 Slice 8 (UI follow-up) — reset native button defaults
     so the TOC item renders as a clean navigation row regardless
     of whether it's an <a> or <button>. The old anchor selector
     became a button when we removed location.hash navigation;
     browser-default button styling produced an ugly thick border
     + bevel + focus outline. */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  text-decoration: none;
  text-align: left;
  color: var(--text);
  font-size: 12.5px;
}
.report-toc-item:hover { background: rgba(67, 145, 109, 0.08); color: var(--accent); }
/* Remove the default browser focus ring on mouse click while
   keeping a visible focus indicator for keyboard users. */
.report-toc-item:focus { outline: none; }
.report-toc-item:focus-visible {
  outline: 2px solid rgba(98, 175, 139, 0.55);
  outline-offset: -2px;
}
.report-toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(67, 145, 109, 0.12);
  color: var(--accent);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.report-toc-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.report-body { display: flex; flex-direction: column; gap: 12px; }
.report-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.report-section h4 {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  background: #f3f7f5;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}
.report-section-body {
  margin: 0;
  padding: 10px 12px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: #3a4a42;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}

/* Full-screen report modal */
.report-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 25, 0.45);
}
.report-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: min(880px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.report-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafcfb, #f3f7f5);
}
.report-modal-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--accent);
}
/* Phase 9 Slice 8 (UI follow-up) — polished modal layout.
   The modal body is the single scroll container; the sticky
   navigation TOC stays pinned at the top while sections scroll
   below. Sections render as cleaner cards with improved
   typography. */
.report-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.report-modal-toc {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #fafcfb;
  border-bottom: 1px solid var(--border);
}
.report-modal-toc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-right: 6px;
}
/* Modal TOC items render as compact pill-style chips, distinct
   from the inline (sidebar) TOC which uses full-width rows. */
.report-modal-toc .report-toc-item {
  width: auto;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  gap: 6px;
}
.report-modal-toc .report-toc-item:hover {
  background: rgba(67, 145, 109, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.report-modal-toc .report-toc-num {
  width: 18px;
  height: 18px;
  font-size: 10.5px;
}
.report-modal-content {
  padding: 18px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.report-modal-content .report-section {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  /* Anchor offset so sticky-TOC doesn't cover the section heading
     when a TOC button scrolls a section into view. */
  scroll-margin-top: 64px;
}
.report-modal-content .report-section h3 {
  margin: 0;
  padding: 12px 18px;
  font-size: 14px;
  background: #f3f7f5;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-weight: 600;
  border-radius: 8px 8px 0 0;
}
.report-modal-content .report-section-body {
  margin: 0;
  padding: 16px 18px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13px;
  line-height: 1.65;
  color: #3a4a42;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: none;
  overflow-y: visible;
}
.report-modal-content .output-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* ----- Styled file upload (replaces ugly default <input type=file>) ----- */
.upload-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upload-input { display: none; }
.upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px dashed var(--accent-3);
  background: #f7faf8;
  border-radius: 6px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.upload-button:hover {
  background: #eaf3ee;
  border-color: var(--accent-2);
  color: var(--accent);
}
.upload-button.is-dragover {
  background: #e0efe7;
  border-style: solid;
  border-color: var(--accent-2);
}
.upload-button-icon { font-size: 14px; line-height: 1; }
.upload-filename {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Provider rows in environment */
.provider-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fbfcfb;
}
.provider-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.provider-card .name {
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
}
.provider-card .key-status {
  font-size: 11px;
  color: var(--text-muted);
}
.provider-card .key-status.has-key { color: var(--st-completed); }
.provider-card .actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* Execution log feed */
.exec-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exec-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  font-size: 12.5px;
  transition: border-color 0.2s ease;
}
.exec-item.s-running    { border-color: var(--st-running); background: #fffbf0; }
.exec-item.s-needs_review { border-color: var(--st-needs-review); background: #fff7e8; }
.exec-item.s-completed, .exec-item.s-approved { border-color: var(--st-completed); }
.exec-item.s-failed     { border-color: var(--st-failed); background: #fff5f5; }

.exec-item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.exec-item .head .title {
  font-weight: 600;
  color: var(--accent);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exec-item .body {
  color: #4b5058;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  background: #fafdfb;
  border: 1px solid #ecf2ee;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
  line-height: 1.5;
}
.exec-item .meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.exec-item .review-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.exec-banner {
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  background: #f1f7f3;
  border: 1px solid #d8e8df;
  color: var(--accent);
}
.exec-banner.error { background: #fff3f3; border-color: #f3d4d4; color: var(--error); }
.exec-banner.warn { background: #fff8ec; border-color: #f3e2c4; color: var(--warn); }

/* Scrollbars */
.drawer-body::-webkit-scrollbar,
.output-box::-webkit-scrollbar,
.exec-item .body::-webkit-scrollbar {
  width: 6px;
}
.drawer-body::-webkit-scrollbar-thumb,
.output-box::-webkit-scrollbar-thumb,
.exec-item .body::-webkit-scrollbar-thumb {
  background: rgba(67, 145, 109, 0.30);
  border-radius: 3px;
}
.drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(67, 145, 109, 0.5); }

/* Subtle divider used in inspector */
.divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* Phase 10 next slice — flat-layout reset for small screens.
   Below 900px the floating shell margins steal too much horizontal
   space, so we snap back to the previous edge-to-edge layout for
   the nav + drawer. The `.app-header` legacy block was removed
   when the new workflow top-bar component shipped; the top-bar's
   own responsive system (sidebar-nav-style measurement ladder)
   owns header behaviour at narrow widths now, so no .app-header
   override is needed here. */
@media (max-width: 900px) {
  .app-drawer {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .app-drawer {
    border: 0;
    border-left: 1px solid var(--border);
  }
}