:root {
    --trellis-navy: #1E2A44;
    --trellis-navy-soft: #2a3858;
    --trellis-ink: #0f1626;
    --trellis-paper: #f6f7fb;
    --trellis-paper-dim: #d9def0;
    --trellis-accent: #c8d3ee;
    --trellis-border: #3a4a6e;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--trellis-navy);
    color: var(--trellis-paper);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

main {
    height: 100%;
}

/* Skip-to-main: standard a11y pattern — pulled off-screen until focused
   (Tab from URL bar) so keyboard users can jump past the page chrome. */
.skip-to-main {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--trellis-accent);
    color: var(--trellis-navy);
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transform: translateY(-200%);
    transition: transform 120ms ease;
}

.skip-to-main:focus, .skip-to-main:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--trellis-paper);
    outline-offset: 2px;
}

.landing {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    padding: 1.25rem 1.5rem 2rem;
}

.landing-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.signin-cta {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--trellis-border);
    background: transparent;
    color: var(--trellis-paper);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 120ms ease, border-color 120ms ease;
}

.signin-cta:hover, .signin-cta:focus-visible {
    background: var(--trellis-navy-soft);
    border-color: var(--trellis-accent);
    outline: none;
}

.landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 0 1rem;
}

.wordmark {
    margin: 0;
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--trellis-paper);
}

.prompt {
    width: min(720px, 100%);
    background: var(--trellis-ink);
    border: 1px solid var(--trellis-border);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.prompt-input {
    width: 100%;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--trellis-paper);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.4rem 0.25rem;
}

.prompt-input::placeholder {
    color: var(--trellis-paper-dim);
}

.prompt-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.prompt-hint {
    font-size: 0.85rem;
    color: var(--trellis-paper-dim);
}

.prompt-submit {
    appearance: none;
    border: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--trellis-accent);
    color: var(--trellis-navy);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prompt-submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.landing-footer {
    text-align: center;
    color: var(--trellis-paper-dim);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* /chat — post-sign-in layout shell. Reuses .prompt / .prompt-input /
   .prompt-actions / .prompt-submit from the landing styles above. */

.chat-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "topbar  topbar"
        "sidebar main";
    height: 100vh;
}

.chat-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--trellis-ink);
    border-bottom: 1px solid var(--trellis-border);
}

.chat-wordmark {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--trellis-paper);
    text-decoration: none;
}

.chat-model-picker select {
    appearance: none;
    background: var(--trellis-navy-soft);
    color: var(--trellis-paper);
    border: 1px solid var(--trellis-border);
    border-radius: 999px;
    padding: 0.4rem 1.5rem 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.chat-model-picker select:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.chat-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--trellis-accent);
    color: var(--trellis-navy);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.chat-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0.85rem;
    background: var(--trellis-ink);
    border-right: 1px solid var(--trellis-border);
    overflow-y: auto;
}

.chat-new {
    appearance: none;
    border: 1px solid var(--trellis-border);
    background: var(--trellis-navy-soft);
    color: var(--trellis-paper);
    border-radius: 12px;
    padding: 0.55rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.chat-new:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.chat-sidebar-title {
    margin: 0.35rem 0 0.25rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--trellis-paper-dim);
}

.chat-conversation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.chat-conversation {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--trellis-paper);
    text-align: left;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conversation:hover:not(:disabled), .chat-conversation:focus-visible {
    background: var(--trellis-navy-soft);
    outline: none;
}

.chat-conversation:disabled {
    cursor: not-allowed;
    color: var(--trellis-paper-dim);
}

.chat-conversation--active,
.chat-conversation--active:disabled {
    background: var(--trellis-navy-soft);
    color: var(--trellis-paper);
    box-shadow: inset 3px 0 0 var(--trellis-accent);
}

.chat-conversation-empty {
    margin: 0.35rem 0.35rem 0;
    color: var(--trellis-paper-dim);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Per-row container that stacks the conversation button, the ⋯ trigger,
   any inline rename input, and the pending-delete confirmation. The
   trigger sits absolutely-positioned over the right edge of the title
   button so the title can use the full width. */
.chat-conversation-row {
    position: relative;
}

.chat-conversation-row .chat-conversation {
    /* Make room for the ⋯ trigger so long titles don't tuck under it. */
    padding-right: 2.2rem;
}

.chat-conversation-actions {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--trellis-paper);
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 80ms ease, background 80ms ease;
}

.chat-conversation-row:hover .chat-conversation-actions,
.chat-conversation-row:focus-within .chat-conversation-actions,
.chat-conversation-actions:focus-visible,
.chat-conversation-actions[aria-expanded="true"] {
    opacity: 1;
}

.chat-conversation-actions:hover:not(:disabled),
.chat-conversation-actions:focus-visible {
    background: var(--trellis-navy);
    outline: none;
}

.chat-conversation-actions:disabled {
    cursor: not-allowed;
    opacity: 0;
}

.chat-conversation-menu {
    position: absolute;
    top: calc(100% - 0.1rem);
    right: 0.25rem;
    min-width: 7.5rem;
    z-index: 10;
    background: var(--trellis-navy);
    border: 1px solid var(--trellis-border);
    border-radius: 8px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.chat-conversation-menu button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--trellis-paper);
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.chat-conversation-menu button:hover,
.chat-conversation-menu button:focus-visible {
    background: var(--trellis-navy-soft);
    outline: none;
}

.chat-conversation-menu-delete {
    color: #ff8b8b;
}

.chat-conversation-rename {
    width: 100%;
    appearance: none;
    background: var(--trellis-navy);
    color: var(--trellis-paper);
    border: 1px solid var(--trellis-accent);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
}

.chat-conversation-rename:focus {
    outline: none;
    border-color: var(--trellis-accent);
}

.chat-conversation-confirm {
    background: rgba(255, 92, 92, 0.12);
    border: 1px solid rgba(255, 92, 92, 0.4);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-conversation-confirm-text {
    font-size: 0.85rem;
    color: var(--trellis-paper);
}

.chat-conversation-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.chat-conversation-confirm-cancel,
.chat-conversation-confirm-delete {
    appearance: none;
    border: 1px solid var(--trellis-border);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.chat-conversation-confirm-cancel {
    background: transparent;
    color: var(--trellis-paper);
}

.chat-conversation-confirm-cancel:hover,
.chat-conversation-confirm-cancel:focus-visible {
    background: var(--trellis-navy-soft);
    outline: none;
}

.chat-conversation-confirm-delete {
    background: #c5453d;
    color: var(--trellis-paper);
    border-color: #c5453d;
}

.chat-conversation-confirm-delete:hover,
.chat-conversation-confirm-delete:focus-visible {
    background: #a83a33;
    outline: none;
}

.chat-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 1rem;
    overflow-y: auto;
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.chat-welcome-text {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--trellis-paper);
}

.chat-notfound {
    margin: 0 0 1rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: var(--trellis-navy-soft);
    border: 1px solid var(--trellis-border);
    color: var(--trellis-paper-dim);
    font-size: 0.85rem;
    text-align: center;
}

.chat-messages {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-bubble {
    max-width: min(820px, 100%);
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-bubble--user {
    align-self: flex-end;
    background: var(--trellis-accent);
    color: var(--trellis-navy);
}

.chat-bubble--assistant {
    align-self: flex-start;
    background: var(--trellis-ink);
    color: var(--trellis-paper);
    border: 1px solid var(--trellis-border);
}

/* Assistant bubbles render Markdown HTML (Markdig output), so the
   pre-wrap inherited from .chat-bubble would double-up against the <p>
   blocks Markdig emits. Reset to normal here; user bubbles keep
   pre-wrap so newlines in typed prompts stay visible. */
.chat-bubble--assistant .chat-bubble-content {
    white-space: normal;
}

.chat-bubble--assistant .chat-bubble-content > :first-child { margin-top: 0; }
.chat-bubble--assistant .chat-bubble-content > :last-child  { margin-bottom: 0; }

.chat-bubble--assistant .chat-bubble-content p {
    margin: 0 0 0.6rem;
}

.chat-bubble--assistant .chat-bubble-content h1,
.chat-bubble--assistant .chat-bubble-content h2,
.chat-bubble--assistant .chat-bubble-content h3,
.chat-bubble--assistant .chat-bubble-content h4,
.chat-bubble--assistant .chat-bubble-content h5,
.chat-bubble--assistant .chat-bubble-content h6 {
    margin: 0.85rem 0 0.4rem;
    line-height: 1.25;
    font-weight: 600;
}

.chat-bubble--assistant .chat-bubble-content h1 { font-size: 1.35rem; }
.chat-bubble--assistant .chat-bubble-content h2 { font-size: 1.2rem; }
.chat-bubble--assistant .chat-bubble-content h3 { font-size: 1.05rem; }
.chat-bubble--assistant .chat-bubble-content h4,
.chat-bubble--assistant .chat-bubble-content h5,
.chat-bubble--assistant .chat-bubble-content h6 {
    font-size: 1rem;
}

.chat-bubble--assistant .chat-bubble-content ul,
.chat-bubble--assistant .chat-bubble-content ol {
    margin: 0 0 0.6rem;
    padding-left: 1.4rem;
}

.chat-bubble--assistant .chat-bubble-content li {
    margin: 0.15rem 0;
}

.chat-bubble--assistant .chat-bubble-content code {
    font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
    font-size: 0.9em;
    background: var(--trellis-navy-soft);
    color: var(--trellis-paper);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.chat-bubble--assistant .chat-bubble-content pre {
    margin: 0.4rem 0 0.7rem;
    padding: 0.7rem 0.85rem;
    background: var(--trellis-navy);
    border: 1px solid var(--trellis-border);
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.4;
    font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
    font-size: 0.85em;
    color: var(--trellis-paper);
}

.chat-bubble--assistant .chat-bubble-content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
}

/* Markdown.ColorCode (HtmlFormatterType.Css) wraps highlighted fenced
   blocks in <div class="LANG"><pre>...tokens...</pre></div> instead of the
   bare <pre><code> Markdig emits for unknown / no-language fences. The
   .chat-bubble--assistant .chat-bubble-content pre rule above already
   handles the inner <pre>'s background / border / margins, so the
   wrapper div just stays at its default zero-padding-zero-margin and
   inherits the bubble's text colour.

   Token class names are bare words ("keyword", "comment", etc.) — generic
   enough that scoping them under the assistant bubble + the language
   wrapper is essential to keep them from bleeding into other contexts. */

/* Generic token colours (apply to every supported language: csharp,
   python, javascript, typescript, css, html, sql, php, fsharp, java,
   c++, vb.net, powershell, xml, aspx). Muted accents on the existing
   navy palette — no neon. */

.chat-bubble--assistant .chat-bubble-content [class] .keyword {
    color: #8ab8ff;
}

.chat-bubble--assistant .chat-bubble-content [class] .string,
.chat-bubble--assistant .chat-bubble-content [class] .stringEscape {
    color: #ffb38a;
}

.chat-bubble--assistant .chat-bubble-content [class] .comment {
    color: #92a3c4;
    font-style: italic;
}

.chat-bubble--assistant .chat-bubble-content [class] .number,
.chat-bubble--assistant .chat-bubble-content [class] .preprocessorKeyword {
    color: #c8a8ff;
}

.chat-bubble--assistant .chat-bubble-content [class] .type,
.chat-bubble--assistant .chat-bubble-content [class] .htmlElementName,
.chat-bubble--assistant .chat-bubble-content [class] .xmlName {
    color: #b8d4ff;
}

.chat-bubble--assistant .chat-bubble-content [class] .htmlAttributeName,
.chat-bubble--assistant .chat-bubble-content [class] .xmlAttribute {
    color: #ffd49a;
}

.chat-bubble--assistant .chat-bubble-content [class] .htmlAttributeValue,
.chat-bubble--assistant .chat-bubble-content [class] .xmlAttributeValue {
    color: #ffb38a;
}

/* JSON-specific tokens use distinct class names. */
.chat-bubble--assistant .chat-bubble-content [class] .jsonKey {
    color: #ffd49a;
}

.chat-bubble--assistant .chat-bubble-content [class] .jsonString {
    color: #ffb38a;
}

.chat-bubble--assistant .chat-bubble-content [class] .jsonNumber {
    color: #c8a8ff;
}

/* CSS-specific tokens. */
.chat-bubble--assistant .chat-bubble-content [class] .cssSelector {
    color: #b8d4ff;
}

.chat-bubble--assistant .chat-bubble-content [class] .cssPropertyName {
    color: #ffd49a;
}

.chat-bubble--assistant .chat-bubble-content [class] .cssPropertyValue {
    color: #ffb38a;
}

.chat-bubble--assistant .chat-bubble-content blockquote {
    margin: 0 0 0.6rem;
    padding: 0.1rem 0 0.1rem 0.85rem;
    border-left: 3px solid var(--trellis-accent);
    color: var(--trellis-paper-dim);
}

.chat-bubble--assistant .chat-bubble-content a {
    color: var(--trellis-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-bubble--assistant .chat-bubble-content table {
    border-collapse: collapse;
    margin: 0 0 0.6rem;
    font-size: 0.92em;
}

.chat-bubble--assistant .chat-bubble-content th,
.chat-bubble--assistant .chat-bubble-content td {
    border: 1px solid var(--trellis-border);
    padding: 0.35rem 0.6rem;
    text-align: left;
}

.chat-bubble--assistant .chat-bubble-content th {
    background: var(--trellis-navy-soft);
}

.chat-bubble--assistant .chat-bubble-content hr {
    border: 0;
    border-top: 1px solid var(--trellis-border);
    margin: 0.85rem 0;
}

.chat-bubble-role {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.chat-composer {
    display: flex;
    justify-content: center;
    margin: 0;
}

.chat-composer .prompt {
    width: min(820px, 100%);
}

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

@media (max-width: 720px) {
    .chat-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }

    .chat-sidebar {
        display: none;
    }
}

/* Global nav bar (MainLayout). Sister palette to .chat-topbar so the
   two-level header stays visually coherent. Lower-rank visual weight
   than the page-specific *-topbar below it: thinner padding +
   slightly muted brand text. */
.global-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--trellis-ink, #1e2a44);
    border-bottom: 1px solid var(--trellis-border, #2a3754);
}

.global-nav-brand {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--trellis-paper, #f5f5f5);
    text-decoration: none;
}

.global-nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.global-nav-link {
    color: var(--trellis-paper, #f5f5f5);
    text-decoration: none;
    opacity: 0.72;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.global-nav-link:hover,
.global-nav-link:focus-visible {
    opacity: 1;
    background: var(--trellis-navy-soft, rgba(255, 255, 255, 0.08));
}

.global-nav-link--active {
    opacity: 1;
    font-weight: 500;
}

.global-nav-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.global-nav-user {
    color: var(--trellis-paper, #f5f5f5);
    opacity: 0.85;
    font-size: 0.9rem;
}

.global-nav-signout-form {
    display: inline;
    margin: 0;
}

.global-nav-signout,
.global-nav-signin {
    color: var(--trellis-paper, #f5f5f5);
    background: var(--trellis-navy-soft, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--trellis-border, #2a3754);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
}

.global-nav-signout:hover,
.global-nav-signout:focus-visible,
.global-nav-signin:hover,
.global-nav-signin:focus-visible {
    background: var(--trellis-navy-strong, rgba(255, 255, 255, 0.16));
}

/* /workflows + /workflows/new — Phase 2 CTA + editor styling. Reuses
   the var(--trellis-*) palette + matches the Phase 1 workflows-*
   styles. */

.workflows-new-cta {
    background: var(--trellis-accent, #5a8dee);
    color: var(--trellis-paper, #f5f5f5);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.workflows-new-cta:hover,
.workflows-new-cta:focus-visible {
    background: var(--trellis-accent-strong, #4a7bd8);
}

.workflows-new-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}

.workflows-new-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.workflows-new-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.workflows-new-back {
    color: var(--trellis-paper, #f5f5f5);
    opacity: 0.7;
    text-decoration: none;
    font-size: 0.9rem;
}
.workflows-new-back:hover,
.workflows-new-back:focus-visible {
    opacity: 1;
}

.workflows-new-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--trellis-error-bg, rgba(220, 53, 69, 0.12));
    border: 1px solid var(--trellis-error-border, rgba(220, 53, 69, 0.4));
    margin-bottom: 1.25rem;
}
.workflows-new-error-text {
    margin: 0;
    flex: 1;
    color: var(--trellis-error, #dc3545);
    font-size: 0.95rem;
}
.workflows-new-retry {
    border: 1px solid var(--trellis-error, #dc3545);
    background: transparent;
    color: var(--trellis-error, #dc3545);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.workflows-new-retry:hover:not(:disabled),
.workflows-new-retry:focus-visible:not(:disabled) {
    background: var(--trellis-error-bg, rgba(220, 53, 69, 0.18));
}

.workflows-new-section {
    margin-bottom: 1.5rem;
}

.workflows-new-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.workflows-new-hint {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0 0 0.5rem 0;
}
.workflows-new-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    padding: 0.5rem;
    border: 1px solid var(--trellis-border, #2a3754);
    border-radius: 6px;
    background: var(--trellis-ink-soft, #11182a);
    color: var(--trellis-paper, #f5f5f5);
}
.workflows-new-textarea--invalid {
    border-color: var(--trellis-error, #dc3545);
    outline-color: var(--trellis-error, #dc3545);
}
.workflows-new-field-error {
    color: var(--trellis-error, #dc3545);
    font-size: 0.85rem;
    margin: 0.3rem 0 0 0;
}

.workflows-new-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
.workflows-new-cancel {
    color: var(--trellis-paper, #f5f5f5);
    opacity: 0.8;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}
.workflows-new-cancel:hover,
.workflows-new-cancel:focus-visible {
    opacity: 1;
    background: var(--trellis-navy-soft, rgba(255, 255, 255, 0.08));
}
.workflows-new-submit {
    background: var(--trellis-accent, #5a8dee);
    color: var(--trellis-paper, #f5f5f5);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    font-weight: 500;
}
.workflows-new-submit:hover:not(:disabled),
.workflows-new-submit:focus-visible:not(:disabled) {
    background: var(--trellis-accent-strong, #4a7bd8);
}
.workflows-new-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Auto-refresh toggle (Workflows runs-list). Sits next to the Refresh
   button in the topbar; the label wraps the checkbox so clicking the
   text is a valid toggle target (a11y discipline -- no 6px-only
   click area). */
.workflows-autorefresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--trellis-ink, #2c2c2c);
    cursor: pointer;
    user-select: none;
}
.workflows-autorefresh input[type="checkbox"] {
    cursor: pointer;
}
.workflows-autorefresh-text {
    line-height: 1;
}

/* PR #22 backoff hint. Dimmed italic small-print per pinned decision
   #5 -- NOT a banner. Sits next to the auto-refresh toggle on the
   runs-list page + in the run-detail topbar. role="status" +
   aria-live="polite" so screen-readers announce the hint when it
   appears (the polling-paused state is information the user should
   passively learn about, not interrupted with). */
.workflows-polling-backoff-hint {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.75;
    /* Use the existing --trellis-ink token; the opacity above
       provides the muted/subdued look without introducing a new
       palette variable. */
    color: var(--trellis-ink);
}

/* Phase 5.A fix-up B1: truncation hint shown below the definitions
   table when the page returns Limit rows. Dimmed italic to read as
   meta-info rather than a row; role="status" + the muted styling
   reinforces "this is a note, not a warning." */
.workflows-limit-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.75;
    color: var(--trellis-ink);
}

/* Phase 5.A — workflow definition detail page. Copy JSON button +
   section header layout; structure-summary node list. Minimal styling
   that reuses the existing accent/border palette tokens. */
.workflow-def-json-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.workflow-def-copy {
    background: var(--trellis-accent, #5a8dee);
    color: var(--trellis-paper, #f5f5f5);
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.workflow-def-copy:hover,
.workflow-def-copy:focus-visible {
    background: var(--trellis-accent-strong, #4a7bd8);
}
.workflow-def-node-list {
    list-style: disc inside;
    margin: 0.5rem 0 0 0;
    padding: 0;
}
.workflow-def-node-list li {
    font-size: 0.9rem;
    padding: 0.1rem 0;
}

/* Phase 5.B re-schedule section (run-detail page). Reuses
   workflows-new-* button styling for the primary action; cancel +
   unavailable aside have their own minimal styling. */
.workflow-run-reschedule {
    margin: 1rem 0;
}
.workflow-run-reschedule-hint {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.9rem;
    opacity: 0.85;
}
.workflow-run-reschedule-confirm {
    margin: 0.25rem 0 0.5rem;
    font-weight: 500;
}
.workflow-run-reschedule-actions {
    display: flex;
    gap: 0.5rem;
}
.workflow-run-reschedule-btn {
    background: var(--trellis-accent, #5a8dee);
    color: var(--trellis-paper, #f5f5f5);
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.workflow-run-reschedule-btn:hover:not(:disabled),
.workflow-run-reschedule-btn:focus-visible:not(:disabled) {
    background: var(--trellis-accent-strong, #4a7bd8);
}
.workflow-run-reschedule-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.workflow-run-reschedule-cancel {
    background: transparent;
    color: var(--trellis-ink);
    border: 1px solid var(--trellis-border, #c0c0c0);
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.workflow-run-reschedule-cancel:hover:not(:disabled),
.workflow-run-reschedule-cancel:focus-visible:not(:disabled) {
    background: var(--trellis-paper-dim, #eee);
}
.workflow-run-reschedule-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.workflow-run-reschedule-unavailable {
    margin: 0.25rem 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--trellis-border, #c0c0c0);
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.85;
    color: var(--trellis-ink);
}

/* Phase 5.C — workflow definition CRUD (create / edit / delete).
   Reuses workflows-new-* (form layout) + workflow-run-reschedule-*
   (confirm panel posture) tokens where possible; only the new
   delete-section + topbar action-row + the editor's Name + Description
   text inputs need new rules. */

/* Single-line text inputs for Name + Description on the editor page.
   Sister styling to workflows-new-textarea so the field set reads as
   a single visual family. */
.workflows-new-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem;
    border: 1px solid var(--trellis-border, #2a3754);
    border-radius: 6px;
    background: var(--trellis-ink-soft, #11182a);
    color: var(--trellis-paper, #f5f5f5);
}
.workflows-new-input--invalid {
    border-color: var(--trellis-error, #dc3545);
    outline-color: var(--trellis-error, #dc3545);
}

/* Detail-page header action row for Edit (and future actions). The
   anchor reuses workflows-new-cta for its visual styling; the wrapper
   gives it inline grouping in the topbar. */
.workflow-def-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.workflow-def-edit-link {
    font-size: 0.9rem;
}

/* Detail-page delete section. Mirrors the workflow-run-reschedule
   layout: section margin, confirm panel inline, primary button on
   the left + Cancel on the right. The delete button uses the error
   color palette to flag destructive intent. */
.workflow-def-delete {
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--trellis-border, #2a3754);
}
.workflow-def-delete-hint {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.9rem;
    opacity: 0.85;
}
.workflow-def-delete-confirm {
    margin: 0.25rem 0 0.5rem;
    font-weight: 500;
}
.workflow-def-delete-permanent-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.workflow-def-delete-friction-hint {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.85rem;
    opacity: 0.85;
}
.workflow-def-delete-friction-input {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    border: 1px solid var(--trellis-border, #2a3754);
    border-radius: 6px;
    background: var(--trellis-ink-soft, #11182a);
    color: var(--trellis-paper, #f5f5f5);
    margin-bottom: 0.5rem;
}
.workflow-def-delete-actions {
    display: flex;
    gap: 0.5rem;
}
.workflow-def-delete-btn {
    background: var(--trellis-error, #dc3545);
    color: var(--trellis-paper, #f5f5f5);
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.workflow-def-delete-btn:hover:not(:disabled),
.workflow-def-delete-btn:focus-visible:not(:disabled) {
    filter: brightness(1.05);
}
.workflow-def-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.workflow-def-delete-cancel {
    background: transparent;
    color: var(--trellis-ink);
    border: 1px solid var(--trellis-border, #c0c0c0);
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.workflow-def-delete-cancel:hover:not(:disabled),
.workflow-def-delete-cancel:focus-visible:not(:disabled) {
    background: var(--trellis-paper-dim, #eee);
}
.workflow-def-delete-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}