/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
:root {
  color-scheme: light;
  --bg: #edf4f2;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-strong: #fbfdfc;
  --surface-muted: rgba(232, 241, 240, 0.88);
  --ink: #183242;
  --text: var(--ink);
  --muted: #5d707a;
  --line: rgba(35, 80, 97, 0.16);
  --line-strong: rgba(35, 80, 97, 0.3);
  --accent: #2f7693;
  --accent-strong: #15536b;
  --accent-soft: rgba(47, 118, 147, 0.13);
  --accent-wash: rgba(47, 118, 147, 0.09);
  --info: #2e83a6;
  --info-soft: rgba(46, 131, 166, 0.12);
  --highlight: #d68a2d;
  --warning: #a76d2a;
  --warning-soft: rgba(214, 138, 45, 0.14);
  --success: #4f8138;
  --success-soft: rgba(79, 129, 56, 0.12);
  --danger: #9b4645;
  --danger-soft: rgba(155, 70, 69, 0.13);
  --shadow: 0 22px 56px rgba(24, 50, 66, 0.12);
  --shadow-soft: 0 14px 34px rgba(24, 50, 66, 0.08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --font-display:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Avenir Next", "Segoe UI", "Gill Sans", sans-serif;
  --font-code: "SFMono-Regular", "Menlo", "Monaco", "Courier New", monospace;
  --body-bg: linear-gradient(180deg, #fbfdfc 0%, var(--bg) 100%);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-overlay: rgba(255, 255, 255, 0.82);
  --surface-floating: rgba(255, 255, 255, 0.9);
  --surface-hover: rgba(232, 241, 240, 0.46);
  --field-bg: rgba(255, 255, 255, 0.96);
  --code-surface: #f7faf9;
  --scrim: rgba(24, 50, 66, 0.24);
  --scrim-soft: rgba(24, 50, 66, 0.18);
  --focus-ring: rgba(47, 118, 147, 0.28);
  --logo-ring: rgba(47, 118, 147, 0.18);
  --brand-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  --icon-highlight-filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.8));
  --chat-bg: #f7faf9;
  --chat-bg-overlay: rgba(247, 250, 249, 0.76);
  --chat-background-image:
    linear-gradient(var(--chat-bg-overlay), var(--chat-bg-overlay)),
    url("/assets/3ci_header_logo_transparent-DZb_XDAM.png");
  --graph-bg: linear-gradient(180deg, #fbfdfc 0%, #eef6f4 100%);
  --graph-node-bg: #ffffff;
  --graph-node-success-bg: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(79, 129, 56, 0.08) 100%
  );
  --graph-node-warning-bg: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(214, 138, 45, 0.1) 100%
  );
  --graph-node-error-bg: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(155, 70, 69, 0.1) 100%
  );
  --graph-node-shadow: 0 12px 28px rgba(24, 50, 66, 0.12);
  --graph-node-selected-shadow:
    0 0 0 3px rgba(47, 118, 147, 0.24), 0 12px 28px rgba(24, 50, 66, 0.12);
  --graph-grid: #d8e5e5;
  --graph-edge: #8aa0a5;
  --graph-edge-primary: var(--accent);
  --graph-edge-selected: #143c4d;
  --popover-bg: #183242;
  --popover-text: #ffffff;
  --popover-muted: rgba(255, 255, 255, 0.64);
  --tab-header-height: 92px;
  --tab-bg: linear-gradient(
    180deg,
    rgba(239, 245, 243, 0.96),
    rgba(228, 237, 234, 0.94)
  );
  --tab-hover-bg: linear-gradient(
    180deg,
    rgba(231, 242, 246, 0.96),
    rgba(222, 236, 241, 0.94)
  );
  --tab-active-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 251, 250, 0.96)
  );
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--body-bg);
  color: var(--ink);
  font-family: var(--font-body);
}

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(125, 162, 74, 0.08), transparent 42%),
    linear-gradient(320deg, rgba(47, 118, 147, 0.07), transparent 46%);
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1520px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 14px 0 40px;
}

.eyebrow,
.panel-kicker,
.identity-label {
  margin: 0 0 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
}

.panel-header h2,
.compact-header h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 0.98;
}

.deck {
  margin: 6px 0 0;
  line-height: 1.55;
  color: var(--muted);
  font-size: 0.92rem;
}

.identity-card,
.panel,
.status-banner {
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid var(--surface-glass);
  box-shadow: var(--shadow);
}

.identity-card {
  min-width: 280px;
  padding: 14px 16px 12px;
  border-radius: var(--radius-lg);
}

.identity-menu {
  position: relative;
  min-width: 0;
  z-index: 2;
}

.identity-trigger,
.identity-menu-panel {
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid var(--surface-glass);
  box-shadow: var(--shadow);
}

.identity-trigger {
  width: auto;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.identity-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 6;
  min-width: 100%;
  padding: 12px;
  border-radius: var(--radius-lg);
  display: grid;
  gap: 10px;
}

.identity-menu-copy strong,
.identity-menu-copy span {
  display: block;
}

.identity-trigger-text {
  display: block;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.92rem;
}

.identity-trigger-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition:
    transform 160ms ease,
    color 160ms ease;
}

.identity-trigger-chevron svg {
  width: 14px;
  height: 14px;
}

.identity-trigger[aria-expanded="true"] .identity-trigger-chevron {
  transform: rotate(180deg);
  color: var(--ink);
}

.identity-menu-copy span {
  color: var(--muted);
}

.project-picker-label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

#projectPicker {
  min-width: 240px;
  padding: 9px 12px;
}

.identity-card strong,
.identity-card span {
  display: block;
}

.identity-card span:last-child {
  margin-top: 4px;
  color: var(--muted);
}

.identity-action {
  margin-top: 10px;
  align-self: flex-start;
}

.identity-action-small {
  min-height: 0;
  height: 26px;
  padding: 0 7px;
  font-size: 0.6rem;
  line-height: 1;
  border-radius: var(--radius-sm);
}

.workspace {
  display: grid;
}

.auth-panel {
  width: min(520px, 100%);
  padding: 30px;
  border-radius: var(--radius-xl);
}

.app-shell {
  display: grid;
  gap: 16px;
}

.preview-launcher-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.preview-launcher-panel {
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.preview-launcher-panel h1,
.preview-launcher-panel p {
  margin: 0;
}

.preview-launcher-panel h1 {
  font-family: var(--font-display);
  line-height: 1;
}

.preview-launcher-panel p:not(.panel-kicker) {
  color: var(--muted);
  line-height: 1.55;
}

.preview-launcher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.workspace-topbar,
.project-selection-view,
.workspace-context-panel,
.workspace-section {
  border-radius: var(--radius-xl);
}

.workspace-topbar,
.project-selection-view,
.workspace-context-panel,
.workspace-section {
  padding: 22px;
}

.project-selection-view,
.main-shell {
  display: grid;
  gap: 18px;
}

.workspace-shell {
  display: grid;
  gap: 18px;
}

.workspace-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
  z-index: 3;
  align-items: start;
  gap: 14px;
  padding: 14px 18px;
}

.workspace-project-header {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.workspace-project-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  white-space: nowrap;
}

.workspace-project-subtitle {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.92rem;
}

.requirements-summary-stack {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.requirements-summary-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.requirements-summary-counts {
  justify-content: flex-end;
}

.project-picker-inline {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.panel-header {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.panel-header-inline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.compact-header {
  margin-bottom: 12px;
}

.compact-header h3 {
  font-size: 1.4rem;
}

.sidebar-copy,
.support-copy {
  margin: 0;
  line-height: 1.55;
  color: var(--muted);
  font-size: 0.94rem;
}

.snapshot-stack,
.detail-stack,
.stack-form {
  display: grid;
  gap: 14px;
}

.checkbox-field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  font-weight: 600;
}

.checkbox-field input {
  margin-top: 3px;
}

.project-selection-list {
  margin-top: 12px;
}

.workspace-create-grid {
  align-items: start;
}

.workspace-create-form .detail-card {
  display: grid;
  gap: 14px;
}

.requirements-layout-card,
.requirements-document-card {
  background: var(--surface-overlay);
}

.workspace-context-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
}

.workspace-context-copy {
  max-width: 72ch;
}

.workspace-context-actions {
  display: grid;
  gap: 14px;
  min-width: min(520px, 100%);
}

.workspace-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.section-tab {
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
  white-space: nowrap;
}

.section-tab:hover {
  transform: translateY(-1px);
}

.section-tab.active {
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(47, 118, 147, 0.2);
}

.summary-pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.step-card,
.task-selector,
.summary-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  box-shadow: var(--shadow-soft);
}

.summary-card {
  padding: 16px 18px;
}

.step-card .metric-label {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
}

.traceability-grid,
.planning-top-grid {
  display: grid;
  gap: 16px;
}

.task-selector strong,
.summary-card strong,
.summary-card span {
  display: block;
}

.summary-card strong + span {
  margin-top: 6px;
}

.summary-pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-overlay);
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

.status-chip.success,
.summary-pill.success,
.step-card.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.status-chip.warning,
.summary-pill.warning,
.step-card.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(214, 138, 45, 0.24);
}

.status-chip.error,
.summary-pill.error,
.step-card.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.24);
}

.detail-card h3,
.detail-card h4 {
  margin: 0;
  font-family: var(--font-display);
}

.workspace-section {
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
}

.planning-top-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.execution-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
}

.traceability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-floating);
  padding: 18px;
}

.empty-state {
  color: var(--muted);
}

.item-list,
.project-list,
.execution-task-list {
  display: grid;
  gap: 10px;
}

.item-button,
.task-selector {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--surface-overlay);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.selector-chip {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-overlay);
  color: var(--muted);
  padding: 8px 14px;
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.selector-chip.active {
  background: var(--accent-soft);
  border-color: rgba(47, 118, 147, 0.28);
  color: var(--accent-strong);
}

.selector-chip:hover {
  transform: translateY(-1px);
}

.item-button:hover,
.task-selector:hover {
  transform: translateY(-1px);
}

.item-button.active,
.task-selector.active {
  background: var(--surface-strong);
  border-color: rgba(47, 118, 147, 0.28);
  box-shadow: inset 0 0 0 1px rgba(46, 131, 166, 0.08);
}

.task-selector {
  display: grid;
  gap: 8px;
}

.task-selector-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.task-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.step-card {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.step-card .step-title {
  font-size: 0.82rem;
  font-weight: 700;
}

.focus-summary-grid,
.trace-chain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.history-stack {
  display: grid;
  gap: 14px;
}

.history-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-floating);
  padding: 18px;
  display: grid;
  gap: 16px;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.history-card-body {
  display: grid;
  gap: 14px;
}

.trace-chain-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-card pre,
.code-block {
  white-space: pre-wrap;
  margin: 0;
}

.detail-card pre {
  font-family: var(--font-body);
  line-height: 1.6;
}

.code-field,
.code-block,
code {
  font-family: var(--font-code);
  font-size: 0.9rem;
}

.structured-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.structured-list li,
.timeline-list li {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-overlay);
  padding: 12px 14px;
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.artifact-list,
.revision-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.meta-line,
.structured-list span,
.timeline-list span {
  display: block;
  color: var(--muted);
}

.field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.advanced-field {
  margin-top: 12px;
}

.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--field-bg);
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.editor-shell,
.advanced-shell {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  overflow: hidden;
}

.editor-shell > summary,
.advanced-shell > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-muted);
}

.editor-shell > summary::-webkit-details-marker,
.advanced-shell > summary::-webkit-details-marker {
  display: none;
}

.editor-body {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.advanced-grid {
  margin-top: 12px;
}

.action-row,
.approval-actions,
.editor-toolbar,
.button-row,
.selector-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.view-tab-list {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.view-tab {
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.view-tab:hover {
  transform: translateY(-1px);
}

.view-tab.active {
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(47, 118, 147, 0.2);
}

.run-control-row {
  margin-top: 6px;
}

.message-composer {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.composer-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-textarea {
  min-height: 96px;
}

.run-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.compact-row {
  gap: 8px;
}

.review-actions {
  align-items: center;
  justify-content: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.primary-button,
.secondary-button,
.ghost-button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.primary-button {
  background: var(--accent);
  color: white;
}

.secondary-button {
  background: var(--surface-overlay);
  color: var(--ink);
  border: 1px solid var(--line);
}

.inline-button {
  padding-inline: 14px;
}

.primary-button.active-button,
.secondary-button.active-button {
  box-shadow: inset 0 0 0 1px rgba(47, 118, 147, 0.24);
  background: var(--surface-strong);
  color: var(--ink);
}

.ghost-button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

.danger-button {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.3);
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.onboarding-form {
  display: grid;
  gap: 16px;
}

.item-empty {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--line-strong);
  background: var(--surface-muted);
  color: var(--muted);
}

.status-banner {
  position: fixed;
  left: 24px;
  bottom: 20px;
  z-index: 1000;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
}

.status-banner.success {
  border-left: 5px solid var(--success);
}

.status-banner.error {
  border-left: 5px solid var(--danger);
}

.inline-note {
  margin: 0;
}

.instruction-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--ink);
}

.instruction-banner p {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  line-height: 1.45;
  font-size: 0.93rem;
}

.instruction-banner strong {
  color: var(--accent-strong);
}

.instruction-banner .instruction-banner-action {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 8px;
}

.workspace-toolbar-right {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 4;
  justify-items: end;
  align-items: start;
}

.identity-menu-inline {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: end;
  justify-self: end;
  z-index: 5;
}

.identity-menu-inline .identity-trigger {
  min-height: 42px;
  padding: 6px 8px 6px 6px;
  border-color: rgba(47, 118, 147, 0.22);
  background: var(--surface-overlay);
}

.identity-menu-inline .identity-menu-panel {
  min-width: 260px;
  max-width: calc(100vw - 32px);
  border-color: rgba(47, 118, 147, 0.22);
}

.identity-menu-inline .identity-trigger-text {
  max-width: min(34vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-workflow-status {
  max-width: min(34vw, 260px);
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-status-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: min(38vw, 300px);
  font-size: 0.72rem;
}

.workspace-settings-gear-button {
  width: 1.15em;
  height: 1.15em;
  min-width: 1.15em;
  min-height: 1.15em;
  padding: 0;
  border: 1px solid rgba(47, 118, 147, 0.28);
  border-radius: 4px;
  background: var(--surface-overlay);
  box-sizing: border-box;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.workspace-settings-gear-button svg {
  width: 0.95em;
  height: 0.95em;
}

.workspace-settings-gear-button:hover,
.workspace-settings-gear-button:focus-visible,
.workspace-settings-gear-button.active {
  color: var(--accent-strong);
  border-color: rgba(47, 118, 147, 0.42);
  background: rgba(47, 118, 147, 0.1);
}

.identity-trigger-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

.identity-menu-action {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.identity-menu-action:hover,
.identity-menu-action:focus-visible,
.identity-menu-action.active {
  border-color: var(--line);
  background: var(--surface-muted);
}

.workspace-toolbar-status {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.workspace-toolbar-status-reserved {
  visibility: hidden;
  pointer-events: none;
}

.workspace-icon-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.workspace-state-icon,
.workspace-state-chip,
.workspace-icon-button {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-overlay);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-state-icon svg,
.workspace-state-chip svg,
.workspace-icon-button svg {
  width: 20px;
  height: 20px;
}

.workspace-state-chip {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding: 0 14px 0 12px;
  gap: 8px;
  white-space: nowrap;
}

.workspace-state-chip-text {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.workspace-state-icon.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.workspace-state-icon.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(214, 138, 45, 0.24);
}

.workspace-state-icon.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.24);
}

.workspace-state-chip.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.workspace-state-chip.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(214, 138, 45, 0.24);
}

.workspace-state-chip.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.24);
}

.workspace-icon-button {
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.labeled-icon-button {
  width: auto;
  min-width: 42px;
  padding: 0 14px 0 12px;
  gap: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  max-width: 100%;
}

.labeled-icon-button::after {
  content: attr(data-label);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  line-height: 1;
}

.workspace-icon-button-text {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.workspace-icon-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 118, 147, 0.32);
}

.workspace-icon-button.active {
  color: var(--accent-strong);
  background: rgba(47, 118, 147, 0.12);
  border-color: rgba(47, 118, 147, 0.28);
}

.workspace-icon-button:focus-visible {
  outline: 2px solid rgba(47, 118, 147, 0.4);
  outline-offset: 2px;
}

.icon-action-row,
.section-icon-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.icon-action-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}

.icon-action-button svg {
  width: 20px;
  height: 20px;
}

.icon-action-button-success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.icon-action-button-danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.24);
}

.icon-action-button-warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(214, 138, 45, 0.24);
}

.icon-action-button:hover {
  transform: translateY(-1px);
}

.workspace-lock-icon {
  flex: 0 0 42px;
}

.workspace-selection-lock-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  box-shadow: none;
}

.workspace-selection-lock-icon svg {
  width: 16px;
  height: 16px;
}

.workspace-settings-panel,
.inline-callout,
.markdown-card,
.table-shell,
.chat-shell {
  border: 1px solid var(--line);
  background: var(--surface-overlay);
}

.workspace-settings-panel {
  padding: 22px;
  border-radius: 8px;
}

.settings-panel-header {
  align-self: start;
  align-items: flex-start;
}

.settings-panel-close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.settings-panel-close svg {
  width: 18px;
  height: 18px;
}

.settings-panel-close:hover,
.settings-panel-close:focus-visible {
  color: var(--accent-strong);
  border-color: rgba(47, 118, 147, 0.36);
}

.user-settings-panel {
  display: grid;
  gap: 18px;
  align-content: start;
  grid-auto-rows: max-content;
}

.user-settings-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.user-settings-nav {
  display: grid;
  gap: 8px;
}

.user-settings-nav-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.user-settings-nav-item span {
  font-weight: 800;
}

.user-settings-nav-item small {
  color: var(--muted);
}

.user-settings-nav-item:hover,
.user-settings-nav-item:focus-visible,
.user-settings-nav-item.active {
  border-color: rgba(47, 118, 147, 0.36);
  background: var(--surface-strong);
}

.user-settings-detail {
  min-width: 0;
}

.settings-section-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  grid-auto-rows: max-content;
  padding: 18px;
  border: 1px solid rgba(47, 118, 147, 0.22);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.user-settings-detail-panel {
  min-height: 360px;
}

.settings-detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.settings-detail-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(47, 118, 147, 0.12);
}

.settings-detail-list dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.user-secret-form-grid {
  align-items: end;
}

.user-profile-editor {
  min-height: 460px;
  resize: vertical;
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono",
    monospace;
  font-size: 0.88rem;
  line-height: 1.55;
}

.compact-form {
  gap: 10px;
}

.settings-list-icon-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  box-shadow: none;
}

.settings-list-icon-button svg {
  width: 18px;
  height: 18px;
}

.danger-icon-button {
  color: var(--danger);
  border-color: rgba(155, 70, 69, 0.24);
}

.settings-provider-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-provider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.settings-provider-actions {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: flex-end;
}

.settings-provider-model {
  min-width: 180px;
  margin: 0;
}

.settings-provider-add-form {
  padding-top: 12px;
  border-top: 1px solid rgba(47, 118, 147, 0.16);
}

.context-sources-editor {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(47, 118, 147, 0.22);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 14px 32px rgba(24, 39, 54, 0.08);
}

.inline-section-header {
  display: flex;
  align-self: start;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.inline-section-header h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.context-source-kind,
.context-source-status-pill,
.context-source-test-result {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.context-source-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.context-source-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(47, 118, 147, 0.16);
}

.context-source-row {
  display: grid;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.context-source-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.context-source-title {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.context-source-title-file,
.context-source-title-url,
.context-source-title-figma {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.context-source-inline-title {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.context-source-inline-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.context-source-kind {
  min-height: 42px;
  align-self: end;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: rgba(47, 118, 147, 0.22);
}

.context-source-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.context-source-status {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text);
}

.context-source-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
  min-width: 0;
}

.context-source-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.context-source-status-pill {
  display: grid;
  align-content: center;
  gap: 2px;
  max-width: 240px;
  min-height: 38px;
  overflow-wrap: anywhere;
}

.context-source-status-label {
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.context-source-status-value {
  color: currentColor;
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.context-source-remediation {
  margin: -2px 0 0;
}

.context-source-status-pill.ready,
.context-source-test-result.ready {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.context-source-status-pill.warning,
.context-source-test-result.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(214, 138, 45, 0.28);
}

.context-source-status-pill.muted {
  color: var(--muted);
  background: rgba(232, 241, 240, 0.86);
}

.context-source-status-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.context-source-status-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.context-source-status-icon.ready {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.context-source-status-icon.warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(214, 138, 45, 0.28);
}

.context-source-add {
  position: relative;
  flex: 0 0 auto;
}

.context-source-icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.context-source-test-button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.context-source-icon-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.context-source-test-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.context-source-icon-button:hover,
.context-source-test-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 118, 147, 0.32);
  background: var(--surface-strong);
}

.context-source-icon-button:focus-visible,
.context-source-test-button:focus-visible,
.context-source-type-menu button:focus-visible {
  outline: 2px solid rgba(47, 118, 147, 0.4);
  outline-offset: 2px;
}

.context-source-remove-button {
  width: 30px;
  height: 30px;
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.3);
}

.context-source-remove-button svg {
  width: 14px;
  height: 14px;
}

.context-source-type-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 220px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.context-source-type-menu button {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.context-source-type-menu button span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.context-source-type-menu button:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.context-source-connect-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.context-source-help {
  flex: 1 1 260px;
  margin: 0;
}

.compact-field {
  margin: 0;
}

@media (max-width: 760px) {
  .context-source-card-header,
  .context-source-title {
    grid-template-columns: 1fr;
  }

  .context-source-actions {
    justify-content: flex-start;
  }
}

.specification-grid,
.planning-grid {
  align-items: start;
}

.requirements-layout-card {
  padding: 10px 14px;
}

.requirements-layout-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.requirements-layout-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.requirements-layout-icon {
  width: 38px;
  height: 38px;
}

.requirements-layout-icon.labeled-icon-button,
.requirements-approval-icon.labeled-icon-button,
.requirements-action-button.labeled-icon-button {
  width: auto;
  min-width: 42px;
  padding: 0 14px 0 12px;
}

.requirements-layout-icon-complete {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.requirements-layout-icon-regenerate {
  color: var(--accent-strong);
  background: rgba(47, 118, 147, 0.12);
  border-color: rgba(47, 118, 147, 0.24);
}

.requirements-layout-view {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.requirements-layout-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.requirements-view-toggle {
  gap: 4px;
  padding: 2px;
}

.requirements-view-toggle .view-tab {
  padding: 6px 10px;
}

.requirements-grid {
  grid-template-columns: var(
    --requirements-grid-columns,
    minmax(320px, 0.86fr) minmax(0, 1.14fr)
  );
  align-items: stretch;
  min-height: 72vh;
}

.requirements-grid-session {
  grid-template-columns: var(
    --requirements-grid-columns,
    minmax(240px, 0.42fr) minmax(0, 1.58fr)
  );
  min-height: 80vh;
}

.requirements-grid-focus {
  min-height: 86vh;
}

.requirements-document-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: start;
  min-height: 72vh;
}

.requirements-document-main,
.requirements-document-sidebar {
  min-width: 0;
}

.requirements-document-search-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.requirements-document-search-field {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
}

.requirements-document-search-field span {
  margin: 0;
  white-space: nowrap;
}

.requirements-document-search-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.requirements-document-search-input-row input[type="search"] {
  height: 34px;
  min-height: 34px;
  padding-block: 0;
}

.requirements-document-search-summary {
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  width: 22ch;
  min-width: 22ch;
  min-height: 34px;
  padding-bottom: 0;
}

.requirements-document-search-count {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 22ch;
  min-width: 22ch;
  min-height: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.requirements-document-search-arrow-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.requirements-document-card {
  min-height: 72vh;
}

.requirements-document-markdown,
.specification-markdown {
  align-content: start;
  row-gap: 0;
}

.requirements-document-markdown {
  line-height: 1.56;
}

.specification-markdown {
  line-height: 1.44;
}

.requirements-document-markdown h1,
.requirements-document-markdown h2,
.requirements-document-markdown h3,
.requirements-document-markdown p,
.specification-markdown h1,
.specification-markdown h2,
.specification-markdown h3,
.specification-markdown p {
  margin-top: 0;
}

.requirements-document-markdown h1,
.specification-markdown h1 {
  margin-bottom: 0.98rem;
  line-height: 1.1;
}

.specification-markdown h1 {
  margin-bottom: 0.72rem;
}

.requirements-document-markdown h2,
.specification-markdown h2 {
  margin-bottom: 0.52rem;
  line-height: 1.16;
}

.specification-markdown h2 {
  margin-bottom: 0.32rem;
}

.requirements-document-markdown h2:not(:first-child),
.specification-markdown h2:not(:first-child) {
  margin-top: 1.15rem;
}

.specification-markdown h2:not(:first-child) {
  margin-top: 1rem;
}

.requirements-document-markdown h3,
.specification-markdown h3 {
  margin-bottom: 0.42rem;
  line-height: 1.18;
}

.specification-markdown h3 {
  margin-bottom: 0.22rem;
}

.requirements-document-markdown h3:not(:first-child),
.specification-markdown h3:not(:first-child) {
  margin-top: 0.72rem;
}

.specification-markdown h3:not(:first-child) {
  margin-top: 0.6rem;
}

.requirements-document-markdown p,
.specification-markdown p {
  margin-bottom: 0.58rem;
}

.requirements-document-markdown p {
  margin-bottom: 0.66rem;
}

.specification-markdown p {
  margin-bottom: 0.5rem;
}

.requirements-document-markdown ul,
.requirements-document-markdown ol,
.specification-markdown ul,
.specification-markdown ol {
  display: grid;
  gap: 0.24rem;
  margin: 0 0 0.68rem;
  padding-left: 1.2rem;
}

.requirements-document-markdown ul,
.requirements-document-markdown ol {
  gap: 0.72rem;
  margin-bottom: 0.92rem;
}

.specification-markdown ul,
.specification-markdown ol {
  gap: 0.18rem;
  margin-bottom: 0.58rem;
}

.requirements-document-markdown li,
.specification-markdown li {
  padding-left: 0.12rem;
}

.requirements-document-markdown a,
.specification-markdown a {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.requirements-document-markdown a:hover,
.requirements-document-markdown a:focus-visible,
.specification-markdown a:hover,
.specification-markdown a:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
  outline: 2px solid rgba(47, 118, 147, 0.22);
  outline-offset: 2px;
}

.requirements-document-requirement-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 1.72rem;
  margin: 0 0.14rem 0.08rem 0;
  padding: 0 0.46rem;
  border: 1px solid rgba(47, 118, 147, 0.34);
  border-radius: 8px;
  color: var(--accent-strong);
  background: rgba(47, 118, 147, 0.11);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.84em;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.requirements-document-requirement-chip:hover,
.requirements-document-requirement-chip:focus-visible {
  color: var(--ink);
  background: rgba(79, 129, 56, 0.13);
  border-color: rgba(79, 129, 56, 0.34);
}

.specification-requirement-chip-token {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  vertical-align: baseline;
}

.specification-requirement-chip-token .requirements-document-requirement-chip {
  margin-right: 0;
}

.specification-requirement-chip-punctuation {
  margin-right: 0.24rem;
}

.requirements-document-requirement-chip.active {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.44);
}

.requirements-document-requirement-chip.matched {
  box-shadow: 0 0 0 2px rgba(167, 109, 42, 0.18);
}

.requirements-search-mark {
  border-radius: 4px;
  padding: 0 0.14em;
  color: var(--ink);
  background: rgba(232, 190, 92, 0.62);
}

.requirements-search-mark.active,
.requirements-search-mark[data-current-search-match="true"] {
  background: var(--warning-soft);
  box-shadow: 0 0 0 2px rgba(201, 106, 43, 0.36);
}

.requirements-focus-card {
  display: grid;
  gap: 14px;
}

.requirements-review-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.requirements-console-card {
  display: grid;
  gap: 14px;
}

.requirements-console-action-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.execution-dashboard-grid,
.traceability-feature-grid,
.planning-narratives {
  display: grid;
  gap: 14px;
}

.execution-dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.traceability-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.planning-narratives {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.traceability-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.traceability-filter {
  width: min(360px, 100%);
}

.inline-callout {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--ink);
}

.inline-callout.warning {
  background: var(--warning-soft);
  border-color: rgba(167, 109, 42, 0.35);
}

.markdown-card {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  display: grid;
  gap: 10px;
}

.markdown-card h4,
.markdown-card h5,
.markdown-card h6,
.markdown-card p:last-child {
  margin: 0;
}

.specification-markdown table {
  width: 100%;
  border-collapse: collapse;
}

.specification-markdown th,
.specification-markdown td {
  padding: 8px 10px;
  border: 1px solid var(--line);
}

.table-shell {
  overflow: auto;
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.active-filter {
  background: var(--accent-soft);
  border-color: rgba(47, 118, 147, 0.28);
  color: var(--accent-strong);
}

.selection-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-overlay);
}

.requirements-list-card {
  display: grid;
  gap: 12px;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.requirements-list-header {
  align-items: center;
}

.requirements-list-toggle,
.requirements-list-rail-toggle {
  flex-shrink: 0;
}

.requirements-list-rail {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
  width: 100%;
  min-height: 100%;
  padding: 16px 12px;
}

.requirements-list-rail-body {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.requirements-list-rail-count {
  font-size: 1.45rem;
  line-height: 1;
}

.requirements-list-rail-label,
.requirements-list-rail-selection {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.requirements-list-rail-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 0.74rem;
}

.requirements-list-rail-selection {
  font-size: 0.78rem;
  color: var(--accent-strong);
  max-height: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-mode-row {
  justify-content: flex-start;
}

.requirements-action-button {
  width: 38px;
  height: 38px;
}

.requirements-action-button svg {
  width: 18px;
  height: 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.opencode-chat-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: clamp(34rem, 62vh, 60rem);
  height: 100%;
  min-width: 0;
  background-color: var(--chat-bg);
  background-image: var(--chat-background-image);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size:
    100% 100%,
    min(92%, 900px) auto;
}

.opencode-chat-shell-global {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  background-position: center, center;
  background-size:
    100% 100%,
    min(96%, 880px) auto;
}

.opencode-chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.opencode-chat-toolbar > div:first-child {
  display: grid;
  gap: 2px;
}

.compact-button {
  min-height: 38px;
  padding: 0 12px;
}

.opencode-chat-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--chat-bg);
  background-image: var(--chat-background-image);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size:
    100% 100%,
    min(96%, 880px) auto;
}

.opencode-chat-placeholder {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 24rem;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background-color: var(--chat-bg);
  background-image: var(--chat-background-image);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size:
    100% 100%,
    min(92%, 900px) auto;
  text-align: center;
}

.opencode-chat-placeholder-empty {
  min-height: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.opencode-chat-placeholder-top {
  align-content: start;
  justify-items: start;
  min-height: 0;
  height: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  text-align: left;
}

.opencode-chat-placeholder-top span {
  display: inline-flex;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.requirements-list-column {
  align-self: stretch;
  display: flex;
  min-width: 0;
}

.requirements-list-column-collapsed {
  min-width: 0;
}

.requirements-list-resizable {
  min-width: 320px;
  max-width: none;
  resize: horizontal;
  overflow: auto;
  height: 100%;
}

.requirements-list-resizable.requirements-list-column-collapsed {
  min-width: 84px;
  resize: none;
  overflow: visible;
}

.requirements-grid #requirementList {
  height: auto;
  min-height: 21rem;
  max-height: min(42rem, calc(100vh - 18rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.requirements-workspace-card {
  display: grid;
  gap: 16px;
  width: 100%;
  height: 100%;
  align-self: stretch;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.requirements-workspace-card-session {
  gap: 18px;
}

.requirements-workspace-card-focus {
  gap: 12px;
}

.requirements-document-card {
  display: grid;
  gap: 14px;
}

.requirements-workspace-header {
  align-items: center;
}

.requirements-workspace-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
  height: 100%;
}

#requirementsWorkspaceSessionPanel {
  grid-template-rows: minmax(0, 1fr) auto;
}

.requirements-workspace-panel-session {
  gap: 16px;
}

.requirements-subpanel-card,
.requirements-subpanel-note {
  margin: 0;
}

.requirements-session-context {
  display: grid;
  gap: 14px;
  align-content: start;
}

.requirements-session-context-focus {
  gap: 10px;
}

.requirements-session-summary {
  margin-top: 0;
}

.requirements-session-summary-focus .summary-card {
  padding: 12px 14px;
}

.requirements-grid-session .requirements-list-resizable {
  max-width: none;
}

.requirements-inline-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.requirements-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.requirements-approval-icon {
  width: 38px;
  height: 38px;
}

.requirements-approval-icon-approve {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(79, 129, 56, 0.24);
}

.requirements-approval-icon-reject {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(155, 70, 69, 0.24);
}

.deft-launcher {
  --deft-launcher-edge-inset: clamp(7px, calc(3vw - 5px), 19px);
  --deft-launcher-visual-y-offset: 5px;

  position: fixed;
  left: auto;
  right: var(--deft-launcher-edge-inset);
  bottom: var(--deft-launcher-edge-inset);
  z-index: 40;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  padding: 2px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  transform: translateY(var(--deft-launcher-visual-y-offset));
}

.deft-launcher.active {
  background: transparent;
}

.deft-launcher:hover,
.deft-launcher:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.deft-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-strong);
  overflow: hidden;
  box-shadow: none;
}

.deft-launcher-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deft-launcher-icon svg {
  width: 20px;
  height: 20px;
}

.deft-launcher-copy {
  display: grid;
  gap: 2px;
  text-align: left;
}

.deft-launcher-copy strong {
  font-size: 0.96rem;
}

.deft-launcher-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.deft-console-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  border: 0;
  background: var(--scrim-soft);
  backdrop-filter: blur(4px);
}

.deft-onboarding-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  background: var(--scrim);
  backdrop-filter: blur(4px);
}

.deft-onboarding-modal {
  position: fixed;
  inset: 28px;
  z-index: 31;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--surface-glass);
  border-radius: 8px;
  background-color: var(--chat-bg);
  background-image: var(--chat-background-image);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size:
    100% 100%,
    min(96%, 880px) auto;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.deft-onboarding-modal .opencode-chat-shell {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background-position: center, center;
  background-size:
    100% 100%,
    min(96%, 880px) auto;
}

.deft-chat-title-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.deft-chat-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.deft-chat-label-row .panel-kicker {
  margin: 0;
}

.deft-chat-label-row-heading {
  gap: 7px;
}

.deft-chat-app-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  object-fit: contain;
  box-shadow: inset 0 0 0 1px rgba(47, 118, 147, 0.18);
}

.confirmation-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  background: var(--scrim);
  backdrop-filter: blur(4px);
}

.confirmation-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 31;
  width: min(440px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--surface-glass);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}

.confirmation-actions {
  justify-content: flex-end;
}

.github-device-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.github-device-code-value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(47, 118, 147, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(47, 118, 147, 0.09);
  color: var(--accent-strong);
  font-family: var(--font-code);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.github-device-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-overlay);
  color: var(--accent-strong);
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}

.github-device-copy-button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 118, 147, 0.34);
  background: var(--accent-wash);
}

.github-device-copy-button svg {
  width: 18px;
  height: 18px;
}

.deft-console-shell {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(720px, calc(100vw - 32px));
  min-width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: calc(100dvh - 32px);
  min-height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
  z-index: 21;
  pointer-events: none;
}

.deft-console-shell.expanded {
  bottom: 16px;
  width: calc(100vw - 32px);
  height: calc(100dvh - 32px);
  min-height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
}

.deft-console-shell.open {
  pointer-events: auto;
}

.deft-console-card-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  overflow: hidden;
}

.deft-console-card-shell-chat-only {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background-color: var(--chat-bg);
  background-image: var(--chat-background-image);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size:
    100% 100%,
    min(96%, 880px) auto;
}

.deft-console-width-toggle {
  position: absolute;
  top: 50%;
  left: 2px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(35, 80, 97, 0.16);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-50%);
}

.deft-console-width-toggle-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}

.deft-console-shell.expanded .deft-console-width-toggle-chevron {
  transform: rotate(-45deg);
}

.deft-console-width-toggle:focus-visible {
  outline: 3px solid rgba(47, 118, 147, 0.24);
  outline-offset: 2px;
}

.deft-console-status {
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(35, 80, 97, 0.14);
  background: var(--surface-overlay);
}

.deft-console-status h3 {
  margin: 0;
  color: var(--accent);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.deft-console-header {
  align-items: flex-start;
}

.deft-console-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow: auto;
}

.deft-console-body-conversation {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.deft-console-card-shell-chat-only .deft-console-body-conversation {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.deft-console-body-conversation .opencode-chat-shell {
  min-height: clamp(28rem, 62vh, 44rem);
}

.deft-console-card-shell-chat-only .opencode-chat-shell {
  min-height: 0;
}

.deft-console-context-stack {
  display: grid;
  gap: 16px;
}

.deft-console-action-grid {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.selection-list li + li {
  border-top: 1px solid var(--line);
}

.selection-list .item-button,
.selection-list .task-selector {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.selection-list .item-button:hover,
.selection-list .task-selector:hover {
  background: var(--surface-overlay);
}

.selection-list .item-button.active,
.selection-list .task-selector.active {
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 rgba(47, 118, 147, 0.48);
}

.execution-task-list .selection-list {
  margin: 0;
}

.workspace-list-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.workspace-list-item,
.workspace-list-item-body,
.workspace-detail-list {
  display: grid;
  gap: 10px;
}

.workspace-detail-list {
  margin-top: 14px;
}

.workspace-detail-row {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.workspace-detail-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.workspace-detail-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.primary-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 1320px) {
  .traceability-grid,
  .trace-chain-grid,
  .traceability-feature-grid,
  .execution-dashboard-grid,
  .planning-narratives {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .section-grid,
  .planning-top-grid,
  .execution-grid,
  .traceability-grid,
  .focus-summary-grid,
  .trace-chain-grid,
  .history-grid,
  .task-stepper,
  .two-up,
  .run-activity-grid,
  .traceability-feature-grid,
  .execution-dashboard-grid,
  .planning-narratives {
    grid-template-columns: 1fr;
  }

  .panel-header-inline,
  .workspace-context-header {
    flex-direction: column;
  }

  .summary-pill-row {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .requirements-summary-stack {
    justify-items: start;
  }

  .requirements-summary-icons,
  .requirements-summary-counts {
    justify-content: flex-start;
  }

  .workspace-topbar {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .workspace-project-header h1 {
    white-space: normal;
  }

  .requirements-layout-toolbar {
    align-items: stretch;
  }

  .requirements-layout-view {
    margin-left: 0;
    justify-content: flex-start;
  }

  .requirements-document-search-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .requirements-document-search-field {
    grid-template-columns: 1fr;
  }

  .requirements-document-search-summary {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .requirements-document-card {
    min-height: auto;
  }

  .requirements-list-resizable {
    resize: none;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
  }

  .requirements-list-rail {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    min-height: auto;
  }

  .requirements-list-rail-body {
    justify-items: start;
    text-align: left;
  }

  .requirements-list-rail-label,
  .requirements-list-rail-selection {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .requirements-grid-focus {
    min-height: auto;
  }

  .workspace-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .project-picker-inline,
  .workspace-toolbar-right {
    justify-items: start;
  }

  .workspace-toolbar-status {
    justify-content: flex-start;
  }

  .traceability-toolbar {
    justify-content: stretch;
  }

  .traceability-filter {
    width: 100%;
  }

  .deft-console-shell {
    left: auto;
    right: 16px;
    bottom: 16px;
  }

  .deft-onboarding-modal {
    inset: 16px;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(100vw - 18px, 1520px);
    padding-top: 18px;
  }

  .project-selection-view,
  .workspace-context-panel,
  .workspace-topbar,
  .workspace-section,
  .auth-panel {
    padding: 18px;
  }

  #projectPicker {
    min-width: 0;
    width: 100%;
  }

  .labeled-icon-button {
    width: 42px;
    padding: 0;
  }

  .labeled-icon-button::after {
    content: none;
  }

  .workspace-toolbar-status .labeled-icon-button {
    width: auto;
    padding: 0 14px 0 12px;
  }

  .deft-launcher {
    --deft-launcher-edge-inset: 7px;

    left: auto;
    right: var(--deft-launcher-edge-inset);
    bottom: var(--deft-launcher-edge-inset);
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    justify-content: center;
  }

  .deft-console-shell {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .deft-console-shell.expanded {
    bottom: 12px;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .deft-console-width-toggle {
    display: none;
  }

  .deft-console-card-shell {
    padding: 16px;
  }

  .deft-console-card-shell-chat-only {
    padding: 0;
  }

  .status-banner {
    left: 12px;
    right: 12px;
    bottom: 76px;
    max-width: none;
  }

  .deft-onboarding-modal {
    inset: 12px;
    padding: 16px;
  }
}

/* Cockpit workspace: global workflow state plus detailed project compass views. */
:root {
  color-scheme: light;
  --bg: #edf4f2;
  --surface: #ffffff;
  --surface-strong: #fbfdfc;
  --surface-muted: #e8f1f0;
  --ink: #183242;
  --text: var(--ink);
  --muted: #5d707a;
  --line: rgba(35, 80, 97, 0.15);
  --line-strong: rgba(35, 80, 97, 0.3);
  --accent: #2f7693;
  --accent-strong: #15536b;
  --accent-soft: rgba(47, 118, 147, 0.13);
  --accent-wash: rgba(47, 118, 147, 0.09);
  --info: #2e83a6;
  --info-soft: rgba(46, 131, 166, 0.13);
  --highlight: #d68a2d;
  --warning: #a76d2a;
  --warning-soft: rgba(214, 138, 45, 0.15);
  --success: #4f8138;
  --success-soft: rgba(79, 129, 56, 0.13);
  --danger: #9b4645;
  --danger-soft: rgba(155, 70, 69, 0.12);
  --shadow: 0 16px 36px rgba(24, 50, 66, 0.1);
  --shadow-soft: 0 8px 20px rgba(24, 50, 66, 0.08);
  --radius-xl: 8px;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --font-display: "Avenir Next", "Segoe UI", "Gill Sans", sans-serif;
  --font-body: "Avenir Next", "Segoe UI", "Gill Sans", sans-serif;
  --body-bg: linear-gradient(180deg, #fbfdfc 0%, #f5f9f8 44%, var(--bg) 100%);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-overlay: rgba(255, 255, 255, 0.82);
  --surface-floating: rgba(255, 255, 255, 0.9);
  --surface-hover: rgba(232, 241, 240, 0.46);
  --field-bg: rgba(255, 255, 255, 0.96);
  --code-surface: #f7faf9;
  --scrim: rgba(24, 50, 66, 0.24);
  --scrim-soft: rgba(24, 50, 66, 0.18);
  --focus-ring: rgba(47, 118, 147, 0.28);
  --logo-ring: rgba(47, 118, 147, 0.18);
  --brand-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  --icon-highlight-filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.8));
  --chat-bg: #f7faf9;
  --chat-bg-overlay: rgba(247, 250, 249, 0.76);
  --chat-background-image:
    linear-gradient(var(--chat-bg-overlay), var(--chat-bg-overlay)),
    url("/assets/3ci_header_logo_transparent-DZb_XDAM.png");
  --graph-bg: linear-gradient(180deg, #fbfdfc 0%, #eef6f4 100%);
  --graph-node-bg: #ffffff;
  --graph-node-success-bg: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(79, 129, 56, 0.08) 100%
  );
  --graph-node-warning-bg: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(214, 138, 45, 0.1) 100%
  );
  --graph-node-error-bg: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(155, 70, 69, 0.1) 100%
  );
  --graph-node-shadow: 0 12px 28px rgba(24, 50, 66, 0.12);
  --graph-node-selected-shadow:
    0 0 0 3px rgba(47, 118, 147, 0.24), 0 12px 28px rgba(24, 50, 66, 0.12);
  --graph-grid: #d8e5e5;
  --graph-edge: #8aa0a5;
  --graph-edge-primary: var(--accent);
  --graph-edge-selected: #143c4d;
  --popover-bg: #183242;
  --popover-text: #ffffff;
  --popover-muted: rgba(255, 255, 255, 0.64);
  --tab-bg: linear-gradient(
    180deg,
    rgba(239, 245, 243, 0.96),
    rgba(228, 237, 234, 0.94)
  );
  --tab-hover-bg: linear-gradient(
    180deg,
    rgba(231, 242, 246, 0.96),
    rgba(222, 236, 241, 0.94)
  );
  --tab-active-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 251, 250, 0.96)
  );
}

body {
  background: var(--body-bg);
}

.backdrop {
  display: none;
}

.page-shell {
  width: min(1640px, calc(100vw - 28px));
  padding: 14px 0 32px;
}

.panel,
.identity-trigger,
.identity-menu-panel,
.status-banner {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}

.app-shell,
.workspace-shell,
.project-selection-view,
.main-shell,
.snapshot-stack,
.detail-stack {
  gap: 10px;
}

.workspace-topbar {
  align-items: center;
  padding: 12px 14px;
  border-bottom: 3px solid var(--accent);
}

.workspace-project-header {
  gap: 0;
}

.cockpit-header .workspace-project-header {
  position: relative;
  min-height: 48px;
  padding-left: 0;
}

.workspace-brand-row {
  position: absolute;
  top: -4px;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
}

.workspace-brand-row .panel-kicker {
  color: var(--accent-strong);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-shadow: var(--brand-text-shadow);
}

.workspace-project-copy {
  display: grid;
  gap: 2px;
  margin-top: 0;
  min-width: 0;
  padding-left: clamp(178px, 16vw, 232px);
}

.app-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-image: url("/assets/3ci_circle_logo_fixed-DXFwGO6G.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--logo-ring);
}

.workspace-project-header h1,
.panel-header h2,
.compact-header h3,
.detail-card h3,
.detail-card h4 {
  font-family: var(--font-display);
  line-height: 1.08;
}

.workspace-project-header h1 {
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
}

.workspace-title-lock-icon {
  display: inline-flex;
  width: 0.74em;
  height: 0.74em;
  margin-left: 0.18em;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  vertical-align: super;
  transform: translateY(-0.28em);
}

.workspace-title-lock-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.workspace-title-lock-icon.success {
  color: var(--success);
}

.workspace-title-lock-icon.warning {
  color: var(--warning);
}

.deck,
.workspace-project-subtitle {
  max-width: 92ch;
  font-size: 0.86rem;
}

.workspace-toolbar-right,
.workspace-toolbar-status {
  gap: 8px;
}

.workspace-nav {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: visible;
  counter-reset: cockpit-step;
}

.workspace-nav::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 17px;
  width: 2px;
  background: var(--line-strong);
}

.section-tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
  background: transparent;
  counter-increment: cockpit-step;
}

.section-tab::before {
  content: counter(cockpit-step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.section-tab.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: none;
}

.section-tab.active::before {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.workspace-section,
.workspace-settings-panel,
.project-selection-view,
.workspace-topbar {
  padding: 16px;
}

.workspace-section > .panel-header {
  position: relative;
  padding: 0 0 12px 18px;
  border-bottom: 1px solid var(--line);
}

.workspace-section > .panel-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: var(--accent);
}

.workspace-section > .panel-header .support-copy {
  max-width: 82ch;
  font-size: 0.86rem;
}

.panel-header {
  gap: 6px;
  margin-bottom: 12px;
}

.panel-kicker,
.eyebrow,
.identity-label {
  margin-bottom: 4px;
  letter-spacing: 0.11em;
  color: var(--accent-strong);
  font-size: 0.68rem;
}

.detail-card,
.summary-card,
.step-card,
.task-selector,
.history-card,
.markdown-card,
.table-shell,
.inline-callout,
.workspace-settings-panel,
.context-sources-editor,
.context-source-row,
.structured-list li,
.timeline-list li {
  border-radius: 8px;
  box-shadow: none;
}

.detail-card {
  padding: 14px;
  background: var(--surface);
}

.detail-card .summary-card {
  border-left: 3px solid var(--line-strong);
  background: transparent;
  padding: 8px 10px;
}

.summary-card {
  padding: 12px;
}

.summary-pill,
.status-chip,
.selector-chip {
  border-radius: 6px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.primary-button,
.secondary-button,
.ghost-button,
.view-tab,
.workspace-icon-button,
.workspace-state-icon,
.workspace-state-chip,
.identity-trigger,
.deft-launcher,
.context-source-icon-button,
.context-source-test-button {
  border-radius: 8px;
}

.requirements-document-search-card {
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.requirements-document-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
  gap: 12px;
  min-height: auto;
}

.requirements-document-card {
  min-height: 64vh;
}

.requirements-document-markdown {
  line-height: 1.42;
}

.specification-grid,
.planning-grid {
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1.45fr);
  gap: 12px;
}

.execution-dashboard-grid {
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(240px, 0.75fr));
  gap: 12px;
  margin-bottom: 0;
}

.execution-grid {
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr);
  gap: 12px;
}

.traceability-feature-grid,
.traceability-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.focus-summary-grid,
.trace-chain-grid,
.history-grid,
.run-activity-grid,
.planning-narratives {
  gap: 8px;
}

.task-stepper {
  gap: 8px;
}

.selection-list {
  border-radius: 8px;
}

.item-button,
.task-selector {
  padding: 11px 12px;
  border-radius: 0;
}

.advanced-shell,
.editor-shell {
  border-radius: 8px;
}

@media (max-width: 1180px) {
  .workspace-nav {
    display: flex;
    overflow-x: auto;
  }

  .workspace-nav::before {
    display: none;
  }

  .section-tab {
    width: auto;
    white-space: nowrap;
  }

  .requirements-document-search-card {
    grid-template-columns: 1fr;
  }

  .requirements-document-search-field {
    grid-template-columns: 1fr;
  }

  .requirements-document-search-summary {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.cockpit-root {
  min-height: calc(100vh - 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
}

.cockpit-header {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 9px 14px 8px;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--accent);
  border-radius: 8px 8px 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: visible;
}

.cockpit-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/3ci_header_logo_transparent-DZb_XDAM.png");
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-position-y: calc(50% + 12px);
  background-size: 210px auto;
  opacity: 1;
  pointer-events: none;
  border-radius: inherit;
}

.cockpit-header > * {
  position: relative;
  z-index: 1;
}

.cockpit-header h1 {
  margin: 0;
  font-size: 1.45rem;
}

.cockpit-header p {
  margin: 0;
}

.cockpit-header .deck {
  min-height: 1.35em;
  max-width: min(92ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cockpit-header-subtitle-placeholder {
  visibility: hidden;
}

.cockpit-header-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  align-self: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cockpit-header-actions .identity-menu-inline {
  align-content: space-between;
  align-self: stretch;
  min-height: 100%;
}

.cockpit-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.cockpit-navigation {
  position: relative;
  z-index: 7;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cockpit-navigation .workspace-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.cockpit-navigation .workspace-nav::before {
  display: none;
}

.cockpit-navigation .section-tab {
  grid-template-columns: minmax(0, 1fr);
  width: auto;
  min-width: max-content;
  min-height: 34px;
  padding: 7px 11px;
  text-align: center;
  white-space: nowrap;
}

.cockpit-navigation .section-tab::before {
  display: none;
}

.cockpit-workspace {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding-top: 12px;
}

.cockpit-workspace > .workspace-section,
.cockpit-workspace > .workspace-settings-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.cockpit-workspace .workspace-section > .panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

@media (max-width: 1080px) {
  .cockpit-header,
  .cockpit-shell {
    grid-template-columns: 1fr;
  }

  .cockpit-header-actions {
    justify-content: flex-start;
  }

  .identity-menu-inline {
    justify-items: start;
  }

  .identity-workflow-status {
    max-width: calc(100vw - 32px);
    text-align: left;
  }

  .identity-status-row {
    max-width: calc(100vw - 32px);
    justify-content: flex-start;
  }

  .user-settings-layout,
  .settings-provider-row {
    grid-template-columns: 1fr;
  }

  .user-settings-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-detail-list div,
  .user-secret-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-provider-actions {
    justify-content: flex-start;
  }

  .cockpit-navigation {
    position: static;
  }

  .cockpit-navigation .workspace-nav {
    display: flex;
    overflow-x: auto;
  }

  .cockpit-navigation .workspace-nav::before {
    display: none;
  }
}

.workflow-cockpit-strip {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.workflow-cockpit-summary {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.workflow-cockpit-summary:focus-visible,
.workflow-cockpit-icon-button:focus-visible,
.refresh-icon-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.workflow-cockpit-summary-fields {
  display: flex;
  align-items: center;
  gap: 0 12px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.86rem;
  white-space: nowrap;
}

.workflow-cockpit-summary-field {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-cockpit-summary-field strong {
  flex: 0 0 auto;
  font-weight: 700;
}

.workflow-cockpit-summary-field span {
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
}

.workflow-cockpit-summary-separator {
  color: var(--muted);
}

.workflow-cockpit-actions,
.workflow-cockpit-gate-row,
.journey-graph-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.workflow-cockpit-actions {
  flex-wrap: nowrap;
}

.workflow-cockpit-icon-button,
.refresh-icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
}

.workflow-cockpit-icon-button svg,
.refresh-icon-button svg {
  width: 19px;
  height: 19px;
}

.workflow-cockpit-figma-refresh-button {
  color: var(--accent-strong);
}

.workflow-cockpit-figma-refresh-button .figma-refresh-icon {
  width: 25px;
  height: 25px;
}

.workflow-cockpit-figma-refresh-button .figma-refresh-arrow {
  filter: var(--icon-highlight-filter);
}

.workflow-cockpit-figma-refresh-button.refreshing .figma-refresh-arrow {
  transform-origin: 20px 22px;
  animation: workflow-cockpit-refresh-spin 0.9s linear infinite;
}

@keyframes workflow-cockpit-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.workflow-cockpit-preview-button.ready {
  border-color: rgba(79, 129, 56, 0.38);
  background: var(--success-soft);
  color: var(--success);
}

.workflow-cockpit-preview-button.requested,
.workflow-cockpit-preview-button.starting,
.workflow-cockpit-preview-button.health_checking {
  border-color: rgba(214, 138, 45, 0.42);
  background: var(--warning-soft);
  color: var(--warning);
}

.workflow-cockpit-preview-button.failed,
.workflow-cockpit-preview-button.expired {
  border-color: rgba(155, 70, 69, 0.42);
  background: var(--danger-soft);
  color: var(--danger);
}

.journey-graph-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.journey-graph-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.journey-graph-recenter-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
}

.workflow-cockpit-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.workflow-cockpit-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.workflow-cockpit-drawer-grid section,
.workflow-cockpit-gate-row {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.workflow-cockpit-drawer-grid h3,
.workflow-cockpit-drawer-grid p {
  margin: 0;
}

.workflow-cockpit-workspace-state {
  align-content: start;
  gap: 10px;
}

.workflow-cockpit-state-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-cockpit-state-list {
  display: grid;
  gap: 8px;
}

.workflow-cockpit-state-list > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-cockpit-state-list strong {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workflow-cockpit-state-list span span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 700;
}

.workflow-cockpit-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workflow-cockpit-stat-grid span,
.workflow-cockpit-activity-list li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-cockpit-stat-grid strong {
  font-size: 1.08rem;
}

.workflow-cockpit-activity-list {
  display: grid;
  gap: 8px;
  max-height: 170px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-cockpit-activity-list .success {
  border-left: 3px solid var(--success);
}

.workflow-cockpit-activity-list .error {
  border-left: 3px solid var(--danger);
}

.workflow-cockpit-signal-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-cockpit-lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.workflow-cockpit-lifecycle-column {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.workflow-cockpit-lifecycle-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-cockpit-lifecycle-field strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-cockpit-lifecycle-field span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 400;
}

.workflow-cockpit-gate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.project-journey-workbench,
.project-compass-workbench {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-items: start;
  align-content: start;
}

.project-journey-panel,
.project-compass-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.project-journey-graph-layout,
.project-compass-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  height: calc(min(58vh, 520px) + 53px);
  min-height: 455px;
  overflow: hidden;
}

.project-journey-graph-column,
.project-compass-map-column {
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: subgrid;
  gap: 12px;
  min-width: 0;
}

.journey-graph-controls {
  justify-content: flex-start;
}

.project-compass-tabs {
  min-width: 0;
}

@media (max-width: 960px) {
  .workflow-cockpit-strip,
  .workflow-cockpit-gate-row {
    grid-template-columns: 1fr;
  }

  .workflow-cockpit-summary-fields {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .workflow-cockpit-actions,
  .workflow-cockpit-gate-row,
  .journey-graph-controls {
    justify-content: flex-start;
  }

  .workflow-cockpit-drawer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .workflow-cockpit-drawer-grid,
  .project-journey-graph-layout,
  .project-compass-map-layout,
  .cockpit-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cockpit-header .workspace-project-header {
    min-height: 92px;
  }

  .workspace-brand-row {
    top: 0;
  }

  .workspace-project-copy {
    padding-top: 32px;
    padding-left: 0;
  }

  .cockpit-header::before {
    background-position: left 8px center;
    background-position-y: calc(50% + 12px);
    background-size: 200px auto;
  }
}

.cockpit-workbench {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.cockpit-hero,
.cockpit-overview,
.cockpit-map-panel,
.cockpit-focus-panel,
.cockpit-artifacts-panel,
.cockpit-stages-panel,
.cockpit-gate-panel,
.cockpit-feed,
.cockpit-empty,
.cockpit-loading {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.cockpit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-bottom: 3px solid var(--accent);
}

.cockpit-hero h2,
.cockpit-panel-header h3,
.cockpit-focus-stack h3,
.cockpit-feed h3 {
  margin: 0;
}

.cockpit-hero h2 {
  font-family: var(--font-display);
  font-size: 1.52rem;
  line-height: 1.08;
}

.cockpit-panel-header h3,
.cockpit-focus-stack h3,
.cockpit-feed h3 {
  font-size: 1.08rem;
  line-height: 1.18;
}

.cockpit-hero .summary-pill-row {
  justify-content: flex-end;
}

.cockpit-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
}

.cockpit-stat {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--surface-strong);
}

.cockpit-stat span {
  color: var(--muted);
  font-size: 0.84rem;
}

.cockpit-stat strong {
  font-size: 1.5rem;
  line-height: 1;
}

.cockpit-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 12px;
  align-items: stretch;
}

.cockpit-map-panel,
.cockpit-focus-panel,
.cockpit-artifacts-panel,
.cockpit-stages-panel,
.cockpit-gate-panel,
.cockpit-feed,
.cockpit-empty,
.cockpit-loading {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.cockpit-focus-panel {
  grid-row: 1 / 3;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

.cockpit-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.cockpit-detail-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tabs-component-list {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.tabs-component-tab {
  min-height: 38px;
  width: auto;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.tabs-component-tab:hover,
.tabs-component-tab:focus-visible {
  color: var(--accent-strong);
  background: var(--accent-wash);
}

.tabs-component-tab.active {
  position: relative;
  top: 1px;
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}

.tabs-component-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: 12px;
}

.cockpit-focus-status {
  align-self: start;
  justify-self: end;
  margin-top: 1px;
}

.cockpit-gate-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.cockpit-gate-panel .action-row {
  justify-content: flex-end;
}

.cockpit-stages-panel {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(56vh, 520px);
}

.cockpit-artifacts-panel {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 560px;
  max-height: min(72vh, 680px);
}

.cockpit-artifacts-panel .cockpit-artifact-list {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.cockpit-stages-panel .cockpit-stage-list {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.cockpit-graph-canvas {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--graph-bg);
}

.cockpit-flow-node {
  width: 188px;
  min-height: 68px;
  padding: 10px 12px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--graph-node-bg);
  box-shadow: var(--graph-node-shadow);
  color: var(--ink);
  font-weight: 800;
}

.cockpit-flow-node.selected,
.cockpit-flow-node:focus {
  box-shadow: var(--graph-node-selected-shadow);
}

.cockpit-flow-node.success {
  background: var(--graph-node-success-bg);
}

.cockpit-flow-node.warning {
  background: var(--graph-node-warning-bg);
}

.cockpit-flow-node.error {
  background: var(--graph-node-error-bg);
}

.cockpit-focus-scroll-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.cockpit-detail-widget {
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.cockpit-detail-widget-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 64px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.cockpit-detail-widget-icon {
  display: inline-grid;
  gap: 3px;
  width: 18px;
  padding: 3px 0;
}

.cockpit-detail-widget-icon::before,
.cockpit-detail-widget-icon::after,
.cockpit-detail-widget-icon {
  border-top: 2px solid var(--accent-strong);
}

.cockpit-detail-widget-icon::before,
.cockpit-detail-widget-icon::after {
  content: "";
  display: block;
}

.cockpit-detail-widget-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cockpit-detail-widget-copy strong,
.cockpit-detail-widget-copy span {
  overflow-wrap: anywhere;
}

.cockpit-detail-widget-copy span {
  color: var(--muted);
}

.cockpit-detail-widget-summary:hover,
.cockpit-detail-widget-summary:focus-visible {
  background: var(--surface-hover);
}

.cockpit-detail-widget.open .cockpit-detail-widget-summary {
  border-bottom-color: var(--line);
  background: var(--surface-hover);
}

.cockpit-detail-widget-body,
.cockpit-detail-widget-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cockpit-detail-widget-body {
  padding: 12px;
}

.cockpit-detail-mini-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cockpit-detail-mini-list li {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.cockpit-detail-mini-list strong,
.cockpit-detail-mini-list span:not(.summary-pill) {
  overflow-wrap: anywhere;
}

.cockpit-detail-mini-list span:not(.summary-pill) {
  color: var(--muted);
}

.cockpit-focus-stack,
.cockpit-task-list,
.cockpit-artifact-list,
.cockpit-stage-list,
.cockpit-feed ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cockpit-focus-stack.cockpit-focus-scroll-panel {
  display: flex;
  flex-direction: column;
}

.cockpit-tab-stack,
.cockpit-group-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.cockpit-group-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.cockpit-inline-summary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.84rem;
}

.cockpit-definition-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.cockpit-definition-list div,
.cockpit-task-list li,
.cockpit-artifact-list li,
.cockpit-stage-item,
.cockpit-feed li {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.cockpit-definition-list dt,
.cockpit-artifact-list span,
.cockpit-task-list span,
.cockpit-feed span,
.cockpit-stage-item strong {
  color: var(--muted);
}

.cockpit-artifact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cockpit-artifact-title {
  min-width: 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.cockpit-artifact-title:hover,
.cockpit-artifact-title:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

.cockpit-artifact-status-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--info);
}

.cockpit-artifact-status-icon svg {
  width: 18px;
  height: 18px;
}

.cockpit-artifact-status-icon.success {
  color: var(--success);
}

.cockpit-artifact-status-icon.warning {
  color: var(--warning);
}

.cockpit-artifact-status-icon.error {
  color: var(--danger);
}

.cockpit-artifact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.cockpit-feed-select {
  justify-self: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.cockpit-feed-select:hover,
.cockpit-feed-select:focus-visible {
  text-decoration: underline;
}

.cockpit-feed-list,
.cockpit-link-row {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cockpit-feed-list li {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.cockpit-feed-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.cockpit-definition-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.cockpit-preview {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-surface);
  color: var(--ink);
  white-space: pre-wrap;
}

.cockpit-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.cockpit-overview-grid {
  grid-template-columns: 1.05fr 1.15fr 0.8fr;
}

.cockpit-details-grid {
  grid-template-columns:
    minmax(210px, 0.58fr)
    minmax(320px, 1.305fr)
    minmax(180px, 0.465fr);
  grid-template-areas: "stages stage-details artifacts";
  align-items: start;
}

.cockpit-details-grid .cockpit-stages-panel {
  grid-area: stages;
}

.cockpit-details-grid .cockpit-stage-details-panel {
  grid-area: stage-details;
}

.cockpit-details-grid .cockpit-artifacts-panel {
  grid-area: artifacts;
  min-height: 360px;
  max-height: min(52vh, 520px);
}

.cockpit-details-grid .cockpit-stages-panel,
.cockpit-details-grid .cockpit-stage-details-panel {
  grid-template-rows: auto minmax(0, 1fr);
  align-self: start;
  height: clamp(600px, 74vh, 760px);
  max-height: none;
}

.cockpit-stage-detail-tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cockpit-stage-detail-tabs .tabs-component-list {
  overflow-x: auto;
  scrollbar-width: thin;
}

.cockpit-stage-detail-tabs .tabs-component-tab {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}

.stage-detail-tab-warning-marker {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.cockpit-stage-detail-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.cockpit-details-grid .cockpit-stages-panel .cockpit-stage-list {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.cockpit-stage-item {
  gap: 0;
  padding: 0;
  overflow: visible;
}

.cockpit-stage-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  width: 100%;
  padding: 14px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.cockpit-stage-button:hover,
.cockpit-stage-button:focus-visible,
.cockpit-stage-item.selected {
  background: var(--accent-wash);
}

.cockpit-stage-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cockpit-stage-item.selected {
  border-color: var(--accent);
}

.cockpit-stage-status-icon {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 20px;
  height: 20px;
  color: var(--info);
}

.cockpit-stage-status-icon svg {
  width: 18px;
  height: 18px;
}

.cockpit-stage-info-icon {
  display: inline-grid;
  place-items: center;
  position: relative;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  overflow: visible;
}

.cockpit-stage-info-icon svg {
  width: 16px;
  height: 16px;
}

.cockpit-stage-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 10px;
  width: min(330px, calc(100vw - 48px));
  max-width: 330px;
  padding: 12px;
  border: 1px solid var(--surface-glass);
  border-radius: 8px;
  background: var(--popover-bg);
  box-shadow: 0 18px 42px rgba(24, 50, 66, 0.22);
  color: var(--popover-text);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.cockpit-stage-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--surface-glass);
  border-top: 1px solid var(--surface-glass);
  background: var(--popover-bg);
  transform: rotate(45deg);
}

.cockpit-stage-info-icon:hover .cockpit-stage-popover,
.cockpit-stage-button:focus-visible .cockpit-stage-popover {
  opacity: 1;
  transform: translateY(0);
}

.cockpit-stage-popover-title {
  position: relative;
  z-index: 1;
  color: var(--popover-text);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cockpit-stage-popover-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}

.cockpit-stage-popover-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  color: var(--popover-text);
  font-size: 0.8rem;
  line-height: 1.32;
}

.cockpit-stage-popover-row > span {
  color: var(--popover-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.cockpit-stage-popover-row > strong {
  color: var(--popover-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cockpit-stage-item.success .cockpit-stage-status-icon {
  color: var(--success);
}

.cockpit-stage-item.warning .cockpit-stage-status-icon {
  color: var(--warning);
}

.cockpit-stage-item.error .cockpit-stage-status-icon {
  color: var(--danger);
}

.cockpit-stage-label {
  align-self: center;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .cockpit-main-grid,
  .cockpit-support-grid,
  .cockpit-hero,
  .cockpit-gate-panel,
  .cockpit-overview {
    grid-template-columns: 1fr;
  }

  .cockpit-hero .summary-pill-row,
  .cockpit-gate-panel .action-row {
    justify-content: flex-start;
  }

  .specification-hero,
  .project-compass-workbench > .project-compass-hero,
  .project-history-workbench > .project-history-hero,
  .execution-workbench > .execution-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cockpit-details-grid {
    grid-template-areas:
      "stages"
      "stage-details"
      "artifacts";
  }

  .cockpit-details-grid .cockpit-stages-panel,
  .cockpit-details-grid .cockpit-stage-details-panel {
    height: clamp(420px, 62vh, 620px);
  }
}

.redesign-section {
  display: grid;
  gap: 12px;
}

.redesign-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}

.redesign-section-header h2,
.redesign-section-header h3 {
  margin: 0;
}

.redesign-section-header h2 {
  font-size: 1.42rem;
  line-height: 1.12;
}

.redesign-section-header h3 {
  font-size: 1.16rem;
  line-height: 1.16;
}

.redesign-layout {
  display: grid;
  gap: 12px;
  align-items: start;
}

.redesign-spec-layout,
.redesign-plan-layout,
.redesign-execution-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
}

.redesign-requirements-layout {
  grid-template-columns: minmax(0, 1fr);
}

.redesign-execution-layout,
.redesign-plan-layout {
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1.45fr);
}

.redesign-execution-layout {
  grid-template-columns: minmax(240px, 0.45fr) minmax(0, 1.15fr) minmax(
      260px,
      0.65fr
    );
}

.redesign-document,
.redesign-inspector,
.redesign-card,
.redesign-chain-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.redesign-document {
  min-height: 62vh;
}

.redesign-requirements .redesign-document,
.redesign-specification .redesign-document {
  align-content: start;
  align-self: start;
}

.requirements-document-document {
  position: relative;
}

.execution-run-console-card {
  grid-column: 1 / -1;
}

.execution-verification-panel {
  align-content: start;
}

.verification-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.verification-panel-header h3 {
  margin: 0;
}

.verification-path-list {
  margin: 0;
}

.verification-action-row {
  margin: 0;
}

.redesign-inspector {
  align-content: start;
  background: var(--surface-muted);
}

.redesign-planning {
  align-content: start;
  gap: 8px;
  grid-auto-rows: max-content;
}

.planning-decision-header {
  display: grid;
  gap: 8px;
  align-self: start;
  align-items: start;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}

.planning-decision-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: min(420px, 100%);
}

.planning-title-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.planning-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.planning-title-row h2 {
  min-width: min(100%, 18rem);
  margin: 0;
  overflow-wrap: anywhere;
}

.planning-title-footer {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  min-width: 0;
}

.planning-title-footer .support-copy {
  margin: 0;
}

.planning-document-info-control {
  margin-left: auto;
  align-self: flex-end;
}

.planning-package-select {
  display: grid;
  min-width: min(100%, 20rem);
}

.planning-package-select select {
  min-height: 38px;
  max-width: 100%;
}

.planning-workbench {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 88px;
}

.planning-decision-rail,
.planning-main-column,
.planning-task-inspector {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.planning-review-grid,
.planning-evidence-grid {
  display: grid;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.planning-review-grid {
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
}

.planning-review-grid-clean {
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  padding-bottom: 88px;
}

.planning-evidence-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
}

.planning-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.planning-panel-heading {
  display: grid;
  gap: 3px;
}

.planning-panel-heading h3,
.planning-task-detail h4 {
  margin: 0;
}

.planning-title-row h2 {
  font-size: 1.42rem;
  line-height: 1.12;
}

.planning-panel-heading h3 {
  font-size: 1.08rem;
  line-height: 1.18;
}

.planning-task-detail h4 {
  font-size: 1rem;
  line-height: 1.2;
}

.planning-version-list,
.planning-task-map,
.planning-coverage-grid,
.planning-task-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.planning-task-map-scroll,
.planning-task-detail-scroll {
  max-height: clamp(26rem, 64vh, 44rem);
  overflow: auto;
  padding-right: 4px;
  align-content: start;
}

.planning-version-button,
.planning-task-card,
.planning-coverage-row {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-muted);
  text-align: left;
}

.planning-task-card {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  padding: 9px 10px;
}

.planning-task-card strong,
.planning-task-card span:not(.planning-task-key),
.planning-task-card small {
  grid-column: 2;
}

.planning-version-button,
.planning-task-card {
  cursor: pointer;
}

.planning-version-button:hover,
.planning-version-button.active,
.planning-task-card:hover,
.planning-task-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.planning-task-card strong,
.planning-version-button strong,
.planning-coverage-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.planning-task-card span,
.planning-version-button span,
.planning-coverage-row span,
.planning-task-card small,
.planning-version-button small,
.planning-coverage-row small,
.planning-evidence-list span,
.planning-detail-block p,
.planning-detail-block li,
.planning-boundary-lines span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.planning-task-card span:not(.planning-task-key) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.planning-task-key {
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent-strong);
  background: var(--surface);
  font-size: 0.74rem;
  font-weight: 700;
}

.planning-intent-panel p,
.planning-task-detail p,
.planning-good-news,
.planning-source-content p {
  margin: 0;
}

.planning-evidence-list,
.planning-detail-block ul,
.planning-command-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planning-evidence-list li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.planning-boundary-lines {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.planning-blockers li {
  border-color: var(--danger);
}

.planning-detail-block {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.planning-source-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.planning-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planning-command-list code,
.planning-source-content pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.planning-compact-disclosure,
.planning-source-panel {
  min-width: 0;
}

.planning-compact-disclosure summary,
.planning-source-panel summary {
  cursor: pointer;
  font-weight: 700;
}

.planning-source-content {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 10px;
}

.planning-source-content pre {
  max-height: 420px;
  overflow: auto;
}

.review-surface-tabs {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.review-surface-tabs .tabs-component-list {
  overflow-x: auto;
  scrollbar-width: thin;
}

.review-surface-tabs .tabs-component-panel {
  overflow: visible;
  padding-top: 14px;
}

.review-surface-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.xbrief-source-panel {
  margin-bottom: 12px;
}

.xbrief-source-panel .planning-detail-block:first-child {
  padding-top: 0;
  border-top: none;
}

.xbrief-source-panel pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.xbrief-review-stack,
.xbrief-narrative-stack,
.xbrief-outline-stack {
  display: grid;
  gap: 12px;
}

.specification-markdown .xbrief-review-stack {
  gap: 14px;
}

.specification-hero {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
  height: var(--tab-header-height);
  min-height: var(--tab-header-height);
  max-height: var(--tab-header-height);
  padding: 12px 14px 5px;
  align-items: start;
  overflow: hidden;
}

.specification-hero-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.specification-hero h2 {
  max-width: min(780px, calc(100vw - 96px));
  overflow-wrap: anywhere;
}

.specification-hero h2,
.project-compass-workbench > .project-compass-hero h2,
.project-history-workbench > .project-history-hero h2,
.execution-workbench > .execution-hero h2 {
  display: -webkit-box;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.specification-hero .support-copy {
  min-width: 0;
  max-width: min(780px, calc(100vw - 144px));
  margin: 0;
  line-height: 1.35;
}

.project-compass-hero-actions {
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  max-width: min(44vw, 520px);
}

.specification-workbench,
.specification-content-layout,
.specification-content-tabs {
  min-width: 0;
}

.redesign-specification .specification-hero,
.redesign-specification .specification-workbench {
  box-sizing: border-box;
  max-width: calc(100vw - 64px);
  width: min(100%, calc(100vw - 64px));
}

.specification-content-layout {
  display: block;
}

.specification-content-tabs .tabs-component-panel {
  padding-top: 16px;
}

.specification-dossier {
  box-sizing: border-box;
  width: 100%;
  overflow-wrap: anywhere;
}

.specification-dossier .xbrief-review-stack {
  gap: 18px;
}

.specification-dossier .xbrief-markdown-block {
  max-width: min(104ch, 100%);
}

.specification-document-panel {
  gap: 18px;
}

.specification-document-panel-narratives {
  gap: 14px;
  max-width: min(78ch, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.specification-document-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.12;
}

.specification-document-panel-narratives .specification-document-header h3 {
  font-size: 1.36rem;
  line-height: 1.1;
}

.specification-document-flow {
  display: grid;
  gap: 18px;
}

.specification-document-panel-narratives .specification-document-flow {
  gap: 20px;
  max-width: min(78ch, 100%);
}

.specification-document-flow > * {
  min-width: 0;
}

.specification-requirements-document {
  display: grid;
  max-width: min(104ch, 100%);
  gap: 18px;
}

.specification-requirement-status-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.specification-requirement-status-section
  + .specification-requirement-status-section {
  border-top: 1px solid rgba(27, 49, 58, 0.12);
  padding-top: 18px;
}

.specification-requirement-status-heading {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
}

.specification-requirement-kind-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 18px;
}

.specification-requirement-kind-heading {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.specification-requirement-kind-list {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-left: 18px;
}

.specification-requirement-document-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.55;
}

.specification-requirement-line-description {
  min-width: 0;
  overflow-wrap: anywhere;
}

.specification-requirement-line-punctuation {
  color: var(--ink);
  font-weight: 750;
}

.specification-document-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: min(104ch, 100%);
}

.specification-document-panel-narratives .specification-document-section {
  max-width: min(78ch, 100%);
}

.specification-document-section + .specification-document-section {
  border-top: 1px solid rgba(27, 49, 58, 0.12);
  padding-top: 18px;
}

.specification-document-section h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.specification-document-copy {
  color: var(--ink);
  line-height: 1.62;
  min-width: 0;
}

.specification-document-panel-narratives .specification-document-copy {
  font-size: 1rem;
  line-height: 1.7;
}

.specification-document-copy > *,
.specification-document-section p,
.specification-document-section li {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.specification-document-section li:has(.requirements-document-requirement-chip),
.specification-document-list-line {
  overflow-wrap: normal;
  word-break: normal;
}

.specification-document-copy h1,
.specification-document-copy h2,
.specification-document-copy h3,
.specification-document-copy h4,
.specification-document-copy h5,
.specification-document-copy h6,
.specification-document-flow .xbrief-markdown-block h1,
.specification-document-flow .xbrief-markdown-block h2,
.specification-document-flow .xbrief-markdown-block h3,
.specification-document-flow .xbrief-markdown-block h4,
.specification-document-flow .xbrief-markdown-block h5,
.specification-document-flow .xbrief-markdown-block h6 {
  margin: 0 0 0.38rem;
  color: var(--ink);
  line-height: 1.2;
}

.specification-document-copy h1,
.specification-document-copy h2,
.specification-document-flow .xbrief-markdown-block h1,
.specification-document-flow .xbrief-markdown-block h2 {
  font-size: 0.96rem;
}

.specification-document-copy h3,
.specification-document-copy h4,
.specification-document-flow .xbrief-markdown-block h3,
.specification-document-flow .xbrief-markdown-block h4 {
  font-size: 0.9rem;
}

.specification-document-copy h5,
.specification-document-copy h6,
.specification-document-flow .xbrief-markdown-block h5,
.specification-document-flow .xbrief-markdown-block h6 {
  font-size: 0.82rem;
}

.specification-document-panel-narratives .xbrief-markdown-block h1,
.specification-document-panel-narratives .xbrief-markdown-block h2 {
  font-size: 1.12rem;
}

.specification-document-panel-narratives .xbrief-markdown-block h3,
.specification-document-panel-narratives .xbrief-markdown-block h4 {
  font-size: 1.02rem;
}

.specification-document-panel-narratives .xbrief-markdown-block h5,
.specification-document-panel-narratives .xbrief-markdown-block h6 {
  font-size: 0.94rem;
}

.specification-document-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: min(104ch, 100%);
  margin: 0;
  padding-left: 22px;
}

.specification-document-list li {
  padding-left: 3px;
}

.specification-document-list-requirements,
.specification-document-list-success-metrics {
  gap: 18px;
}

.specification-success-metrics-groups {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: min(104ch, 100%);
}

.specification-success-metrics-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.specification-success-metrics-heading {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.specification-success-metrics-items {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding-left: 0;
}

.specification-success-metric-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  gap: 8px;
  min-width: 0;
}

.specification-success-metric-line {
  align-items: baseline;
  display: contents;
  line-height: 1.55;
}

.specification-success-metric-title {
  color: var(--ink);
  min-width: 0;
}

.specification-markdown .specification-success-metric-detail-list {
  grid-column: 2;
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.specification-success-metric-detail-list li {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  column-gap: 5px;
  align-items: start;
  padding-left: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.specification-success-metric-detail-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.74em;
  border-radius: 999px;
  background: var(--success);
}

.specification-success-metric-detail-text {
  min-width: 0;
}

.specification-technical-notes-groups {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: min(104ch, 100%);
}

.specification-technical-notes-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.specification-technical-notes-heading {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.specification-technical-notes-items {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding-left: 0;
}

.specification-technical-note-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.specification-technical-note-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  min-width: 0;
  line-height: 1.5;
}

.specification-technical-note-title {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.2;
}

.specification-technical-note-detail-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding-left: 118px;
}

.specification-technical-note-detail-list li {
  padding-left: 3px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.specification-technical-note-detail-list li::marker {
  color: var(--info);
}

.specification-document-list li::marker {
  color: var(--accent);
}

.specification-document-list-heading {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.specification-document-list-heading strong {
  color: var(--ink);
}

.specification-document-list p {
  margin: 6px 0 0;
  line-height: 1.56;
  overflow-wrap: anywhere;
}

.specification-document-inline-item {
  margin: 0;
}

.specification-document-list-group {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.specification-document-list-line {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 10px;
  align-items: baseline;
  line-height: 1.58;
  overflow-wrap: normal;
  word-break: normal;
}

.specification-document-list-line > strong {
  flex: 0 1 auto;
  min-width: 0;
}

.specification-document-list-line > span:last-child {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.specification-phase-list {
  display: grid;
  gap: 12px;
  justify-self: stretch;
  max-height: min(62vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-gutter: stable;
  width: 100%;
}

.specification-phase-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 12px 14px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.specification-phase-summary {
  display: grid;
  grid-template-columns: 12px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.specification-phase-summary::-webkit-details-marker {
  display: none;
}

.specification-phase-summary::marker {
  content: "";
}

.specification-phase-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--info);
  border-bottom: 2px solid var(--info);
  transform: rotate(-45deg);
  transition: transform 140ms ease;
}

.specification-phase-chip {
  min-width: 0;
}

.specification-phase-summary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.specification-phase-summary h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.18;
}

.specification-phase-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.specification-phase-card[open]
  > .specification-phase-summary
  .specification-phase-chevron {
  transform: rotate(45deg);
}

.specification-phase-card[open] .specification-phase-description {
  display: none;
}

.specification-phase-body {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 114px;
}

.specification-phase-body p,
.specification-phase-body li {
  margin: 0;
  line-height: 1.56;
  overflow-wrap: anywhere;
}

.specification-phase-body ol,
.specification-phase-body ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
}

.specification-phase-body li::marker {
  color: var(--info);
  font-weight: 800;
}

.specification-tab-empty {
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-muted);
}

.xbrief-review-entry {
  display: grid;
  gap: 10px;
}

.xbrief-review-entry + .xbrief-review-entry {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.xbrief-review-entry-header,
.xbrief-outline-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.xbrief-review-entry-header > div,
.xbrief-outline-entry-header > div {
  min-width: 0;
}

.xbrief-review-entry-header h3,
.xbrief-narrative-section h4,
.xbrief-outline-entry-header h4 {
  margin: 0;
  overflow-wrap: anywhere;
}

.xbrief-review-entry p,
.xbrief-narrative-section p,
.xbrief-outline-entry p {
  margin: 0;
}

.xbrief-narrative-section,
.xbrief-outline-entry {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.specification-markdown
  > .xbrief-review-stack
  > .xbrief-review-entry:first-child,
.specification-markdown
  .xbrief-review-stack
  > .xbrief-review-entry:first-child {
  padding: 14px;
  border: 1px solid rgba(47, 118, 147, 0.18);
  border-radius: 8px;
  background: var(--surface-muted);
}

.specification-markdown
  > .xbrief-review-stack
  > .specification-document-panel-narratives:first-child,
.specification-markdown
  .xbrief-review-stack
  > .specification-document-panel-narratives:first-child {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.specification-markdown .xbrief-review-entry + .xbrief-review-entry {
  padding-top: 16px;
}

.specification-markdown .xbrief-review-entry-header h3 {
  text-wrap: balance;
}

.specification-narrative-section {
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-overlay);
}

.specification-narrative-section > h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.18;
}

.specification-narrative-section > h4::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.specification-narrative-success-metrics > h4::before {
  background: var(--success);
}

.specification-narrative-implementation-phases > h4::before {
  background: var(--info);
}

.xbrief-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.specification-markdown .xbrief-review-meta {
  gap: 8px;
}

.specification-markdown .xbrief-review-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(47, 118, 147, 0.16);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.xbrief-markdown-block {
  display: grid;
  gap: 8px;
}

.xbrief-markdown-block > * {
  margin: 0;
}

.xbrief-markdown-block ul,
.xbrief-markdown-block ol {
  margin: 0;
  padding-left: 20px;
}

.xbrief-structured-list li {
  gap: 6px;
}

.xbrief-structured-value {
  display: grid;
  gap: 8px;
}

.xbrief-outline-details,
.xbrief-outline-subitems {
  display: grid;
  gap: 10px;
}

.xbrief-outline-field {
  display: grid;
  gap: 6px;
}

.specification-entry-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.specification-entry-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(35, 80, 97, 0.12);
}

.specification-entry-row:first-child {
  padding-top: 0;
  border-top: none;
}

.specification-entry-row {
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
}

.specification-entry-marker {
  min-width: 0;
}

.specification-entry-copy {
  min-width: 0;
}

.specification-entry-copy {
  display: grid;
  gap: 4px;
}

.specification-entry-copy p {
  margin: 0;
  overflow-wrap: anywhere;
}

.specification-entry-title {
  color: var(--ink);
  line-height: 1.2;
}

.specification-entry-list-implementation-phases .specification-entry-row {
  grid-template-columns: minmax(54px, auto) minmax(0, 1fr);
}

.specification-entry-list-success-metrics .specification-entry-row {
  border-color: rgba(79, 129, 56, 0.18);
}

@media (max-width: 760px) {
  .specification-hero h2,
  .specification-hero .support-copy {
    max-width: 22ch;
  }

  .specification-dossier .xbrief-markdown-block,
  .specification-document-section,
  .specification-document-list {
    max-width: min(34ch, 100%);
    width: min(34ch, 100%);
  }

  .specification-phase-list {
    max-height: min(58vh, 520px);
  }

  .specification-phase-summary {
    grid-template-columns: 12px minmax(58px, auto) minmax(0, 1fr);
  }

  .specification-phase-body {
    padding-left: 34px;
  }

  .specification-entry-row {
    grid-template-columns: 1fr;
  }

  .specification-markdown .specification-success-metric-detail-list {
    grid-column: 1;
    max-width: calc(100% - 8px);
    margin-left: 8px;
    padding-left: 0;
  }

  .specification-success-metric-item {
    grid-template-columns: 1fr;
  }

  .specification-success-metric-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
  }

  .specification-technical-note-detail-list {
    padding-left: 34px;
  }

  .specification-entry-marker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

.redesign-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.redesign-toolbar.requirements-document-search-card {
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  padding: 0;
}

@media (max-width: 760px) {
  .project-compass-hero-actions {
    align-self: start;
  }
}

.requirements-document-document .requirements-document-markdown {
  position: relative;
  row-gap: 0;
  padding-right: 64px;
}

.requirements-document-add-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  line-height: 1;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: rgba(47, 118, 147, 0.24);
}

.requirements-document-add-button svg {
  width: 18px;
  height: 18px;
}

.redesign-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.redesign-chain-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.redesign-chain-card {
  align-content: start;
}

.redesign-chain-card header h3,
.redesign-card h3 {
  margin: 0;
}

@media (max-width: 1180px) {
  .redesign-section-header,
  .planning-decision-header,
  .redesign-requirements-layout,
  .redesign-spec-layout,
  .redesign-plan-layout,
  .redesign-execution-layout,
  .planning-workbench,
  .planning-review-grid,
  .planning-evidence-grid,
  .redesign-chain-board,
  .redesign-toolbar {
    grid-template-columns: 1fr;
  }

  .planning-decision-actions {
    justify-items: end;
  }
}

.deft-file-stack,
.deft-file-group-stack {
  display: grid;
  gap: 22px;
}

.project-definition-doc {
  display: grid;
  gap: 22px;
  padding: 0;
}

.project-definition-info-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-definition-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  line-height: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--accent-strong);
  box-shadow: 0 10px 22px rgba(24, 40, 48, 0.08);
}

.project-definition-info-button svg {
  display: block;
  width: 16px;
  height: 16px;
}

.project-definition-info-button:hover,
.project-definition-info-button:focus-visible {
  border-color: rgba(47, 118, 147, 0.34);
  background: var(--accent-soft);
}

.project-definition-info-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 64px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--surface-glass);
  border-radius: 14px;
  background: var(--popover-bg);
  box-shadow: 0 20px 42px rgba(24, 50, 66, 0.24);
  color: var(--popover-text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.project-definition-info-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 11px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--surface-glass);
  border-top: 1px solid var(--surface-glass);
  background: var(--popover-bg);
  transform: rotate(45deg);
}

.project-definition-info-control:hover .project-definition-info-popover,
.project-definition-info-control:focus-within .project-definition-info-popover {
  opacity: 1;
  transform: translateY(0);
}

.project-definition-info-title {
  position: relative;
  z-index: 1;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-definition-info-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 0;
}

.project-definition-info-row {
  display: grid;
  gap: 4px;
}

.project-definition-info-row dt {
  color: var(--popover-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-definition-info-row dd {
  margin: 0;
  color: var(--popover-text);
  font-size: 0.86rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.project-definition-doc-section {
  display: grid;
  gap: 12px;
}

.project-definition-doc-section + .project-definition-doc-section {
  border-top: 1px solid rgba(27, 49, 58, 0.12);
  padding-top: 22px;
}

.project-definition-doc-narrative + .project-definition-doc-narrative {
  border-top: 0;
  padding-top: 10px;
}

.project-definition-doc-section h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.08;
}

.project-definition-doc-section .deft-file-markdown {
  color: var(--ink);
  line-height: 1.65;
}

.project-definition-doc-section .deft-file-markdown p,
.project-definition-doc-section .deft-file-markdown li {
  font-size: 0.98rem;
}

.project-definition-doc-outline {
  display: grid;
  gap: 18px;
}

.project-definition-doc-outline .deft-file-outline-entry {
  padding-top: 0;
}

.deft-file-group {
  display: grid;
  gap: 12px;
}

.deft-file-group + .deft-file-group,
.deft-file-stack > .deft-file-group + .deft-file-group {
  border-top: 1px solid rgba(27, 49, 58, 0.12);
  padding-top: 22px;
}

.deft-file-group h3,
.deft-file-group h4,
.deft-file-group h5,
.deft-file-outline-entry h4 {
  margin: 0;
}

.deft-file-definition-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.deft-file-definition-list div {
  display: grid;
  gap: 4px;
}

.deft-file-definition-list dt {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.deft-file-definition-list dd {
  margin: 0;
}

.deft-file-outline-entry {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.deft-file-outline-entry + .deft-file-outline-entry {
  border-top: 1px solid rgba(27, 49, 58, 0.1);
}

.deft-file-outline-disclosure {
  display: grid;
  gap: 12px;
}

.deft-file-outline-summary,
.deft-file-section-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.deft-file-outline-summary {
  justify-content: space-between;
}

.deft-file-outline-summary::-webkit-details-marker,
.deft-file-section-summary::-webkit-details-marker {
  display: none;
}

.deft-file-outline-heading {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}

.deft-file-outline-summary .summary-pill {
  flex: 0 0 auto;
}

.deft-file-disclosure-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--accent-strong);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.deft-file-outline-disclosure[open]
  > .deft-file-outline-summary
  .deft-file-disclosure-chevron,
.deft-file-section-disclosure[open]
  > .deft-file-section-summary
  .deft-file-disclosure-chevron,
.deft-file-subitems-disclosure[open]
  > .deft-file-section-summary
  .deft-file-disclosure-chevron {
  transform: rotate(45deg);
}

.deft-file-outline-summary:hover .deft-file-disclosure-chevron,
.deft-file-outline-summary:focus-visible .deft-file-disclosure-chevron,
.deft-file-section-summary:hover .deft-file-disclosure-chevron,
.deft-file-section-summary:focus-visible .deft-file-disclosure-chevron {
  color: var(--ink);
}

.deft-file-outline-body {
  display: grid;
  gap: 12px;
  padding-left: 24px;
}

.deft-file-section-summary {
  align-items: center;
}

.deft-file-section-summary h5,
.deft-file-section-summary strong {
  min-width: 0;
  margin: 0;
}

.deft-file-subitems-disclosure {
  display: grid;
  gap: 12px;
}

.deft-file-outline-heading p {
  margin: 6px 0 0;
}

.deft-file-outline-subitems {
  display: grid;
  gap: 16px;
  padding-left: 18px;
  border-left: 2px solid rgba(47, 118, 147, 0.14);
}

.deft-file-markdown > :first-child {
  margin-top: 0;
}

.deft-file-markdown > :last-child {
  margin-bottom: 0;
}

.deft-file-markdown ul,
.deft-file-markdown ol {
  padding-left: 20px;
}

.project-compass-tabs-simple .tabs-component-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: flex-end;
  overflow-x: auto;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 118, 147, 0.28) transparent;
}

.project-compass-tabs-simple .tabs-component-tab {
  position: relative;
  min-height: 42px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--tab-bg);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(27, 49, 58, 0.08);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.project-compass-tabs-simple .tabs-component-tab:hover,
.project-compass-tabs-simple .tabs-component-tab:focus-visible {
  top: 0;
  border-color: rgba(47, 118, 147, 0.42);
  background: var(--tab-hover-bg);
  color: var(--accent-strong);
}

.project-compass-tabs-simple .tabs-component-tab.active {
  top: 1px;
  z-index: 1;
  border-color: rgba(47, 118, 147, 0.44);
  background: var(--tab-active-bg);
  color: var(--ink);
  box-shadow: 0 16px 30px rgba(24, 40, 48, 0.06);
}

.project-compass-tab-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.project-compass-tab-count {
  color: var(--muted);
  font-weight: 500;
}

.project-compass-tabs-simple .tabs-component-panel {
  margin-top: -1px;
  padding-top: 18px;
  border-top: 1px solid rgba(47, 118, 147, 0.16);
  overflow: visible;
}

.project-history-detail-tabs .tabs-component-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: flex-end;
  overflow-x: auto;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 118, 147, 0.28) transparent;
}

.project-history-detail-tabs .tabs-component-tab {
  position: relative;
  min-height: 42px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--tab-bg);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(27, 49, 58, 0.08);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.project-history-detail-tabs .tabs-component-tab:hover,
.project-history-detail-tabs .tabs-component-tab:focus-visible {
  top: 0;
  border-color: rgba(47, 118, 147, 0.42);
  background: var(--tab-hover-bg);
  color: var(--accent-strong);
}

.project-history-detail-tabs .tabs-component-tab.active {
  top: 1px;
  z-index: 1;
  border-color: rgba(47, 118, 147, 0.44);
  background: var(--tab-active-bg);
  color: var(--ink);
  box-shadow: 0 16px 30px rgba(24, 40, 48, 0.06);
}

.project-history-detail-tabs .tabs-component-panel {
  margin-top: -1px;
  padding-top: 18px;
  border-top: 1px solid rgba(47, 118, 147, 0.16);
  overflow: visible;
}

.compass-workbench-simple,
.project-history-workbench {
  display: grid;
  gap: 16px;
  align-content: start;
  grid-auto-rows: max-content;
}

.project-compass-workbench > .project-compass-hero,
.project-history-workbench > .project-history-hero {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  height: var(--tab-header-height);
  min-height: var(--tab-header-height);
  max-height: var(--tab-header-height);
  padding: 12px 14px 5px;
  align-items: start;
  overflow: hidden;
}

.project-compass-workbench > .project-compass-hero {
  height: var(--tab-header-height);
  min-height: var(--tab-header-height);
  max-height: var(--tab-header-height);
  padding: 12px 14px 5px;
  align-items: start;
}

.project-compass-hero-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.project-compass-hero-actions > .project-definition-info-control {
  justify-self: end;
}

.project-compass-hero-actions {
  align-self: center;
  justify-self: end;
  justify-content: flex-end;
  width: min(560px, 46vw);
  max-width: min(560px, 46vw);
  margin-left: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.project-history-hero-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.project-history-hero-summary {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-compass-hero .support-copy {
  min-width: 0;
  max-width: min(780px, calc(100vw - 144px));
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.compass-panel-stack {
  display: grid;
  gap: 16px;
}

.project-definition-review-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.compass-dossier,
.project-history-rail,
.project-history-detail {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-floating);
  box-shadow: 0 20px 48px rgba(24, 40, 48, 0.08);
}

.compass-dossier,
.project-history-rail,
.project-history-detail {
  padding: 22px;
}

.compass-dossier {
  display: grid;
  gap: 22px;
}

.compass-overview-summary-panel {
  padding: 18px;
}

.compass-overview-summary {
  display: grid;
  gap: 14px;
}

.compass-overview-summary-header {
  display: grid;
  gap: 10px;
}

.compass-overview-summary-header h3 {
  margin: 0;
  line-height: 1.18;
}

.compass-overview-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.compass-overview-chip-row .summary-pill {
  min-height: 26px;
  justify-content: center;
}

.compass-overview-bearing {
  margin: 0;
  line-height: 1.45;
}

.compass-overview-summary-list {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.compass-overview-summary-list div {
  display: grid;
  grid-template-columns: minmax(92px, 0.44fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
}

.compass-overview-summary-list div + div {
  border-top: 1px solid rgba(27, 49, 58, 0.1);
}

.compass-overview-summary-list dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.compass-overview-summary-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.compass-dossier-group {
  display: grid;
  gap: 14px;
}

.compass-dossier-group + .compass-dossier-group {
  border-top: 1px solid rgba(27, 49, 58, 0.12);
  padding-top: 22px;
}

.compass-dossier-heading,
.project-history-detail-header,
.compass-lifecycle-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.compass-dossier-heading-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.compass-lifecycle-toolbar {
  align-items: end;
}

.compass-lifecycle-copy {
  display: grid;
  gap: 6px;
}

.compass-lifecycle-copy h3,
.project-history-detail-header h3 {
  margin: 0;
}

.compass-status-list,
.project-history-change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.compass-status-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  border: 1px solid var(--line);
}

.compass-status-row {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compass-status-row strong {
  font-size: 0.92rem;
}

.compass-status-row span,
.project-history-change-button span,
.project-history-detail-meta span {
  color: var(--muted);
}

.compass-status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.compass-lifecycle-selector {
  min-width: min(100%, 320px);
}

.project-compass-workspace {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 0;
}

.project-compass-work-controls,
.project-compass-work-list-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-floating);
  box-shadow: 0 20px 48px rgba(24, 40, 48, 0.08);
}

.project-compass-work-filter-group {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 0;
}

.project-compass-work-filter-group legend {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.2;
}

.project-compass-work-filter-list {
  clear: both;
  display: grid;
  gap: 8px;
}

.project-compass-work-filter-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(27, 49, 58, 0.12);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 750;
}

.project-compass-work-filter-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.project-compass-work-filter-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-compass-work-filter-option small {
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.project-compass-work-list-panel {
  display: grid;
  overflow: hidden;
}

.project-compass-inline-search-control,
.project-compass-inline-search-field,
.project-compass-inline-search-row {
  width: 100%;
  min-width: 0;
}

.project-compass-inline-search-control {
  display: grid;
  justify-items: end;
}

.project-compass-inline-search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}

.project-compass-inline-search-row {
  grid-template-columns: minmax(180px, 1fr) 34px 34px;
}

.project-compass-inline-search-row input[type="search"] {
  min-width: 0;
}

.project-compass-inline-search-count {
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  min-height: 14px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.project-compass-work-list-scroll {
  height: clamp(360px, calc(100vh - 304px), 720px);
  min-height: 0;
  overflow: auto;
  padding: 12px;
  scroll-padding: 18px;
}

.project-compass-work-list {
  display: grid;
  gap: 10px;
}

.project-compass-work-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(27, 49, 58, 0.12);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.project-compass-work-card-header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.project-compass-work-card-title {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.project-compass-work-card-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-compass-work-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.project-compass-work-card-actions {
  justify-content: flex-end;
  flex: 0 0 auto;
}

.project-compass-work-card-actions .summary-pill {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 0.7rem;
}

.project-compass-work-card-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.91rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.project-compass-work-card-copy.muted {
  font-style: italic;
}

.project-compass-work-card-details {
  display: grid;
  gap: 9px;
}

.project-compass-work-card-detail {
  display: grid;
  gap: 8px;
}

.project-compass-work-card-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.project-compass-work-card-detail-summary::-webkit-details-marker {
  display: none;
}

.project-compass-work-card-detail-summary::marker {
  content: "";
}

.project-compass-work-card-detail-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.project-compass-disclosure-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--accent-strong);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.project-compass-work-card-disclosure[open]
  > .project-compass-work-card-detail-summary
  .project-compass-disclosure-chevron {
  transform: rotate(45deg);
}

.project-compass-work-card-detail-summary:hover
  .project-compass-disclosure-chevron,
.project-compass-work-card-detail-summary:focus-visible
  .project-compass-disclosure-chevron {
  color: var(--ink);
}

.project-compass-work-card-detail ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
}

.project-compass-work-card-detail li {
  min-width: 0;
  padding-left: 10px;
  border-left: 3px solid rgba(47, 118, 147, 0.34);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-compass-work-empty {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 280px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.project-compass-work-empty h3,
.project-compass-work-empty p {
  margin: 0;
}

.project-history-layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.project-history-rail {
  display: grid;
  gap: 14px;
}

.project-history-rail-header {
  display: grid;
  gap: 6px;
}

.project-history-rail-header h3 {
  margin: 0;
}

.project-history-folder-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-history-change-list {
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px;
}

.project-history-change-button {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

.project-history-change-button:hover,
.project-history-change-button:focus-visible {
  border-color: rgba(47, 118, 147, 0.42);
  background: var(--accent-soft);
}

.project-history-change-button.active {
  border-color: rgba(47, 118, 147, 0.44);
  background: var(--tab-hover-bg);
}

.project-history-detail {
  display: grid;
  gap: 18px;
  align-content: start;
  grid-auto-rows: max-content;
}

.project-history-detail-header {
  align-self: start;
}

.project-history-detail-meta {
  display: grid;
  gap: 4px;
  text-align: right;
}

.project-history-terminal-summary {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.execution-workbench {
  min-width: 0;
}

.execution-workbench > .execution-hero {
  box-sizing: border-box;
  height: var(--tab-header-height);
  min-height: var(--tab-header-height);
  max-height: var(--tab-header-height);
  padding: 12px 14px 5px;
  align-items: start;
  overflow: hidden;
}

.execution-hero-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  justify-self: end;
  align-self: start;
  padding-top: 25px;
  text-align: right;
  white-space: nowrap;
}

.specification-hero .panel-kicker,
.project-compass-workbench > .project-compass-hero .panel-kicker,
.project-history-workbench > .project-history-hero .panel-kicker,
.execution-workbench > .execution-hero .panel-kicker {
  margin-bottom: 6px;
}

.execution-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-floating);
}

.execution-agent-row small,
.execution-agent-row-main span,
.execution-detail-list dt {
  color: var(--muted);
}

.execution-main-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
  align-items: start;
}

.execution-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.execution-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.execution-panel-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.execution-completed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.execution-completed-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.execution-panel-heading h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.18;
}

.execution-agent-list {
  display: grid;
  gap: 8px;
  max-height: 68vh;
  overflow: auto;
  padding-right: 2px;
}

.execution-agent-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  text-align: left;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}

.execution-agent-row:hover,
.execution-agent-row:focus-visible,
.execution-agent-row.active {
  border-color: rgba(47, 118, 147, 0.44);
  background: var(--accent-soft);
}

.execution-agent-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.execution-agent-row-main strong,
.execution-agent-row-main span,
.execution-agent-row-main small,
.execution-current-action,
.execution-runtime-section p {
  overflow-wrap: anywhere;
}

.execution-current-action {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface-muted);
}

.execution-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.execution-detail-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.execution-detail-list div {
  display: grid;
  gap: 2px;
}

.execution-detail-list dd,
.execution-detail-list dt {
  margin: 0;
}

.execution-detail-list dd {
  overflow-wrap: anywhere;
}

.execution-runtime-section {
  display: grid;
  gap: 8px;
}

.execution-recovery-list {
  display: grid;
  gap: 8px;
}

.execution-recovery-action {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.execution-recovery-action strong,
.execution-recovery-action span,
.execution-instruction {
  overflow-wrap: anywhere;
}

.execution-recovery-action span,
.execution-instruction {
  color: var(--muted);
}

.execution-instruction {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--warning);
  background: var(--surface-muted);
}

.execution-json-preview {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 960px) {
  .execution-main-grid,
  .execution-detail-grid {
    grid-template-columns: 1fr;
  }

  .execution-agent-list {
    max-height: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1719;
    --surface: #182224;
    --surface-strong: #202c2e;
    --surface-muted: #121b1e;
    --ink: #e8f0ee;
    --text: var(--ink);
    --muted: #9eb2b4;
    --line: rgba(190, 220, 218, 0.17);
    --line-strong: rgba(190, 220, 218, 0.32);
    --accent: #63b3c6;
    --accent-strong: #9ad7e2;
    --accent-soft: rgba(99, 179, 198, 0.18);
    --accent-wash: rgba(99, 179, 198, 0.11);
    --info: #77c3df;
    --info-soft: rgba(119, 195, 223, 0.16);
    --highlight: #e0a64e;
    --warning: #e1ad64;
    --warning-soft: rgba(224, 166, 78, 0.17);
    --success: #9cc77e;
    --success-soft: rgba(156, 199, 126, 0.16);
    --danger: #e08383;
    --danger-soft: rgba(224, 131, 131, 0.16);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.26);
    --body-bg: linear-gradient(180deg, #0d1214 0%, #111b1d 42%, var(--bg) 100%);
    --surface-glass: rgba(255, 255, 255, 0.12);
    --surface-overlay: rgba(30, 43, 46, 0.88);
    --surface-floating: rgba(27, 39, 42, 0.92);
    --surface-hover: rgba(99, 179, 198, 0.12);
    --field-bg: #10191b;
    --code-surface: #10181a;
    --scrim: rgba(0, 0, 0, 0.56);
    --scrim-soft: rgba(0, 0, 0, 0.36);
    --focus-ring: rgba(99, 179, 198, 0.36);
    --logo-ring: rgba(154, 215, 226, 0.22);
    --brand-text-shadow: none;
    --icon-highlight-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65));
    --chat-bg: #111719;
    --chat-bg-overlay: rgba(17, 23, 25, 0.9);
    --graph-bg: linear-gradient(180deg, #101719 0%, #142022 100%);
    --graph-node-bg: #1d292b;
    --graph-node-success-bg: linear-gradient(
      180deg,
      #1d292b 0%,
      rgba(156, 199, 126, 0.16) 100%
    );
    --graph-node-warning-bg: linear-gradient(
      180deg,
      #1d292b 0%,
      rgba(224, 166, 78, 0.16) 100%
    );
    --graph-node-error-bg: linear-gradient(
      180deg,
      #1d292b 0%,
      rgba(224, 131, 131, 0.16) 100%
    );
    --graph-node-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    --graph-node-selected-shadow:
      0 0 0 3px rgba(99, 179, 198, 0.3), 0 12px 28px rgba(0, 0, 0, 0.28);
    --graph-grid: #2d4245;
    --graph-edge: #668286;
    --graph-edge-primary: var(--accent);
    --graph-edge-selected: #c2edf4;
    --popover-bg: #0f1719;
    --popover-text: #f2fbf8;
    --popover-muted: rgba(242, 251, 248, 0.66);
    --tab-bg: linear-gradient(
      180deg,
      rgba(29, 42, 45, 0.96),
      rgba(22, 33, 36, 0.94)
    );
    --tab-hover-bg: linear-gradient(
      180deg,
      rgba(39, 59, 62, 0.96),
      rgba(31, 48, 51, 0.94)
    );
    --tab-active-bg: linear-gradient(
      180deg,
      rgba(39, 54, 57, 0.98),
      rgba(30, 43, 46, 0.96)
    );
  }

  .identity-card,
  .panel,
  .status-banner,
  .identity-trigger,
  .identity-menu-panel,
  .deft-onboarding-modal,
  .confirmation-modal {
    border-color: var(--line);
  }

  .cockpit-header::before {
    opacity: 0.52;
  }

  .workspace-brand-row .panel-kicker,
  .panel-kicker,
  .eyebrow,
  .identity-label {
    color: var(--accent-strong);
  }

  .summary-pill,
  .status-chip,
  .workspace-state-icon,
  .workspace-state-chip,
  .workspace-icon-button,
  .identity-menu-inline .identity-trigger,
  .github-device-copy-button,
  .project-definition-info-button,
  .settings-panel-close,
  .secondary-button,
  .context-source-icon-button,
  .context-source-test-button {
    background: var(--surface-overlay);
  }

  .primary-button {
    color: #071012;
  }

  .selection-list .item-button:hover,
  .selection-list .task-selector:hover,
  .user-settings-nav-item:hover,
  .user-settings-nav-item:focus-visible,
  .user-settings-nav-item.active,
  .project-history-change-button:hover,
  .project-history-change-button:focus-visible,
  .project-definition-info-button:hover,
  .project-definition-info-button:focus-visible {
    background: var(--surface-hover);
  }

  .opencode-chat-shell,
  .opencode-chat-frame,
  .opencode-chat-placeholder,
  .deft-onboarding-modal,
  .deft-console-card-shell-chat-only {
    background-color: var(--chat-bg);
    background-image: var(--chat-background-image);
  }

  .opencode-chat-placeholder-top {
    background-color: transparent;
    background-image: none;
  }

  .react-flow__controls {
    box-shadow: var(--shadow-soft);
  }

  .react-flow__controls-button {
    border-bottom-color: var(--line);
    background: var(--surface-overlay);
    color: var(--ink);
    fill: currentColor;
  }

  .react-flow__controls-button:hover,
  .react-flow__controls-button:focus-visible {
    background: var(--surface-hover);
  }

  .requirements-search-mark {
    color: #10140e;
  }

  .project-compass-work-controls,
  .project-compass-work-list-panel {
    border-color: rgba(190, 220, 218, 0.13);
    background: rgba(22, 32, 35, 0.94);
    box-shadow: var(--shadow-soft);
  }

  .project-compass-work-filter-option {
    border-color: rgba(190, 220, 218, 0.13);
    background: rgba(18, 27, 30, 0.88);
  }

  .project-compass-work-filter-option:hover,
  .project-compass-work-filter-option:focus-within {
    border-color: rgba(99, 179, 198, 0.34);
    background: rgba(99, 179, 198, 0.1);
  }

  .project-compass-work-filter-option small {
    background: rgba(99, 179, 198, 0.12);
    color: var(--accent-strong);
  }

  .project-compass-work-card {
    border-color: rgba(190, 220, 218, 0.12);
    background: rgba(25, 36, 39, 0.86);
  }

  .project-compass-work-card:hover {
    border-color: rgba(99, 179, 198, 0.24);
    background: rgba(29, 43, 46, 0.92);
  }

  .project-compass-work-card-detail li {
    border-left-color: rgba(99, 179, 198, 0.42);
  }

  .cockpit-stage-popover,
  .project-definition-info-popover {
    box-shadow: var(--shadow);
  }
}

.project-history-spec-picker {
  max-width: 360px;
}

.project-history-detail-body {
  display: grid;
  gap: 12px;
}

@media (max-width: 1180px) {
  .project-compass-workspace,
  .project-history-layout {
    grid-template-columns: 1fr;
  }

  .project-compass-work-filter-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .project-history-change-list {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .compass-dossier-heading,
  .project-history-detail-header,
  .compass-lifecycle-toolbar,
  .project-compass-work-card-header,
  .deft-file-outline-header {
    flex-direction: column;
    align-items: stretch;
  }

  .compass-overview-summary-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .project-history-detail-meta {
    text-align: left;
  }

  .project-compass-work-filter-list {
    grid-template-columns: 1fr;
  }

  .project-compass-inline-search-row {
    grid-template-columns: minmax(0, 1fr) 34px 34px;
  }

  .project-compass-inline-search-count {
    justify-content: flex-start;
  }

  .project-compass-work-card-detail {
    gap: 6px;
  }

  .project-compass-work-list-scroll {
    height: min(62vh, 560px);
  }
}