@felixdotgo/aidlc-kit 0.1.1 → 0.3.0

package/dist/assets/ui/dashboard.css

@@ -0,0 +1,636 @@
+/*
+ * AI-DLC dashboard theme layer, loaded after the vendored Bulma 1.0.3.
+ *
+ * - Keeps Bulma's default palette (primary teal, link blue).
+ * - Flat, enterprise look: white canvas, 1px hairline borders, small radii,
+ *   no elevation except overlays (drawer, modal, toast).
+ * - Dark mode: `html[data-theme="dark"|"light"]` (set before first paint from
+ *   Settings → Appearance, see layout.ts) pins a scheme through Bulma's own
+ *   `[data-theme]` blocks; without it (`system`) Bulma follows
+ *   `@media (prefers-color-scheme: dark)`. Every colour below is expressed
+ *   through `--bulma-*` variables so it follows along, and the few dashboard
+ *   variables that differ per scheme are declared twice: once for the explicit
+ *   dark theme and once for the system preference when no light theme is
+ *   pinned. Never override scheme lightness (`--bulma-*-l`) on a bare `:root`
+ *   here: it has the same specificity as Bulma's media-query block and would
+ *   pin one scheme.
+ * - Custom components use the `ad-` prefix to avoid clashing with Bulma.
+ */
+
+:root {
+  --bulma-family-primary: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --bulma-family-secondary: var(--bulma-family-primary);
+  --bulma-family-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --bulma-radius: 4px;
+  --bulma-radius-small: 3px;
+  --bulma-radius-medium: 4px;
+  --bulma-radius-large: 6px;
+  --ad-radius: 4px;
+  --ad-ring: 0 0 0 1px var(--bulma-border-weak);
+  --ad-ring-strong: 0 0 0 1px var(--bulma-border);
+  --ad-shadow-sm: none;
+  --ad-shadow: none;
+  --ad-shadow-lg: 0 8px 24px -4px hsla(221, 30%, 10%, 0.22), 0 0 1px hsla(221, 30%, 10%, 0.3);
+  --ad-surface: var(--bulma-scheme-main);
+  --ad-canvas: var(--bulma-scheme-main);
+  --ad-subtle: var(--bulma-scheme-main-bis);
+  --ad-muted: var(--bulma-text-weak);
+  --ad-log-bg: hsl(222, 22%, 9%);
+  --ad-log-fg: hsl(220, 14%, 86%);
+  --ad-transition: 160ms ease;
+}
+
+/* Dark-scheme variables: explicit dark theme, or the OS preference unless light is pinned. */
+html[data-theme="dark"] {
+  --ad-shadow-lg: 0 12px 32px -6px hsla(0, 0%, 0%, 0.7), 0 0 0 1px hsla(0, 0%, 100%, 0.06);
+  --ad-surface: var(--bulma-scheme-main);
+  --ad-canvas: var(--bulma-scheme-main);
+  --ad-subtle: var(--bulma-scheme-main-bis);
+  --ad-log-bg: hsl(222, 25%, 6%);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]) {
+    --ad-shadow-lg: 0 12px 32px -6px hsla(0, 0%, 0%, 0.7), 0 0 0 1px hsla(0, 0%, 100%, 0.06);
+    --ad-surface: var(--bulma-scheme-main);
+    --ad-canvas: var(--bulma-scheme-main);
+    --ad-subtle: var(--bulma-scheme-main-bis);
+    --ad-log-bg: hsl(222, 25%, 6%);
+  }
+}
+html[data-theme="dark"] { color-scheme: dark; }
+html[data-theme="light"] { color-scheme: light; }
+
+html { background-color: var(--ad-canvas); scroll-padding-top: 5rem; }
+body { min-height: 100vh; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
+code { border-radius: var(--bulma-radius-small); font-size: 0.85em; }
+[hidden] { display: none !important; }
+:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; }
+
+/* ---------- App header ---------- */
+.ad-header {
+  position: sticky; top: 0; z-index: 30;
+  background: var(--ad-surface);
+  border-bottom: 1px solid var(--bulma-border-weak);
+}
+.ad-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; flex-wrap: wrap; padding-block: 0.5rem; }
+.ad-brand { display: flex; align-items: center; gap: 0.5rem; color: var(--bulma-text-strong); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
+.ad-brand:hover { color: var(--bulma-text-strong); }
+.ad-logo {
+  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--ad-radius);
+  background: var(--bulma-primary); color: var(--bulma-primary-invert); font-size: 0.9rem; font-weight: 800;
+}
+.ad-header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.ad-main { padding-block: 1.5rem 3rem; padding-inline: 0; }
+
+/* ---------- Keyboard hint ---------- */
+kbd, .ad-kbd {
+  display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; margin-left: 0.4rem;
+  font-family: var(--bulma-family-code); font-size: 0.7rem; line-height: 1.25rem; text-align: center;
+  color: inherit; opacity: 0.75; border: 1px solid currentColor; border-radius: 0.3rem;
+}
+
+/* ---------- Generic dot / pill ---------- */
+.ad-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; flex: none; }
+.ad-pill {
+  display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap;
+  padding: 0.0625rem 0.45rem; border-radius: var(--bulma-radius-small); font-size: 0.72rem; font-weight: 600; line-height: 1.4;
+  background: var(--bulma-scheme-main-ter); color: var(--bulma-text);
+  border: 1px solid var(--bulma-border-weak);
+}
+.ad-pill.is-info { background: var(--bulma-info-soft); color: var(--bulma-info-bold); border-color: transparent; }
+.ad-pill.is-success { background: var(--bulma-success-soft); color: var(--bulma-success-bold); border-color: transparent; }
+.ad-pill.is-warning { background: var(--bulma-warning-soft); color: var(--bulma-warning-bold); border-color: transparent; }
+.ad-pill.is-danger { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold); border-color: transparent; }
+.ad-pill.is-primary { background: var(--bulma-primary-soft); color: var(--bulma-primary-bold); border-color: transparent; }
+.ad-pill.is-link { background: var(--bulma-link-soft); color: var(--bulma-link-bold); border-color: transparent; }
+.ad-pill.is-ghost { background: transparent; color: var(--ad-muted); }
+.ad-pill.is-live .ad-dot { animation: ad-pulse 1.8s ease-in-out infinite; }
+@keyframes ad-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+/* ---------- Soft buttons (Bulma's is-light stays bright in dark mode) ---------- */
+.button.ad-soft { border-color: transparent; }
+.button.ad-soft.is-warning { background: var(--bulma-warning-soft); color: var(--bulma-warning-bold); }
+.button.ad-soft.is-link { background: var(--bulma-link-soft); color: var(--bulma-link-bold); }
+.button.ad-soft.is-danger { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold); }
+.button.ad-soft:hover { filter: brightness(0.96); }
+html[data-theme="dark"] .button.ad-soft:hover { filter: brightness(1.2); }
+@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .button.ad-soft:hover { filter: brightness(1.2); } }
+
+/* ---------- Live regions (morphed in place; never a layout box) ---------- */
+.ad-live { display: contents; }
+#live-status { animation: ad-pulse 1.8s ease-in-out infinite; }
+a.ad-pill:hover { filter: brightness(0.96); }
+
+/* ---------- Kanban / list view (html[data-view] is set before first paint) ---------- */
+#list-view { display: none; }
+html[data-view="list"] #list-view { display: block; }
+html[data-view="list"] #kanban-view { display: none; }
+
+/* ---------- Header notifications (tasks waiting at a gate) ---------- */
+.ad-notify { position: relative; }
+.ad-notify-toggle { position: relative; }
+.ad-notify-toggle.has-reviews { color: var(--bulma-warning-bold); background: var(--bulma-warning-soft); border-color: transparent; }
+.ad-notify-badge {
+  position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem;
+  display: inline-grid; place-items: center; border-radius: 999px; font-size: 0.65rem; font-weight: 700; line-height: 1;
+  background: var(--bulma-warning); color: var(--bulma-warning-invert); box-shadow: 0 0 0 2px var(--ad-surface);
+  font-variant-numeric: tabular-nums;
+}
+.ad-notify-panel {
+  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; width: min(24rem, calc(100vw - 2rem));
+  max-height: min(28rem, 70vh); overflow-y: auto; border-radius: var(--ad-radius);
+  background: var(--ad-surface); box-shadow: var(--ad-ring), var(--ad-shadow-lg);
+}
+.ad-notify-head {
+  position: sticky; top: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem;
+  background: var(--ad-surface); border-bottom: 1px solid var(--bulma-border-weak); font-size: 0.85rem; color: var(--bulma-text-strong);
+}
+.ad-notify-head .ad-count { margin-left: auto; }
+.ad-notify-list { list-style: none; margin: 0; padding: 0; }
+.ad-notify-list li + li { border-top: 1px solid var(--bulma-border-weak); }
+.ad-notify-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.65rem 0.9rem; color: inherit; }
+.ad-notify-item:hover, .ad-notify-item:focus-visible { background: var(--ad-subtle); color: inherit; }
+.ad-notify-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--bulma-warning); }
+.ad-notify-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.ad-notify-time { margin-left: auto; font-size: 0.72rem; color: var(--ad-muted); }
+.ad-notify-title { font-weight: 600; color: var(--bulma-text-strong); font-size: 0.875rem; overflow-wrap: anywhere; }
+.ad-notify-id { font-size: 0.72rem; color: var(--ad-muted); background: transparent; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ad-notify-more {
+  display: block; width: 100%; padding: 0.6rem 0.9rem; border: 0; border-top: 1px solid var(--bulma-border-weak);
+  background: transparent; color: var(--bulma-link); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-align: center;
+}
+.ad-notify-more:hover { background: var(--ad-subtle); }
+.ad-notify-empty { padding: 1rem 0.9rem; font-size: 0.85rem; color: var(--ad-muted); }
+
+/* ---------- Toolbar ---------- */
+.ad-toolbar { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; flex-wrap: wrap; }
+.ad-search { position: relative; flex: 1 1 16rem; max-width: 26rem; }
+.ad-search .input { padding-left: 2.1rem; padding-right: 2.2rem; }
+.ad-search-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--ad-muted); pointer-events: none; z-index: 5; }
+.ad-search kbd { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); margin: 0; color: var(--ad-muted); pointer-events: none; }
+.ad-toolbar .select select { min-width: 9rem; }
+.ad-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 0.625rem; }
+.ad-segmented { display: inline-flex; padding: 0.2rem; gap: 0.2rem; border-radius: var(--bulma-radius); background: var(--ad-subtle); box-shadow: inset 0 0 0 1px var(--bulma-border-weak); }
+.ad-segmented button {
+  border: 0; background: transparent; color: var(--ad-muted); font: inherit; font-size: 0.82rem; font-weight: 600;
+  padding: 0.3rem 0.8rem; border-radius: calc(var(--bulma-radius) - 0.15rem); cursor: pointer; transition: background var(--ad-transition), color var(--ad-transition);
+}
+.ad-segmented button:hover { color: var(--bulma-text-strong); }
+.ad-segmented button.is-active { background: var(--ad-surface); color: var(--bulma-text-strong); box-shadow: var(--ad-ring); }
+.ad-result-count { font-size: 0.8rem; color: var(--ad-muted); }
+
+/* ---------- Kanban ---------- */
+.ad-board { display: grid; grid-template-columns: repeat(5, minmax(15rem, 1fr)); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: start; }
+.ad-column {
+  display: flex; flex-direction: column; min-height: 12rem; max-height: calc(100vh - 14rem); border-radius: var(--ad-radius);
+  background: var(--ad-subtle);
+}
+.ad-column-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem 0.5rem; }
+.ad-column-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-muted); }
+.ad-column-head .ad-step-index { color: var(--ad-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
+.ad-count {
+  margin-left: auto; min-width: 1.5rem; padding: 0 0.45rem; border-radius: 999px; text-align: center;
+  font-size: 0.72rem; font-weight: 700; line-height: 1.35rem; background: var(--ad-surface); color: var(--ad-muted); box-shadow: var(--ad-ring);
+}
+.ad-column-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0.625rem 0.75rem; overflow-y: auto; }
+.ad-column-empty { margin: 0.5rem 0.25rem; padding: 1.25rem 0.5rem; border: 1px dashed var(--bulma-border); border-radius: var(--bulma-radius); text-align: center; font-size: 0.8rem; color: var(--ad-muted); }
+
+/* ---------- Task card ---------- */
+.ad-card {
+  position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 0.875rem 0.8rem 1rem;
+  border-radius: var(--ad-radius); background: var(--ad-surface); box-shadow: var(--ad-ring);
+  transition: box-shadow var(--ad-transition), background var(--ad-transition);
+}
+.ad-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--ad-radius) 0 0 var(--ad-radius); background: var(--ad-status-color, var(--bulma-border)); }
+.ad-card:hover { box-shadow: var(--ad-ring-strong); background: var(--ad-subtle); }
+.ad-card[data-card-href] { cursor: pointer; }
+.ad-card.is-attention { box-shadow: 0 0 0 1px var(--bulma-warning); }
+.ad-card-title { font-weight: 600; font-size: 0.95rem; line-height: 1.4; color: var(--bulma-text-strong); word-break: break-word; }
+.ad-card-title a { color: inherit; }
+.ad-card-title a:hover { color: var(--bulma-link); }
+.ad-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
+.ad-card-foot { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--ad-muted); }
+.ad-card-foot .ad-areas { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ad-card-foot .button { margin-left: auto; }
+
+[data-status="active"] { --ad-status-color: var(--bulma-info); }
+[data-status="blocked_on_user"] { --ad-status-color: var(--bulma-warning); }
+[data-status="paused"] { --ad-status-color: var(--bulma-border); }
+[data-status="done"] { --ad-status-color: var(--bulma-success); }
+[data-status="closed"], [data-status="superseded"], [data-handoff="true"] { --ad-status-color: var(--bulma-danger); }
+
+/* ---------- Phase stepper (mini, horizontal) ---------- */
+.ad-steps { display: flex; gap: 3px; width: 100%; }
+.ad-steps > span { flex: 1; height: 4px; border-radius: 999px; background: var(--bulma-border-weak); }
+.ad-steps > span.is-complete { background: var(--bulma-primary); }
+.ad-steps > span.is-current { background: var(--bulma-primary); box-shadow: 0 0 0 2px var(--bulma-primary-soft); }
+.ad-steps.is-done > span { background: var(--bulma-success); }
+
+/* ---------- Phase stepper (horizontal, detail page and side panel) ---------- */
+.ad-stepper {
+  list-style: none; display: flex; margin: 0 0 1.25rem; padding: 0.85rem 1rem; overflow-x: auto;
+  border-radius: var(--ad-radius); background: var(--ad-surface); box-shadow: var(--ad-ring);
+}
+.ad-stepper li { flex: 1 0 auto; display: flex; align-items: center; gap: 0.6rem; }
+.ad-stepper li::after { content: ""; flex: 1 1 auto; min-width: 1.5rem; height: 2px; margin: 0 0.75rem 0 0.25rem; background: var(--bulma-border-weak); }
+.ad-stepper li:last-child { flex: 0 0 auto; min-width: 0; }
+.ad-stepper li:last-child::after { display: none; }
+.ad-stepper li.is-complete::after { background: var(--bulma-primary); }
+.ad-stepper-marker {
+  position: relative; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
+  font-size: 0.72rem; font-weight: 700; background: var(--ad-surface); color: var(--ad-muted); box-shadow: inset 0 0 0 2px var(--bulma-border);
+}
+.ad-stepper li.is-complete .ad-stepper-marker { background: var(--bulma-primary); color: var(--bulma-primary-invert); box-shadow: none; }
+.ad-stepper li.is-current .ad-stepper-marker { color: var(--bulma-primary-bold); box-shadow: inset 0 0 0 2px var(--bulma-primary), 0 0 0 3px var(--bulma-primary-soft); }
+.ad-stepper-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
+.ad-stepper-text strong { font-size: 0.85rem; text-transform: capitalize; color: var(--bulma-text-strong); }
+.ad-stepper li:not(.is-current):not(.is-complete) .ad-stepper-text strong { color: var(--ad-muted); font-weight: 500; }
+.ad-stepper-text small { font-size: 0.72rem; color: var(--ad-muted); }
+.ad-stepper li.is-current .ad-stepper-text small { color: var(--bulma-primary-bold); font-weight: 600; }
+
+/* ---------- List view ---------- */
+.ad-table-wrap { border-radius: var(--ad-radius); background: var(--ad-surface); box-shadow: var(--ad-ring); overflow-x: auto; }
+.ad-table { width: 100%; margin: 0 !important; background: transparent; font-size: 0.875rem; }
+.ad-table th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-muted) !important; background: var(--ad-subtle); white-space: nowrap; border-color: var(--bulma-border-weak) !important; }
+.ad-table td { vertical-align: middle; border-color: var(--bulma-border-weak) !important; }
+.ad-table tbody tr { transition: background var(--ad-transition); }
+.ad-table tbody tr:hover { background: var(--ad-subtle); }
+.ad-table tbody tr:last-child td { border-bottom: 0; }
+.ad-table .ad-steps { min-width: 6rem; }
+.ad-table td.is-empty { text-align: center; color: var(--ad-muted); padding: 2rem; }
+
+/* ---------- Empty states ---------- */
+.ad-empty { text-align: center; padding: 3.5rem 1rem; border-radius: var(--ad-radius); background: var(--ad-surface); box-shadow: var(--ad-ring); }
+.ad-empty-icon { font-size: 2.25rem; line-height: 1; margin-bottom: 0.75rem; }
+.ad-empty h2 { font-size: 1.1rem; font-weight: 700; color: var(--bulma-text-strong); margin-bottom: 0.35rem; }
+.ad-empty p { color: var(--ad-muted); margin-bottom: 1.25rem; }
+.ad-no-match { display: none; text-align: center; padding: 1.5rem; color: var(--ad-muted); }
+.ad-no-match.is-visible { display: block; }
+
+/* ---------- Panels (detail page) ---------- */
+.ad-panel { border-radius: var(--ad-radius); background: var(--ad-surface); box-shadow: var(--ad-ring); margin-bottom: 1rem; overflow: hidden; }
+.ad-panel-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.1rem; border-bottom: 1px solid var(--bulma-border-weak); }
+.ad-panel-head h2, .ad-panel-head h3 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-muted); margin: 0; }
+.ad-panel-head .ad-count, .ad-panel-head .ad-panel-tools { margin-left: auto; }
+.ad-panel-tools { display: flex; gap: 0.4rem; }
+.ad-panel-body { padding: 1rem 1.1rem; }
+.ad-panel-body.is-flush { padding: 0; }
+.ad-panel .ad-table th:first-child, .ad-panel .ad-table td:first-child { padding-left: 1.1rem; }
+.ad-panel .ad-table th:last-child, .ad-panel .ad-table td:last-child { padding-right: 1.1rem; }
+.ad-panel .ad-empty-line { padding: 1rem 1.1rem; color: var(--ad-muted); font-size: 0.875rem; }
+.ad-panel.is-warning { box-shadow: 0 0 0 1px var(--bulma-warning); }
+.ad-panel.is-warning > .ad-panel-head { background: var(--bulma-warning-soft); color: var(--bulma-warning-bold); border-bottom-color: transparent; }
+.ad-panel.is-warning > .ad-panel-head h2, .ad-panel.is-warning > .ad-panel-head h3 { color: inherit; }
+.ad-panel.is-danger { box-shadow: 0 0 0 1px var(--bulma-danger); }
+.ad-panel.is-danger > .ad-panel-head { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold); border-bottom-color: transparent; }
+.ad-panel.is-danger > .ad-panel-head h2 { color: inherit; }
+.ad-panel.is-success { box-shadow: 0 0 0 1px var(--bulma-success); }
+
+/* ---------- Detail page header ---------- */
+.ad-breadcrumb { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--ad-muted); margin-bottom: 0.75rem; }
+.ad-breadcrumb:hover { color: var(--bulma-link); }
+.ad-page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--bulma-text-strong); margin-bottom: 0.5rem; word-break: break-word; }
+.ad-page-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
+.ad-page-sub code { color: var(--ad-muted); background: var(--bulma-scheme-main-ter); }
+
+/* ---------- Meta list (sidebar) ---------- */
+.ad-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; margin: 0; font-size: 0.85rem; }
+.ad-meta dt { color: var(--ad-muted); font-weight: 500; }
+.ad-meta dd { margin: 0; color: var(--bulma-text-strong); text-align: right; word-break: break-word; min-width: 0; }
+.ad-sticky { position: sticky; top: 5rem; }
+
+/* ---------- Gate view ---------- */
+.ad-gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
+.ad-gate-cell { padding: 0.65rem 0.8rem; border-radius: var(--bulma-radius); background: var(--ad-subtle); box-shadow: var(--ad-ring); }
+.ad-gate-cell small { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-muted); margin-bottom: 0.15rem; }
+.ad-gate-cell span { font-size: 0.875rem; color: var(--bulma-text-strong); }
+.ad-subhead { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-muted); margin: 1rem 0 0.5rem; }
+.ad-plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; }
+.ad-plain-list li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
+.ad-callout { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; padding: 0.75rem 0.9rem; border-radius: var(--bulma-radius); background: var(--bulma-warning-soft); color: var(--bulma-warning-bold); font-weight: 600; font-size: 0.9rem; }
+
+/* ---------- Artifacts accordion ---------- */
+.ad-artifact { border-top: 1px solid var(--bulma-border-weak); }
+.ad-artifact:first-child { border-top: 0; }
+.ad-artifact > summary {
+  display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; cursor: pointer; list-style: none;
+  font-weight: 600; color: var(--bulma-text-strong); transition: background var(--ad-transition);
+}
+.ad-artifact > summary::-webkit-details-marker { display: none; }
+.ad-artifact > summary::before { content: "›"; display: inline-block; width: 0.75rem; font-size: 1.1rem; line-height: 1; color: var(--ad-muted); transition: transform var(--ad-transition); }
+.ad-artifact[open] > summary::before { transform: rotate(90deg); }
+.ad-artifact > summary:hover { background: var(--ad-subtle); }
+.ad-artifact > summary code { margin-left: auto; font-weight: 400; color: var(--ad-muted); background: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
+.ad-artifact .artifact { padding: 0.25rem 1.25rem 1.25rem 2.5rem; max-height: 40rem; overflow: auto; }
+.content.artifact { font-size: 0.92rem; }
+.content.artifact h1, .content.artifact h2, .content.artifact h3 { margin-top: 1.25em; margin-bottom: 0.5em; }
+.content.artifact h1 { font-size: 1.35rem; }
+.content.artifact h2 { font-size: 1.1rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--bulma-border-weak); }
+.content.artifact h3 { font-size: 1rem; }
+.content.artifact table { font-size: 0.82rem; }
+.content.artifact pre { background: var(--bulma-scheme-main-ter); padding: 0.75rem 1rem; border-radius: var(--bulma-radius); overflow: auto; }
+.content.artifact blockquote { border-left-color: var(--bulma-primary); background: var(--bulma-scheme-main-ter); }
+
+/* ---------- Terminal log ---------- */
+.ad-terminal { border-radius: var(--ad-radius); overflow: hidden; background: var(--ad-log-bg); margin-bottom: 1rem; }
+.ad-terminal-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; background: hsla(0, 0%, 100%, 0.04); border-bottom: 1px solid hsla(0, 0%, 100%, 0.06); color: hsl(220, 10%, 70%); font-size: 0.8rem; }
+.ad-terminal-head .ad-lights { display: none; }
+.ad-terminal-head .ad-lights span { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: hsl(0, 0%, 35%); }
+.ad-terminal-head .ad-lights span:nth-child(1) { background: hsl(4, 85%, 62%); }
+.ad-terminal-head .ad-lights span:nth-child(2) { background: hsl(40, 90%, 58%); }
+.ad-terminal-head .ad-lights span:nth-child(3) { background: hsl(140, 55%, 50%); }
+.ad-terminal-head strong { color: hsl(220, 14%, 90%); font-weight: 600; }
+.ad-terminal-tools { margin-left: auto; display: flex; gap: 0.35rem; }
+.ad-terminal-tools button {
+  font: inherit; font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 0.35rem; cursor: pointer;
+  color: hsl(220, 10%, 78%); background: hsla(0, 0%, 100%, 0.06); border: 1px solid hsla(0, 0%, 100%, 0.1);
+}
+.ad-terminal-tools button:hover { background: hsla(0, 0%, 100%, 0.12); color: #fff; }
+.ad-terminal-tools button[aria-pressed="true"] { color: hsl(171, 80%, 60%); border-color: hsla(171, 80%, 60%, 0.4); }
+.log-panel {
+  height: 24rem; overflow: auto; padding: 0.75rem 0.9rem; margin: 0;
+  font-family: var(--bulma-family-code); font-size: 0.78rem; line-height: 1.55; color: var(--ad-log-fg); white-space: pre-wrap; word-break: break-word;
+}
+.ad-log-line { display: grid; grid-template-columns: auto auto 1fr; gap: 0.75rem; }
+.ad-log-time { color: hsl(220, 10%, 50%); }
+.ad-log-type { color: hsl(200, 80%, 66%); min-width: 8ch; }
+.ad-log-line.is-error .ad-log-type, .ad-log-line.is-error .ad-log-text { color: hsl(0, 85%, 70%); }
+.ad-log-line.is-warn .ad-log-type { color: hsl(40, 90%, 62%); }
+.ad-log-line.is-ok .ad-log-type { color: hsl(140, 55%, 60%); }
+.ad-log-line.is-agent .ad-log-type { color: hsl(171, 80%, 55%); }
+.ad-log-muted { color: hsl(220, 10%, 50%); font-style: italic; }
+
+/* Readable live log (live-log.js): `time · actor · sentence`, grouped by turn.
+ * The terminal stays dark in both schemes, so tones are fixed light hues. */
+.ad-log-line.is-unparsed { display: block; color: hsl(220, 10%, 60%); }
+.ad-log-line.is-error .ad-log-text { color: hsl(0, 85%, 72%); }
+.ad-log-line.is-warn .ad-log-text { color: hsl(40, 90%, 66%); }
+.ad-log-line.is-ok .ad-log-text { color: hsl(140, 50%, 66%); }
+.ad-log-line.is-muted .ad-log-text { color: hsl(220, 10%, 58%); }
+.ad-log-actor {
+  align-self: start; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  padding: 0 0.4rem; border-radius: var(--bulma-radius-small); font-size: 0.7rem; line-height: 1.5rem;
+  color: hsl(220, 14%, 88%); background: hsla(0, 0%, 100%, 0.08);
+}
+.ad-log-line .ad-log-actor { line-height: 1.2rem; margin-top: 0.1rem; }
+.ad-log-actor.is-lead { color: hsl(171, 80%, 62%); background: hsla(171, 80%, 45%, 0.16); }
+.ad-log-actor.is-loop { color: hsl(220, 10%, 64%); background: hsla(220, 10%, 60%, 0.12); }
+.ad-log-actor.is-worker-0 { color: hsl(217, 90%, 74%); background: hsla(217, 90%, 60%, 0.18); }
+.ad-log-actor.is-worker-1 { color: hsl(271, 80%, 78%); background: hsla(271, 80%, 60%, 0.18); }
+.ad-log-actor.is-worker-2 { color: hsl(28, 90%, 70%); background: hsla(28, 90%, 55%, 0.18); }
+.ad-log-actor.is-worker-3 { color: hsl(330, 75%, 76%); background: hsla(330, 75%, 60%, 0.18); }
+.ad-log-code { background: hsla(0, 0%, 100%, 0.07); color: inherit; padding: 0 0.3em; font-size: inherit; }
+.ad-log-link { color: hsl(200, 85%, 70%); text-decoration: underline; }
+.ad-log-link:hover { color: hsl(200, 85%, 80%); }
+.ad-log-text.is-json { color: hsl(220, 10%, 72%); }
+.ad-log-more > summary { cursor: pointer; list-style: none; }
+.ad-log-more > summary::-webkit-details-marker { display: none; }
+.ad-log-more > summary::after { content: " ▸ more"; color: hsl(220, 10%, 52%); font-size: 0.9em; }
+.ad-log-more[open] > summary::after { content: " ▾ less"; }
+.ad-log-full { margin-top: 0.25rem; padding-left: 0.6rem; border-left: 2px solid hsla(0, 0%, 100%, 0.12); color: hsl(220, 12%, 78%); }
+.ad-log-turn { margin: 0.6rem 0 0.35rem; }
+.ad-log-turn:first-child { margin-top: 0; }
+.ad-log-turn-head {
+  display: grid; grid-template-columns: auto auto 1fr; gap: 0.75rem; align-items: center;
+  padding: 0.15rem 0; border-top: 1px solid hsla(0, 0%, 100%, 0.08); color: hsl(220, 14%, 92%); font-weight: 600;
+}
+.ad-log-turn-body { padding-left: 1.1rem; border-left: 2px solid hsla(0, 0%, 100%, 0.08); margin-left: 0.3rem; }
+.ad-log-switch { display: inline-flex; }
+.ad-log-switch button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.ad-log-switch button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
+.ad-terminal-tools a { font-size: 0.72rem; color: hsl(200, 85%, 70%); }
+.ad-terminal-tools a:hover { color: hsl(200, 85%, 80%); }
+.ad-terminal-head .ad-log-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ad-live-log.is-compact { margin: 0 0 1rem; }
+.log-panel.is-compact { height: auto; max-height: 15rem; font-size: 0.74rem; }
+@media screen and (max-width: 768px) {
+  .ad-live-log .ad-terminal-head { flex-wrap: wrap; }
+  .ad-log-line, .ad-log-turn-head { grid-template-columns: auto 1fr; }
+  .ad-log-line .ad-log-time, .ad-log-turn-head .ad-log-time { display: none; }
+}
+
+/* ---------- Toasts ---------- */
+.ad-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
+.ad-toast {
+  pointer-events: auto; display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.9rem; border-radius: var(--bulma-radius-medium);
+  background: var(--ad-surface); color: var(--bulma-text-strong); box-shadow: var(--ad-ring), var(--ad-shadow-lg);
+  border-left: 4px solid var(--ad-accent, var(--bulma-info)); font-size: 0.875rem; animation: ad-toast-in 200ms ease-out;
+}
+.ad-toast.is-success { --ad-accent: var(--bulma-success); }
+.ad-toast.is-danger { --ad-accent: var(--bulma-danger); }
+.ad-toast.is-warning { --ad-accent: var(--bulma-warning); }
+.ad-toast-icon { flex: none; font-weight: 800; color: var(--ad-accent, var(--bulma-info)); }
+.ad-toast-body { flex: 1; min-width: 0; word-break: break-word; }
+.ad-toast-body small { display: block; color: var(--ad-muted); margin-top: 0.15rem; }
+.ad-toast-close { flex: none; border: 0; background: transparent; color: var(--ad-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
+.ad-toast.is-leaving { opacity: 0; transform: translateY(0.5rem); transition: opacity 200ms, transform 200ms; }
+@keyframes ad-toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
+
+/* ---------- Modals ---------- */
+.modal-background { background-color: hsla(221, 39%, 8%, 0.45); }
+.modal-card { width: min(44rem, calc(100vw - 2rem)); border-radius: var(--ad-radius); box-shadow: var(--ad-shadow-lg); }
+.modal-card-head, .modal-card-foot { background: var(--ad-surface); border-color: var(--bulma-border-weak); padding: 0.9rem 1.25rem; }
+.modal-card-head { box-shadow: none; }
+.modal-card-title { font-size: 1.05rem; font-weight: 700; }
+.modal-card-body { background: var(--ad-surface); }
+.modal-card-foot { justify-content: flex-end; gap: 0.5rem; }
+.modal-card-foot .ad-foot-start { margin-right: auto; font-size: 0.8rem; color: var(--ad-muted); }
+.modal.is-active .modal-background { animation: ad-fade-in 180ms ease-out; }
+.modal.is-active .modal-card { animation: ad-modal-in 200ms cubic-bezier(0.22, 1, 0.36, 1); }
+.modal.is-closing .modal-background { animation: ad-fade-out 160ms ease-in forwards; }
+.modal.is-closing .modal-card { animation: ad-modal-out 160ms ease-in forwards; }
+@keyframes ad-modal-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.97); } to { opacity: 1; transform: none; } }
+@keyframes ad-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }
+@keyframes ad-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ad-fade-out { from { opacity: 1; } to { opacity: 0; } }
+.ad-field-hint { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.75rem; color: var(--ad-muted); }
+.ad-field-hint .is-over { color: var(--bulma-danger); font-weight: 600; }
+
+/* ---------- Task side panel (drawer, JIRA-style) ---------- */
+.ad-drawer { position: fixed; inset: 0; z-index: 40; }
+.ad-drawer-backdrop { position: absolute; inset: 0; background: hsla(221, 39%, 8%, 0.35); opacity: 0; transition: opacity 240ms ease; }
+.ad-drawer-panel {
+  position: absolute; top: 0; right: 0; height: 100%; width: clamp(40rem, 55vw, 72rem); max-width: 100vw;
+  display: flex; flex-direction: column; background: var(--ad-surface); border-left: 1px solid var(--bulma-border-weak);
+  box-shadow: var(--ad-shadow-lg); transform: translateX(100%); opacity: 0.6; outline: none;
+  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
+}
+.ad-drawer.is-open .ad-drawer-backdrop { opacity: 1; }
+.ad-drawer.is-open .ad-drawer-panel { transform: none; opacity: 1; }
+.ad-drawer-head {
+  flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem;
+  border-bottom: 1px solid var(--bulma-border-weak); background: var(--ad-surface);
+}
+.ad-drawer-id { font-size: 0.8rem; color: var(--ad-muted); background: transparent; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ad-drawer-head .button { margin-left: auto; }
+.ad-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem 1.5rem 2rem; overscroll-behavior: contain; }
+/* The detail layout stacks in one column inside the panel; Details goes last. */
+.ad-drawer-body .columns { display: block; margin: 0; }
+.ad-drawer-body .column { width: auto; padding: 0; }
+.ad-drawer-body .ad-sticky { position: static; }
+.ad-drawer-body .ad-page-title { font-size: 1.3rem; }
+
+/* ---------- Responsive ---------- */
+@media screen and (max-width: 1023px) {
+  .ad-board { grid-template-columns: repeat(5, minmax(16rem, 80vw)); scroll-snap-type: x mandatory; }
+  .ad-column { scroll-snap-align: start; max-height: none; }
+  .ad-sticky { position: static; }
+}
+@media screen and (max-width: 768px) {
+  .ad-toolbar-end { margin-left: 0; width: 100%; justify-content: space-between; }
+  .ad-search { max-width: none; }
+  .ad-header-actions .ad-hide-mobile { display: none; }
+  .ad-page-title { font-size: 1.3rem; }
+  .ad-drawer-panel { width: 100vw; }
+  .ad-drawer-body { padding: 1rem; }
+}
+
+/* ---------- Collapsed kanban column ---------- */
+.ad-column-more {
+  display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem; border: 1px dashed var(--bulma-border); border-radius: var(--ad-radius);
+  background: transparent; color: var(--ad-muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
+}
+.ad-column-more:hover { color: var(--bulma-link); border-color: var(--bulma-link); }
+
+/* ---------- Side-panel call to action (open the full page for gate actions) ---------- */
+.ad-drawer-cta { margin: 0 0 1rem; align-items: center; flex-wrap: wrap; }
+.ad-drawer-cta .button { margin-left: auto; }
+.ad-callout.is-danger { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold); }
+
+/* ---------- Task changes page (server-rendered unified diff) ---------- */
+.ad-changes-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
+.ad-changes-banner { margin: 0 0 1rem; }
+.ad-changes-item .ad-changes-banner { margin: 0.75rem 1.1rem 0; }
+.ad-callout.is-info { background: var(--bulma-info-soft); color: var(--bulma-info-bold); }
+.ad-changes-commit { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--ad-muted); }
+/* .ad-panel clips with overflow: hidden, which turns it into the sticky file list's
+ * scroll container and disables sticking; clip keeps the rounded corners without that. */
+.ad-panel.ad-changes-item { overflow: visible; overflow: clip; }
+.ad-changes { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); align-items: start; }
+.ad-changes-files { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; border-right: 1px solid var(--bulma-border-weak); padding: 0.5rem 0; }
+.ad-changes-files ul { margin: 0; list-style: none; }
+.ad-changes-files a { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.9rem; font-size: 0.8rem; color: var(--bulma-text); }
+.ad-changes-files a:hover, .ad-changes-files a:focus-visible { background: var(--ad-subtle); color: var(--bulma-link); }
+.ad-diff-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-family: var(--bulma-family-code); }
+.ad-diff-stat { margin-left: auto; font-family: var(--bulma-family-code); font-size: 0.75rem; color: var(--ad-muted); white-space: nowrap; }
+.ad-diff-plus { color: var(--bulma-success-bold, var(--bulma-success)); }
+.ad-diff-minus { color: var(--bulma-danger-bold, var(--bulma-danger)); }
+.ad-diff-status { font-size: 0.65rem; padding: 0.05rem 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; flex: none; }
+.ad-changes-diff { min-width: 0; padding: 0.75rem; }
+.ad-diff-file { margin-bottom: 1rem; border-radius: var(--ad-radius); box-shadow: var(--ad-ring); overflow: hidden; scroll-margin-top: 5rem; }
+.ad-diff-file.is-target { box-shadow: 0 0 0 2px var(--bulma-link); }
+.ad-diff-file-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; background: var(--ad-subtle); border-bottom: 1px solid var(--bulma-border-weak); }
+.ad-diff-file-head code { background: transparent; padding: 0; color: var(--bulma-text-strong); white-space: normal; word-break: break-all; }
+.ad-diff { overflow-x: auto; font-family: var(--bulma-family-code); font-size: 0.78rem; line-height: 1.45; }
+.ad-diff-line { white-space: pre; min-height: 1.45em; padding: 0 0.75rem; min-width: max-content; }
+.ad-diff-add { background: var(--bulma-success-soft); color: var(--bulma-success-bold, inherit); }
+.ad-diff-del { background: var(--bulma-danger-soft); color: var(--bulma-danger-bold, inherit); }
+.ad-diff-hunk { background: var(--bulma-info-soft); color: var(--bulma-info-bold, var(--ad-muted)); }
+.ad-diff-meta { color: var(--ad-muted); }
+.ad-diff-note { padding: 0.6rem 0.75rem; font-size: 0.85rem; color: var(--ad-muted); }
+@media (max-width: 1023px) {
+  .ad-changes { grid-template-columns: minmax(0, 1fr); }
+  .ad-changes-files { position: static; max-height: 16rem; border-right: 0; border-bottom: 1px solid var(--bulma-border-weak); }
+}
+
+/* ---------- Copy-to-clipboard id ---------- */
+.ad-copy {
+  display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.1rem 0.4rem; border: 0; border-radius: var(--ad-radius);
+  background: transparent; color: var(--ad-muted); font: inherit; cursor: pointer; transition: background var(--ad-transition), color var(--ad-transition);
+}
+.ad-copy code { background: transparent; padding: 0; color: inherit; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ad-copy svg { flex: none; opacity: 0.7; }
+.ad-copy:hover, .ad-copy:focus-visible { background: var(--ad-subtle); color: var(--bulma-link); }
+.ad-copy.is-copied { color: var(--bulma-success-bold, var(--bulma-success)); }
+/* The side panel shows the id (with copy) in its header; skip the body's copy. */
+.ad-drawer-body .ad-page-sub .ad-copy { display: none; }
+
+/* ---------- "Radioactive" pulse on the current step ---------- */
+.ad-pulse { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; color: var(--bulma-primary); }
+.ad-pulse.is-waiting { color: var(--bulma-warning); }
+.ad-pulse::before, .ad-pulse::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor;
+  animation: ad-pulse-ring 1.8s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
+}
+.ad-pulse::after { animation-delay: 0.9s; }
+/* Named apart from the `ad-pulse` opacity blink above: two keyframes with one name would
+ * make the last declaration win for both the live dot and this ring. */
+@keyframes ad-pulse-ring { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.1); opacity: 0; } }
+.ad-stepper li.is-current .ad-stepper-marker { z-index: 0; }
+
+/* ---------- New task panel + Markdown editor ---------- */
+.ad-drawer.is-compose .ad-drawer-panel { width: clamp(34rem, 44vw, 52rem); }
+.ad-drawer-heading { margin-right: auto; font-size: 1rem; font-weight: 700; color: var(--bulma-text-strong); }
+.ad-drawer-foot {
+  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--bulma-border-weak); background: var(--ad-surface);
+}
+.ad-drawer-foot .ad-foot-start { margin-right: auto; font-size: 0.8rem; color: var(--ad-muted); }
+.ad-compose-intro { margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--ad-muted); }
+.ad-editor { display: flex; flex-direction: column; border-radius: var(--ad-radius); box-shadow: var(--ad-ring); background: var(--ad-surface); transition: box-shadow var(--ad-transition); }
+.ad-editor:focus-within { box-shadow: 0 0 0 1px var(--bulma-link), 0 0 0 4px var(--bulma-link-soft, transparent); }
+.ad-editor-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--bulma-border-weak); background: var(--ad-subtle); border-radius: var(--ad-radius) var(--ad-radius) 0 0; }
+.ad-editor-tabs { display: flex; gap: 0.15rem; }
+.ad-editor-tabs button, .ad-editor-tool {
+  border: 0; border-radius: var(--ad-radius); background: transparent; color: var(--ad-muted); font: inherit; font-size: 0.8rem; cursor: pointer;
+  padding: 0.25rem 0.6rem; transition: background var(--ad-transition), color var(--ad-transition);
+}
+.ad-editor-tabs button[aria-selected="true"] { background: var(--ad-surface); color: var(--bulma-text-strong); font-weight: 600; box-shadow: var(--ad-ring); }
+.ad-editor-tools { display: flex; flex-wrap: wrap; gap: 0.1rem; margin-left: auto; }
+.ad-editor-tool { min-width: 1.9rem; padding: 0.25rem 0.45rem; }
+.ad-editor-tool:hover:not(:disabled), .ad-editor-tabs button:hover { background: var(--ad-surface); color: var(--bulma-link); }
+.ad-editor-tool:disabled { opacity: 0.4; cursor: default; }
+.ad-editor-input {
+  display: block; width: 100%; min-height: 18rem; resize: vertical; border: 0; outline: none; padding: 0.85rem 1rem; background: transparent;
+  color: var(--bulma-text); font-family: var(--bulma-family-code); font-size: 0.85rem; line-height: 1.6; border-radius: 0 0 var(--ad-radius) var(--ad-radius);
+}
+.ad-editor-preview { min-height: 18rem; padding: 0.85rem 1rem; overflow: auto; }
+
+/* ---------- Settings dialog ---------- */
+.ad-settings { display: flex; flex-direction: column; gap: 1.1rem; }
+.ad-settings-group { margin: 0; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--bulma-border-weak); min-inline-size: 0; }
+.ad-settings-group:last-child { padding-bottom: 0; border-bottom: 0; }
+.ad-settings-group > legend { padding: 0; margin-bottom: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-muted); }
+.ad-settings .field:last-child { margin-bottom: 0; }
+.ad-settings .label.is-small { margin-bottom: 0.3rem; font-weight: 600; }
+.ad-settings-radios { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
+.ad-settings .radio input, .ad-settings .checkbox input { margin-right: 0.4rem; }
+.ad-settings .help.is-danger { color: var(--bulma-danger-bold); }
+
+/* ---------- Docs pages ---------- */
+.ad-docs { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
+.ad-docs-nav { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; font-size: 0.85rem; }
+.ad-docs-nav-title { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-muted); }
+.ad-docs-pages, .ad-docs-toc { margin: 0 0 1.25rem; list-style: none; }
+.ad-docs-nav a { display: block; padding: 0.3rem 0.6rem; border-radius: var(--ad-radius); color: var(--bulma-text); }
+.ad-docs-nav a:hover { background: var(--ad-subtle); color: var(--bulma-link); }
+.ad-docs-nav a.is-active { background: var(--bulma-primary-soft); color: var(--bulma-primary-bold); font-weight: 600; }
+.ad-docs-toc .is-level-3 a { padding-left: 1.4rem; font-size: 0.8rem; color: var(--ad-muted); }
+.ad-docs-body .artifact { padding: 1.5rem 2rem 2rem; max-height: none; overflow: visible; }
+.ad-docs-body h1, .ad-docs-body h2, .ad-docs-body h3, .ad-docs-body h4 { position: relative; scroll-margin-top: 4.5rem; }
+.ad-doc-anchor { position: absolute; left: -1.1rem; opacity: 0; color: var(--ad-muted); font-weight: 400; text-decoration: none; }
+.ad-docs-body h1:hover .ad-doc-anchor, .ad-docs-body h2:hover .ad-doc-anchor, .ad-docs-body h3:hover .ad-doc-anchor, .ad-docs-body h4:hover .ad-doc-anchor { opacity: 1; }
+.ad-doc-callout { border-left: 3px solid var(--bulma-info); background: var(--bulma-info-soft); color: var(--bulma-text); }
+.ad-doc-callout.is-warning, .ad-doc-callout.is-caution { border-left-color: var(--bulma-warning); background: var(--bulma-warning-soft); }
+.ad-doc-callout.is-important { border-left-color: var(--bulma-link); background: var(--bulma-link-soft); }
+.ad-doc-callout.is-tip { border-left-color: var(--bulma-success); background: var(--bulma-success-soft); }
+.ad-doc-callout-title { display: block; margin-bottom: 0.2rem; }
+@media screen and (max-width: 1023px) {
+  .ad-docs { grid-template-columns: 1fr; }
+  .ad-docs-nav { position: static; max-height: none; }
+  .ad-drawer.is-compose .ad-drawer-panel { width: 100vw; }
+}
+
+/* Containers */
+/* The container log viewer sits inside the Containers panel, under the table. */
+.ad-panel .ad-container-log { margin: 0; border-radius: 0; border-top: 1px solid var(--bulma-border-weak); }
+.ad-container-log[hidden] { display: none; }
+.ad-container-log .ad-terminal-head { flex-wrap: wrap; }
+.ad-container-log .log-panel { height: 20rem; }
+.ad-container-log [data-container-log-name] { font-family: var(--bulma-family-code); }
+
+/* ---------- Code changes page: wrap toggle and toolbar options ---------- */
+.ad-changes-diff.is-wrapped .ad-diff-line { white-space: pre-wrap; word-break: break-word; min-width: 0; }
+.ad-changes-form { display: inline-flex; align-items: center; gap: 0.6rem; }
+.ad-changes-options { display: inline-flex; align-items: center; gap: 0.9rem; margin-left: auto; font-size: 0.8rem; }
+.ad-changes-options label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }