/* ===========================================================================
   Design tokens (app-wide). Originally introduced for /issues/new v2 refresh,
   promoted to :root so all pages share the same palette / spacing / radii /
   shadows. Individual pages can still override --nx-* locally to accent a
   section (e.g. required-section swaps the accent to red).
   =========================================================================== */
:root {
    --nx-ink:       #0f172a;
    --nx-ink-soft:  #475569;
    --nx-muted:     #64748b;
    --nx-border:    #e2e8f0;
    --nx-border-2:  #cbd5e1;
    --nx-bg:        #f8fafc;
    --nx-bg-card:   #ffffff;
    --nx-bg-soft:   #f8fafc;
    --nx-bg-tint:   #f1f5f9;
    --nx-accent:    #4f46e5;  /* indigo 600 */
    --nx-accent-2:  #6366f1;  /* indigo 500 */
    --nx-accent-tint: #eef2ff;
    --nx-danger:    #dc2626;
    --nx-danger-tint: #fef2f2;
    --nx-success:   #16a34a;
    --nx-success-tint: #dcfce7;
    --nx-warn:      #d97706;
    --nx-warn-tint: #fef3c7;
    --nx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --nx-shadow:    0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04);
    --nx-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 12px 30px rgba(15, 23, 42, 0.08);
    --nx-radius:    14px;
    --nx-radius-sm: 10px;
    --nx-radius-xs: 6px;
    --nx-focus:     0 0 0 3px rgba(99, 102, 241, 0.25);
}

body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 "Hiragino Sans", "Yu Gothic UI", sans-serif;
    max-width: 80rem;
    margin: 2rem auto;
    padding: 0 1rem;
    color: var(--nx-ink);
    background: var(--nx-bg);
    line-height: 1.55;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--nx-ink);
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }

main h1 {
    margin-bottom: 1rem;
}

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

form label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--nx-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="url"],
form input[type="number"],
form input[type="datetime-local"],
form input[type="date"],
form input[type="time"],
form textarea,
form select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-top: 0.35rem;
    border: 1px solid var(--nx-border-2);
    border-radius: var(--nx-radius-xs);
    background: var(--nx-bg-card);
    color: var(--nx-ink);
    font-size: 0.92rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--nx-accent-2);
    box-shadow: var(--nx-focus);
}
form textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    line-height: 1.55;
    resize: vertical;
    min-height: 5rem;
}

form button,
.button {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    background: linear-gradient(180deg, var(--nx-accent-2) 0%, var(--nx-accent) 100%);
    color: #fff;
    border: none;
    border-radius: var(--nx-radius-xs);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    text-decoration: none;
    letter-spacing: 0.005em;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.15), 0 3px 8px rgba(79, 70, 229, 0.12);
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
form button:hover,
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2), 0 6px 14px rgba(79, 70, 229, 0.18);
    filter: brightness(1.03);
    color: #fff;
    text-decoration: none;
}
form button:active,
.button:active {
    transform: translateY(0);
    filter: brightness(0.97);
}
form button:focus-visible,
.button:focus-visible {
    outline: none;
    box-shadow: var(--nx-focus), 0 3px 8px rgba(79, 70, 229, 0.18);
}
form button:disabled,
form button[disabled],
.button:disabled,
.button[disabled] {
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(0.9);
    opacity: 0.55;
    box-shadow: none;
    transform: none;
}
/* Secondary button variant (subtle, for less-prominent actions) */
form button.secondary,
.button.secondary {
    background: var(--nx-bg-card);
    color: var(--nx-ink-soft);
    border: 1px solid var(--nx-border-2);
    box-shadow: var(--nx-shadow-sm);
}
form button.secondary:hover,
.button.secondary:hover {
    background: var(--nx-accent-tint);
    border-color: var(--nx-accent-2);
    color: var(--nx-accent);
    filter: none;
}
/* Danger variant */
form button.danger,
.button.danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.15), 0 3px 8px rgba(220, 38, 38, 0.12);
}
form button.danger:hover,
.button.danger:hover {
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2), 0 6px 14px rgba(220, 38, 38, 0.18);
}

fieldset {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-card);
    padding: 0.9rem 1.1rem;
    margin: 0 0 1rem 0;
    box-shadow: var(--nx-shadow-sm);
}
fieldset legend {
    padding: 0 0.5rem;
    color: var(--nx-ink);
    font-weight: 700;
    font-size: 0.85rem;
}

.error {
    color: var(--nx-danger);
    background: var(--nx-danger-tint);
    border: 1px solid #fecaca;
    padding: 0.6rem 0.9rem;
    border-radius: var(--nx-radius-xs);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Global table styling — softer borders + hover row highlight */
table {
    border-collapse: collapse;
}
table.pending-issues,
table.recent-runs,
table.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    background: var(--nx-bg-card);
    border-radius: var(--nx-radius-sm);
    overflow: hidden;
    box-shadow: var(--nx-shadow-sm);
    border: 1px solid var(--nx-border);
}
table.pending-issues th,
table.pending-issues td,
table.recent-runs th,
table.recent-runs td,
table.admin-table th,
table.admin-table td {
    border-bottom: 1px solid var(--nx-border);
    padding: 0.55rem 0.75rem;
    text-align: left;
}
table.pending-issues thead th,
table.recent-runs thead th,
table.admin-table thead th {
    background: var(--nx-bg-tint);
    color: var(--nx-ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--nx-border-2);
}
table.pending-issues tbody tr:hover,
table.recent-runs tbody tr:hover,
table.admin-table tbody tr:hover {
    background: var(--nx-bg-soft);
}
table.pending-issues tbody tr:last-child td,
table.recent-runs tbody tr:last-child td,
table.admin-table tbody tr:last-child td {
    border-bottom: none;
}

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

/* Badge styles for run status — modernised to pill format with soft
   tinted backgrounds. Colour tokens per-status stay so the meanings
   remain readable. */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.badge-running        { background: #dbeafe; color: #1d4ed8; }
.badge-completed      { background: var(--nx-success-tint); color: #166534; }
.badge-failed         { background: var(--nx-danger-tint); color: var(--nx-danger); }
.badge-human_needed   { background: #ffedd5; color: #c2410c; }
.badge-spec_review    { background: var(--nx-warn-tint); color: #a16207; }
.badge-rejected       { background: var(--nx-bg-tint); color: var(--nx-ink-soft); }

section.spec-review {
    margin: 2rem 0 1.5rem;
    padding: 1.1rem 1.35rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fefdf7 100%);
    border: 1px solid #fde68a;
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-sm);
}

section.spec-review h2 {
    margin-top: 0;
    color: #92400e;
}

.spec-review-actions {
    margin: 0.75rem 0 1rem;
    display: flex;
    gap: 0.75rem;
}

.spec-review-actions button {
    padding: 0.5rem 1rem;
    border-radius: var(--nx-radius-xs);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--nx-bg-card);
    color: var(--nx-ink-soft);
    transition: transform 0.1s, box-shadow 0.15s;
    box-shadow: var(--nx-shadow-sm);
}
.spec-review-actions button:hover {
    transform: translateY(-1px);
    box-shadow: var(--nx-shadow);
}

.spec-review-actions button.approve {
    background: linear-gradient(180deg, #22c55e 0%, var(--nx-success) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.15), 0 3px 8px rgba(22, 163, 74, 0.12);
}

.spec-review-actions button.reject {
    background: var(--nx-bg-card);
    color: #b91c1c;
    border-color: #fca5a5;
}
.spec-review-actions button.reject:hover {
    background: var(--nx-danger-tint);
}

#spec-body, #spec-judge pre {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.75rem;
    max-height: 60vh;
    overflow: auto;
}

.badge-stage {
    background-color: #ede9fe;
    color: #6d28d9;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.stage-elapsed {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* Running section styles (020) */
section.running {
    margin-bottom: 1.5rem;
}

.run-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background: var(--nx-bg-card);
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow 0.15s ease;
}
.run-card:hover {
    box-shadow: var(--nx-shadow);
}

.run-id {
    font-weight: 600;
}

.issue-title {
    color: #475569;
}

.started-at {
    margin-left: auto;
    color: #64748b;
    font-size: 0.875rem;
}

/* Recent runs section styles (020) */
section.recent {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

table.recent-runs {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

table.recent-runs th,
table.recent-runs td {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.4rem 0.5rem;
    text-align: left;
}

.start-next-form {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hint {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Target-repo fieldset inside the New Issue form (issue 051) */
fieldset.target-repo-fieldset {
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-soft);
    box-shadow: var(--nx-shadow-sm);
}

fieldset.target-repo-fieldset legend {
    padding: 0 0.5rem;
    color: var(--nx-ink);
    font-weight: 700;
}

fieldset.target-repo-fieldset label {
    display: block;
    margin: 0.5rem 0;
}

fieldset.target-repo-fieldset label.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ClickUp import fieldset on the New Issue form. */
fieldset.clickup-import {
    margin: 0 0 1rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid #c7d2fe;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-accent-tint);
}

fieldset.clickup-import legend {
    padding: 0 0.5rem;
    color: #3730a3;
    font-weight: 700;
}

fieldset.clickup-import .form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

fieldset.clickup-import #clickup-task-id {
    flex: 0 1 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Stage outputs viewer + resume controls on run_detail */
section.stage-outputs,
section.resume-controls {
    margin: 1.5rem 0;
    padding: 1.1rem 1.35rem;
    background: var(--nx-bg-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow 0.15s ease;
}
section.stage-outputs:hover,
section.resume-controls:hover {
    box-shadow: var(--nx-shadow);
}

section.resume-controls .resume-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

section.resume-controls select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--nx-border-2);
    border-radius: var(--nx-radius-xs);
}

details.stage-output {
    margin: 0.5rem 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-card);
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow 0.15s ease;
}
details.stage-output:hover {
    box-shadow: var(--nx-shadow);
}

details.stage-output > summary {
    cursor: pointer;
    padding: 0.6rem 0.85rem;
    background: var(--nx-bg-tint);
    border-radius: var(--nx-radius-sm);
    font-weight: 600;
    color: var(--nx-ink);
}

details.stage-output[open] > summary {
    border-bottom: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0;
}

.stage-output-body {
    margin: 0;
    padding: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    max-height: 60vh;
    overflow-y: auto;
}

.stage-output-filename {
    color: #6b7280;
    font-weight: normal;
    font-size: 0.85rem;
}

/* Rendered markdown body (replaces the plain <pre> view). */
.stage-output-md {
    padding: 0.5rem 1rem 1rem;
    max-height: 70vh;
    overflow: auto;
    line-height: 1.55;
    font-size: 0.95rem;
    color: #1f2937;
}

.stage-output-md > :first-child {
    margin-top: 0;
}

.stage-output-md h1,
.stage-output-md h2,
.stage-output-md h3,
.stage-output-md h4 {
    margin: 1.1rem 0 0.5rem;
    color: #111827;
    line-height: 1.25;
}

.stage-output-md h1 { font-size: 1.25rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.25rem; }
.stage-output-md h2 { font-size: 1.1rem; }
.stage-output-md h3 { font-size: 1rem; }
.stage-output-md h4 { font-size: 0.95rem; color: #334155; }

.stage-output-md p {
    margin: 0.5rem 0;
}

.stage-output-md ul,
.stage-output-md ol {
    margin: 0.4rem 0 0.6rem 1.3rem;
    padding: 0;
}

.stage-output-md li {
    margin: 0.15rem 0;
}

.stage-output-md code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background-color: #f1f5f9;
    color: #b91c1c;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
}

.stage-output-md pre {
    background-color: #0f172a;
    color: #e2e8f0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.4;
}

.stage-output-md pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.stage-output-md table {
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.stage-output-md th,
.stage-output-md td {
    border: 1px solid #e2e8f0;
    padding: 0.35rem 0.6rem;
    text-align: left;
}

.stage-output-md th {
    background-color: #f1f5f9;
}

.stage-output-md blockquote {
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
    border-left: 3px solid #cbd5e1;
    color: #475569;
}

.stage-output-md a {
    color: #2563eb;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.form-row label {
    flex: 0 0 14rem;
    font-size: 0.9rem;
    color: #475569;
}

.form-row input[type="text"],
.form-row input[type="password"] {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.form-row-inline label {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Implementation diff viewer (run detail) */
.diff-file {
    margin: 0.5rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: #f8fafc;
}

.diff-file > summary {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: #334155;
    background-color: #f1f5f9;
    border-radius: 0.375rem;
}

.diff-file[open] > summary {
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0.375rem 0.375rem 0 0;
}

.diff-body {
    margin: 0;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.35;
    background-color: #ffffff;
    border-radius: 0 0 0.375rem 0.375rem;
}

.diff-line {
    display: block;
    white-space: pre;
}

.diff-add {
    background-color: #dcfce7;
    color: #14532d;
}

.diff-del {
    background-color: #fee2e2;
    color: #7f1d1d;
}

.diff-hunk {
    color: #64748b;
    background-color: #f1f5f9;
}

#diff-summary {
    margin: 0.5rem 0;
    color: #475569;
}

/* === Stage progress floating header (run_detail) ============================
   Fixed-row table pinned to the top of the run-detail viewport so the user
   can see at a glance which stage is currently running, which have already
   PASS'd, and which are still pending. Refreshes on the same 5-min cadence
   as the stage-outputs viewer. */
.stage-progress-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 2px solid #cbd5e1;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem 1rem -0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.stage-progress-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.stage-progress-table th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

.stage-progress-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px dotted #e2e8f0;
    vertical-align: middle;
}

.stage-progress-table tr:last-child td {
    border-bottom: none;
}

.progress-state-pending td {
    color: #94a3b8;
}

.progress-state-running td {
    background: #fef9c3;
}

.progress-state-completed td {
    color: #065f46;
}

.progress-state-failed td {
    background: #fee2e2;
    color: #7f1d1d;
}

.progress-state-skipped td {
    color: #94a3b8;
    font-style: italic;
}

.progress-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.progress-badge-pending   { background: #e2e8f0; color: #475569; }
.progress-badge-running   { background: #facc15; color: #713f12; }
.progress-badge-completed { background: #86efac; color: #14532d; }
.progress-badge-failed    { background: #f87171; color: #7f1d1d; }
.progress-badge-skipped   { background: #e2e8f0; color: #64748b; }

/* Narrow-viewport layout: hide the stage-progress header entirely.
   Below the wide-sidebar threshold the header would either eat vertical
   space at the top (sticky) or overlap the main column, both of which
   the ops team preferred not to see on smaller monitors. Stage state
   remains available via the run-detail output panels below the fold. */
@media (max-width: 99.9999rem) {
    .stage-progress-header {
        display: none;
    }
}

/* Wide-viewport layout: move the stage-progress header out of the top
   sticky band into a fixed left sidebar so the main run-detail column
   can stretch to full width. Kicks in only when there is enough room
   for both a ~17rem sidebar and the previous 80rem body. Scoped to
   pages that actually have the stage-progress element via :has(), so
   dashboards / issue lists keep their centred 80rem layout unchanged. */
@media (min-width: 100rem) {
    body:has(.stage-progress-header) {
        max-width: none;
        margin: 2rem 2rem 2rem 19rem;
    }
    .stage-progress-header {
        position: fixed;
        top: 1rem;
        left: 0.5rem;
        width: 17rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        margin: 0;
        padding: 0.5rem 0.75rem;
        border-bottom: none;
        border-right: 2px solid #cbd5e1;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .stage-progress-table {
        font-size: 0.78rem;
    }
    .stage-progress-table th,
    .stage-progress-table td {
        padding: 0.2rem 0.35rem;
    }
    .progress-badge {
        padding: 0.05rem 0.3rem;
        font-size: 0.7rem;
    }
}

.verdict {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.4rem;
}

.verdict-PASS         { background: #d1fae5; color: #065f46; }
.verdict-FAIL         { background: #fee2e2; color: #7f1d1d; }
.verdict-NEEDS_REWORK { background: #fef3c7; color: #78350f; }

/* Markdown preview pane on the New Issue form. Sits below the body
   textarea (inside a <details>) so it does not crowd the form on
   narrow screens but is open by default to nudge the user to verify
   the rendered output before submitting. */
details.body-preview {
    margin: 0.5rem 0 1.5rem 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #fafafa;
}

details.body-preview summary {
    cursor: pointer;
    color: #475569;
    font-weight: 600;
    padding: 0.25rem 0;
}

.body-preview-pane {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    background-color: #ffffff;
    min-height: 4rem;
    line-height: 1.5;
}

.body-preview-pane img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    padding: 2px;
    background: #f8fafc;
}

.body-preview-pane h1,
.body-preview-pane h2,
.body-preview-pane h3 {
    margin: 0.6rem 0 0.4rem 0;
}

.body-preview-pane pre {
    background: #f1f5f9;
    padding: 0.5rem;
    border-radius: 0.25rem;
    overflow-x: auto;
}

.body-preview-pane code {
    background: #f1f5f9;
    padding: 0.05rem 0.25rem;
    border-radius: 0.2rem;
    font-size: 0.9em;
}

/* === /issues/new v2 layout (modern refresh) ================================
   Design tokens + card-based sections + pill radio tiles. Uses CSS custom
   properties so the palette can be tuned in one place. */

/* /issues/new v2 は :root の design tokens をそのまま利用するので、
   スコープ独自のトークン定義は不要 (以前は .issue-new-v2 に重複定義
   していた)。 v2 特有の layout / decoration だけ以下に残す。 */

.issue-new-v2 h1 {
    margin: 0 0 0.4rem 0;
}

.issue-new-v2 .intro-hint {
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 90%);
    border: 1px solid #e0e7ff;
    padding: 0.85rem 1.1rem;
    border-radius: var(--nx-radius-sm);
    margin: 0.4rem 0 1.6rem 0;
    color: #312e81;
    font-size: 0.92rem;
    line-height: 1.6;
    box-shadow: var(--nx-shadow-sm);
}
.issue-new-v2 .intro-hint strong {
    color: var(--nx-accent);
    font-weight: 700;
    padding: 0 0.15rem;
}

/* Card-style section container */
.new-issue-section {
    margin: 0 0 1rem 0;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background: var(--nx-bg-card);
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.new-issue-section:hover {
    box-shadow: var(--nx-shadow);
}

/* Collapsible section variant */
details.new-issue-section > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--nx-ink);
    padding: 0.15rem 0.1rem;
    user-select: none;
}
details.new-issue-section > summary::-webkit-details-marker { display: none; }
details.new-issue-section > summary::before {
    content: "";
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nx-bg-tint);
    color: var(--nx-muted);
    font-size: 0.65rem;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* Use a rotating chevron rendered as CSS mask so it flips smoothly */
details.new-issue-section > summary::before {
    content: "▶";
    line-height: 1;
    padding-left: 2px;
}
details.new-issue-section[open] > summary::before {
    transform: rotate(90deg);
    background: var(--nx-accent-tint);
    color: var(--nx-accent);
}
details.new-issue-section[open] {
    border-color: var(--nx-border-2);
    box-shadow: var(--nx-shadow);
}
details.new-issue-section > .section-body {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--nx-border);
}

/* Section heading (always-visible sections) */
.section-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    color: var(--nx-ink);
    letter-spacing: -0.005em;
}
.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    background: linear-gradient(135deg, var(--nx-accent) 0%, var(--nx-accent-2) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28);
}
.section-title {
    font-weight: 700;
    letter-spacing: -0.005em;
}
.section-summary {
    color: var(--nx-muted);
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 0.15rem;
}

/* Pill-shaped section badges */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}
.badge-required {
    background: var(--nx-danger-tint);
    color: var(--nx-danger);
    border: 1px solid #fecaca;
}
.badge-required::before {
    content: "●";
    color: var(--nx-danger);
    font-size: 0.55rem;
}
.badge-optional {
    background: var(--nx-bg-tint);
    color: var(--nx-ink-soft);
    border: 1px solid var(--nx-border);
}
.badge-optional::before {
    content: "○";
    color: var(--nx-muted);
    font-size: 0.55rem;
}
.required-mark {
    color: var(--nx-danger);
    font-weight: 700;
    margin-left: 0.15rem;
}

/* Section accents */
.required-section {
    background: linear-gradient(180deg, #ffffff 0%, #fefdfd 100%);
    border-color: #fecaca;
}
.required-section > .section-heading .section-num {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.28);
}
.mode-section {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border-color: #c7d2fe;
}
details.optional-section:not([open]) {
    background: var(--nx-bg-soft);
}
details.import-section {
    border-style: solid;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}
details.import-section:not([open]) {
    background: var(--nx-bg-soft);
}

/* Form controls inside sections — softer inputs, focus rings */
.new-issue-section label {
    color: var(--nx-ink);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.9rem;
}
.new-issue-section input[type="text"],
.new-issue-section input[type="url"],
.new-issue-section input[type="password"],
.new-issue-section input[type="datetime-local"],
.new-issue-section textarea,
.new-issue-section select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-top: 0.35rem;
    border: 1px solid var(--nx-border-2);
    border-radius: var(--nx-radius-xs);
    background: #fff;
    font-size: 0.92rem;
    color: var(--nx-ink);
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.new-issue-section input[type="text"]:focus,
.new-issue-section input[type="url"]:focus,
.new-issue-section input[type="password"]:focus,
.new-issue-section input[type="datetime-local"]:focus,
.new-issue-section textarea:focus,
.new-issue-section select:focus {
    outline: none;
    border-color: var(--nx-accent-2);
    box-shadow: var(--nx-focus);
}
.new-issue-section textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    line-height: 1.55;
    resize: vertical;
    min-height: 8rem;
}
.new-issue-section .checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: var(--nx-bg-soft);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xs);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.new-issue-section .checkbox-row:hover {
    border-color: var(--nx-border-2);
    background: #fff;
}
.new-issue-section .checkbox-row input[type="checkbox"] {
    accent-color: var(--nx-accent);
    width: 1rem;
    height: 1rem;
}
.new-issue-section fieldset {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xs);
    background: var(--nx-bg-soft);
    padding: 0.9rem 1.1rem;
    margin: 0 0 1rem 0;
}
.new-issue-section fieldset legend {
    padding: 0 0.5rem;
    color: var(--nx-ink);
    font-weight: 700;
    font-size: 0.85rem;
}
.new-issue-section .hint {
    color: var(--nx-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}
.new-issue-section code {
    background: var(--nx-bg-tint);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
    color: #312e81;
}

/* Pipeline mode radio tiles */
.mode-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin: 0 0 1rem 0;
}
@media (max-width: 55rem) {
    .mode-tiles { grid-template-columns: 1fr; }
}
.mode-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    background: var(--nx-bg-card);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    margin: 0;
    font-weight: 500;
}
.mode-tile:hover {
    border-color: var(--nx-border-2);
    background: var(--nx-bg-soft);
    transform: translateY(-1px);
    box-shadow: var(--nx-shadow-sm);
}
.mode-tile.is-selected {
    border-color: var(--nx-accent);
    background: linear-gradient(180deg, var(--nx-accent-tint) 0%, #ffffff 60%);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12), 0 6px 16px rgba(79, 70, 229, 0.10);
    transform: translateY(-1px);
}
.mode-tile.is-selected::after {
    content: "✓";
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
    text-align: center;
    background: var(--nx-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
}
.mode-tile input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: var(--nx-accent);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.mode-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.mode-tile-title {
    font-weight: 700;
    color: var(--nx-ink);
    font-size: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.01em;
}
.mode-tile-sub {
    color: var(--nx-ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
}
.mode-tile-desc {
    color: var(--nx-muted);
    font-size: 0.78rem;
    line-height: 1.55;
    margin-top: 0.35rem;
    font-weight: 400;
}

/* Submit row */
.submit-row {
    margin: 2rem 0 1.5rem 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--nx-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
.submit-button {
    padding: 0.7rem 2rem;
    background: linear-gradient(180deg, var(--nx-accent-2) 0%, var(--nx-accent) 100%);
    color: #fff;
    border: none;
    border-radius: var(--nx-radius-xs);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2), 0 6px 12px rgba(79, 70, 229, 0.18);
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.submit-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.25), 0 12px 22px rgba(79, 70, 229, 0.22);
    filter: brightness(1.03);
}
.submit-button:active {
    transform: translateY(0);
    filter: brightness(0.97);
}
.submit-button:focus-visible {
    outline: none;
    box-shadow: var(--nx-focus), 0 6px 12px rgba(79, 70, 229, 0.2);
}

/* Preview inside the required section — subtle so it doesn't compete */
.issue-new-v2 details.body-preview {
    background: var(--nx-bg-soft);
    border-color: var(--nx-border);
    border-radius: var(--nx-radius-xs);
}
.issue-new-v2 details.body-preview summary {
    color: var(--nx-ink-soft);
    font-weight: 600;
    font-size: 0.85rem;
}

/* File input styled a touch nicer */
.new-issue-section input[type="file"] {
    display: block;
    margin-top: 0.4rem;
    padding: 0.4rem;
    border: 1px dashed var(--nx-border-2);
    border-radius: var(--nx-radius-xs);
    background: var(--nx-bg-soft);
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.new-issue-section input[type="file"]::file-selector-button {
    margin-right: 0.6rem;
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 4px;
    background: var(--nx-accent-tint);
    color: var(--nx-accent);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.new-issue-section input[type="file"]::file-selector-button:hover {
    background: #ddd6fe;
}

/* Quick-schedule buttons inside 実行制御 */
.new-issue-section fieldset button[type="button"] {
    padding: 0.3rem 0.7rem;
    background: var(--nx-bg-card);
    border: 1px solid var(--nx-border-2);
    border-radius: 4px;
    color: var(--nx-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    margin-right: 0.25rem;
}
.new-issue-section fieldset button[type="button"]:hover {
    background: var(--nx-accent-tint);
    border-color: var(--nx-accent-2);
    color: var(--nx-accent);
}

/* Import section — inputs + fetch button on one row */
.issue-new-v2 .form-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.issue-new-v2 .form-row input[type="text"],
.issue-new-v2 .form-row input[type="url"] {
    flex: 1 1 18rem;
    margin-top: 0;
}
.issue-new-v2 .form-row button {
    padding: 0.55rem 1.1rem;
    background: var(--nx-ink);
    color: #fff;
    border: none;
    border-radius: var(--nx-radius-xs);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}
.issue-new-v2 .form-row button:hover {
    background: #1e293b;
}

/* Import sub-sections nested inside "③ Issue 内容". 親カード内なので
   カード風の shadow / 太いボーダーを外し、 「小さな折り畳み帯」の
   見た目に落とす。 展開すると controls が現れる。 */
.import-subsections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.2rem 0;
    padding: 0.75rem;
    background: var(--nx-bg-soft);
    border: 1px dashed var(--nx-border-2);
    border-radius: var(--nx-radius-sm);
}
details.import-subsection {
    background: var(--nx-bg-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xs);
    padding: 0.55rem 0.85rem;
    transition: border-color 0.12s ease, background 0.12s ease;
}
details.import-subsection[open] {
    border-color: var(--nx-accent-2);
    background: #fff;
    box-shadow: var(--nx-shadow-sm);
}
details.import-subsection > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--nx-ink);
    font-weight: 600;
    font-size: 0.9rem;
    user-select: none;
}
details.import-subsection > summary::-webkit-details-marker { display: none; }
details.import-subsection > summary::before {
    content: "▶";
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    border-radius: 999px;
    background: var(--nx-bg-tint);
    color: var(--nx-muted);
    font-size: 0.55rem;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
details.import-subsection[open] > summary::before {
    transform: rotate(90deg);
    background: var(--nx-accent-tint);
    color: var(--nx-accent);
}
.import-sub-title {
    font-weight: 700;
    color: var(--nx-ink);
}
.import-sub-summary {
    color: var(--nx-muted);
    font-weight: 400;
    font-size: 0.8rem;
}
.import-sub-body {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--nx-border);
}
/* import-subsection 内の fieldset は装飾を外して素の帯にする */
.import-sub-body > fieldset {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Dashboard: Pending Issues 折りたたみ */
section.pending details.pending-details {
    background: var(--nx-bg-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
section.pending details.pending-details:hover {
    box-shadow: var(--nx-shadow);
}
section.pending details.pending-details[open] {
    border-color: var(--nx-border-2);
}
section.pending summary.pending-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    user-select: none;
}
section.pending summary.pending-summary::-webkit-details-marker { display: none; }
section.pending summary.pending-summary::before {
    content: "▶";
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    border-radius: 999px;
    background: var(--nx-bg-tint);
    color: var(--nx-muted);
    font-size: 0.65rem;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
section.pending details.pending-details[open] summary.pending-summary::before {
    transform: rotate(90deg);
    background: var(--nx-accent-tint);
    color: var(--nx-accent);
}
section.pending .pending-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--nx-ink);
    letter-spacing: -0.005em;
}
section.pending .pending-count {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    background: var(--nx-bg-tint);
    color: var(--nx-ink-soft);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
section.pending .pending-body {
    padding: 0 1.1rem 1.1rem 1.1rem;
    border-top: 1px solid var(--nx-border);
    padding-top: 1rem;
}

/* ---- issue edit: read-only pipeline-mode readout ----------------------
   The edit form cannot change pipeline_mode, but the value drives which
   stages run and where output lands, so it has to be legible at a glance
   rather than inferable only from the issue body. Styled as a static
   readout (not a field) to reinforce that it is not editable. */
.mode-readout {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem .9rem;
    margin: 0 0 1rem 0;
    padding: .75rem .9rem;
    background: var(--nx-accent-tint);
    border-left: 4px solid var(--nx-accent);
    border-radius: 3px;
}
.mode-readout dt {
    color: var(--nx-muted);
    font-size: .82rem;
    align-self: baseline;
}
.mode-readout dd {
    margin: 0;
    color: var(--nx-ink);
    min-width: 0;
}
.mode-readout-value {
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--nx-accent);
}
.mode-readout-sub {
    color: var(--nx-ink-soft);
    font-size: .85rem;
    margin-left: .5rem;
}
.mode-readout-note {
    color: var(--nx-muted);
    font-size: .78rem;
    margin-left: .5rem;
    white-space: nowrap;
}
.mode-readout-empty { color: var(--nx-muted); }

@media (max-width: 640px) {
    .mode-readout { grid-template-columns: 1fr; gap: .15rem; }
    .mode-readout dt { margin-top: .4rem; }
    .mode-readout-sub,
    .mode-readout-note { display: block; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
 * テンプレート選択タイル / Commit & push タイル (2026-08-11)
 *
 * どちらも mode-tile を流用する。 テンプレートは「何を作るか」を決める選択
 * なのに <select> 1 行で埋もれており、 Commit & push は「リポジトリを実際に
 * 書き換えるか」という後戻りしにくい選択なのに fieldset 末尾のチェック
 * ボックス 1 個だった。 モード選択と同じ重みで見せる。
 * ------------------------------------------------------------------------- */

/* mode-tile はラジオ前提だが、 Commit & push はチェックボックス。
 * 同じ見た目にするため input の型を問わず揃える。 */
.mode-tile input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--nx-accent);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* チェック状態は JS を介さず :has() で反映する。 テンプレートタイル側は
 * 動的描画なので JS が is-selected を付けるが、 こちらは静的なので CSS で
 * 済ませる (:has() 非対応ブラウザでは枠が変わらないだけで機能は動く)。 */
.commit-push-tile:has(input[type="checkbox"]:checked) {
    border-color: var(--nx-accent);
    background: linear-gradient(180deg, var(--nx-accent-tint) 0%, #ffffff 60%);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12), 0 6px 16px rgba(79, 70, 229, 0.10);
}

.commit-push-fieldset {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.5rem 0.9rem 0.9rem;
    margin-top: 0.75rem;
}
.commit-push-fieldset > legend {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0 0.35rem;
}
/* 単独タイルなので横幅いっぱいに広げる (grid の 1 カラム扱い) */
.commit-push-tile { width: 100%; }

/* テンプレートタイルはモードタイルより数が多くなりうるので、 1 枚あたりを
 * 少し小さく詰める。 */
#doc-template-tiles .mode-tile-desc { font-size: 0.78rem; }

/* ---------------------------------------------------------------------------
 * `hidden` 属性を CSS より優先させる (2026-08-11)
 *
 * `form select { display: block }` / `.new-issue-section select { display: block }`
 * が UA スタイルの `[hidden] { display: none }` に勝ってしまい、 hidden を
 * 付けた要素が表示され続けていた (テンプレート選択を tile 化した際、 送信値
 * 保持用に残した <select hidden> が画面に出たままだった)。
 * 個別に打ち消すと同じ事故を繰り返すので、 属性を全体で尊重する。
 * ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * draw.io 図コンテナ (.mxgraph / .drawio-embed) — 幅 100% + 図追従高さ
 * --------------------------------------------------------------------------- */
.mxgraph, .drawio-embed {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-card);
    margin: 0.5rem 0;
}
.mxgraph > * {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * テンプレート選択タイルの調整 (2026-08-11)
 *
 * ・モード選択 (3 タイル横並び) と同じ幅だと画面を占有しすぎるので、
 *   テンプレート側は **横幅を半分** に抑える。 タイル自体は 2 列のまま。
 * ・「このリポジトリ専用」 は同名の汎用を上書きする関係なので、 先に並べた
 *   うえで色でも区別する (琥珀系)。 汎用は既定の枠色のまま。
 * ------------------------------------------------------------------------- */
/* 幅は制限しない。 一時期 `max-width: 50%` にしていたが、 画面幅に対して
 * 詰まりすぎで 3 列しか入らなかった。 モードタイルと同じく全幅を使い、
 * 列数は auto-fill に任せる (ワイド画面では 6 列前後入る)。 */
#doc-template-row {
    max-width: none;
}
/* 列数は固定しない。 入るだけ詰める (半幅でも 4 列前後は入る)。
 * `repeat(2, ...)` で固定していたため、 幅が余っていても 2 列で止まっていた。
 * `.mode-tiles` 側の `repeat(3, 1fr)` と 55rem のメディアクエリを両方
 * 上書きする必要があるので、 メディアクエリ内でも再指定する。 */
#doc-template-tiles {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}
@media (max-width: 55rem) {
    #doc-template-tiles {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }
}

/* 1 枚あたりを詰める。 モードタイルは 3 枚しかないので余裕を持たせて
 * いるが、 テンプレートは十数枚並ぶので同じ余白だと 2 列しか入らない。 */
.tpl-tile {
    padding: 0.55rem 0.6rem;
    gap: 0.4rem;
    align-items: center;
}
.tpl-tile .mode-tile-title {
    font-size: 0.86rem;
    font-family: inherit;
    line-height: 1.35;
    word-break: break-word;
}
.tpl-tile .mode-tile-sub { font-size: 0.7rem; }
.tpl-tile input[type="radio"] { margin-top: 0; }
.tpl-tile.is-selected::after {
    top: 0.3rem; right: 0.35rem;
    width: 0.95rem; height: 0.95rem; line-height: 0.95rem;
    font-size: 0.62rem;
}

/* このリポジトリ専用テンプレート */
.tpl-tile-repo {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 62%);
}
.tpl-tile-repo:hover {
    border-color: #d97706;
}
.tpl-tile-repo .mode-tile-sub {
    color: #b45309;
    font-weight: 600;
}
/* 選択時は共通の is-selected が上書きするが、 専用であることは残す */
.tpl-tile-repo.is-selected {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18),
                0 6px 16px rgba(245, 158, 11, 0.14);
}
.tpl-tile-repo.is-selected::after {
    background: #d97706;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.35);
}

/* ---------------------------------------------------------------------------
 * 添付ファイルの蓄積 UI (2026-08-11)
 *
 * `<input type="file">` は選択のたびに FileList が置き換わるため、 フォルダを
 * またいで選ぶと前回分が消えていた。 JS 側で DataTransfer に貯めて追加式に
 * したので、 その受け皿 (ドロップゾーンと選択済み一覧) を用意する。
 * ------------------------------------------------------------------------- */
.attach-dropzone {
    border: 2px dashed var(--nx-border-2);
    border-radius: var(--nx-radius-sm);
    padding: 0.7rem 0.9rem;
    background: var(--nx-bg-soft);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.attach-dropzone.is-dragover {
    border-color: var(--nx-accent);
    background: var(--nx-accent-tint);
}
.attach-dropzone-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
}

.attach-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.attach-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-card);
    font-size: 0.82rem;
}
.attach-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.attach-size {
    flex: 0 0 auto;
    color: var(--nx-muted);
    font-variant-numeric: tabular-nums;
}
.attach-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #b91c1c;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
}
.attach-remove:hover { color: #7f1d1d; }
.attach-total {
    color: var(--nx-muted);
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
}