public/style.css · syntaxai/tdd.md

syntaxai/tdd.md · main · public / style.css
style.css 1213 lines · 31070 bytes raw
:root {
  color-scheme: dark light;
  --bg: #0a0a0a;
  --fg: #e8e8e8;
  --muted: #8a8a8a;
  --border: #2a2a2a;
  --accent: #5fb3ff;
  --red: #ff7a7a;
  --green: #5fd97a;
  --blue: #5fb3ff;
  --code-bg: #161616;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafaf8;
    --fg: #111;
    --muted: #555;
    --border: #e5e5e5;
    --accent: #0066cc;
    --red: #c83232;
    --green: #1e8a3e;
    --blue: #0066cc;
    --code-bg: #f0f0eb;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 ui-sans-serif, -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.md-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.1s;
}
.md-nav a:hover, .md-nav a.nav-active {
  color: var(--fg);
}

.md-nav-sep {
  margin: 0 0.4em;
  opacity: 0.45;
}

main.md {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 120px;
}

main.md h1, main.md h2, main.md h3 {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
}

main.md h1 {
  font-size: clamp(2rem, 6vw, 2.6rem);
  margin: 0 0 0.4rem;
}

main.md h2 {
  font-size: 0.95rem;
  margin: 3rem 0 1rem;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

main.md h3 {
  font-size: 1rem;
  margin: 2rem 0 0.6rem;
}

main.md blockquote {
  margin: 0 0 2rem;
  padding: 0;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.5;
}

main.md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

main.md p { margin: 0 0 1.2rem; }

main.md a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.1s;
}
main.md a:hover { text-decoration-thickness: 2px; }

main.md code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

main.md pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 1rem 1.2rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

main.md pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}

main.md table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

main.md th, main.md td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

main.md th {
  font-weight: 600;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

main.md ul, main.md ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}
main.md li { margin: 0.3rem 0; }

main.md strong { font-weight: 600; }

.red { color: var(--red); }
.green { color: var(--green); }
.blue { color: var(--blue); }
.muted { color: var(--muted); }

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* --- reports / dashboard ---------------------------------------------- */

.report-mockup-banner {
  background: var(--code-bg);
  border: 1px dashed var(--border);
  padding: 0.7rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 2rem;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}
.report-mockup-banner a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.report-mockup-banner a:hover { color: var(--fg); }

.report-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.report-tile {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.2rem 1.2rem 1rem;
  background: var(--code-bg);
}

.report-tile-name {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.report-tile-name a {
  color: inherit;
  text-decoration: none;
}
.report-tile-name a:hover { color: var(--fg); }

.report-tile-score {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.report-tile-score-suffix {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 400;
}

.report-tile-trend {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  margin: 0.4rem 0 0.6rem;
}
.report-tile-trend.up { color: var(--green); }
.report-tile-trend.down { color: var(--red); }
.report-tile-trend.flat { color: var(--muted); }

.report-tile-volume {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.8rem;
}

.report-tile-issue {
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
}
.report-tile-issue strong {
  color: var(--fg);
  font-weight: 500;
}

.report-bars {
  margin: 1rem 0 2rem;
}
.report-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 50px;
  align-items: center;
  gap: 0.8rem;
  margin: 0.5rem 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.85rem;
}
.report-bar-label { color: var(--muted); }
.report-bar-track {
  height: 10px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.report-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
.report-bar-fill.red { background: var(--red); }
.report-bar-fill.green { background: var(--green); }
.report-bar-fill.muted { background: var(--muted); }
.report-bar-pct { text-align: right; color: var(--fg); }

.report-streak {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.report-streak-num {
  font-weight: 600;
  color: var(--fg);
}
.report-streak.broken {
  color: var(--red);
  border-color: var(--red);
}
.report-streak.broken .report-streak-num { color: var(--red); }
.report-streak.long {
  color: var(--green);
  border-color: var(--green);
}
.report-streak.long .report-streak-num { color: var(--green); }

.report-sparkline {
  width: 100%;
  height: 80px;
  display: block;
  margin: 0.5rem 0 1.2rem;
}

@media (max-width: 600px) {
  .report-tiles { grid-template-columns: 1fr; }
  .report-bar-row { grid-template-columns: 130px 1fr 50px; }
}

/* tests overview */

.test-snapshots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.test-snapshot {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  background: var(--code-bg);
}
.test-snapshot.bad { border-left: 3px solid var(--red); }
.test-snapshot.ok  { border-left: 3px solid var(--green); }

.test-snapshot-head {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  margin: 0 0 0.3rem;
}
.test-snapshot-branch {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}
.test-snapshot-stats {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.7rem;
}

.test-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.82rem;
}
.test-list li { margin: 0.25rem 0; padding-left: 1.2rem; position: relative; line-height: 1.4; }
.test-list li::before {
  position: absolute;
  left: 0;
  top: 0;
}
.test-list-fail { color: var(--fg); }
.test-list-fail::before { content: "✗"; color: var(--red); }
.test-list-pass { color: var(--green); }
.test-list-pass::before { content: "✓"; color: var(--green); }
.test-list-collapsed { color: var(--muted); }
.test-list-collapsed::before { content: "+"; color: var(--muted); }

.test-list-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

main.md table.test-stability {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  margin: 1rem 0 1.5rem;
}
main.md table.test-stability th,
main.md table.test-stability td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
main.md table.test-stability th.num,
main.md table.test-stability td.test-stab-num {
  text-align: right;
  width: 50px;
}
.test-stab-name { color: var(--fg); }
.test-stab-repo {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}
.test-stab-num.red { color: var(--red); font-weight: 600; }
.test-stab-num.green { color: var(--muted); }
.test-stab-row.flagged { background: color-mix(in srgb, var(--red) 8%, transparent); }
.test-stab-warn {
  color: var(--red);
  margin-left: 0.25rem;
  cursor: help;
}

.agent-tag {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.agent-tag:hover { color: var(--fg); border-color: var(--fg); }

@media (max-width: 600px) {
  .test-snapshots { grid-template-columns: 1fr; }
  main.md table.test-stability { font-size: 0.78rem; }
}

/* projects */

.project-form {
  display: grid;
  gap: 0.6rem;
  margin: 1.2rem 0 1.5rem;
  max-width: 540px;
}
.project-form label {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--muted);
}
.project-form label code {
  font-size: 0.78rem;
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}
.project-form input[type="text"] {
  font: inherit;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
.project-form input[type="text"]:focus {
  border-color: var(--accent);
}
.project-form button {
  font: inherit;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  justify-self: start;
}
.project-form button:hover { filter: brightness(1.1); }

.project-form-error {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid var(--red);
  color: var(--fg);
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  font-size: 0.9rem;
  margin: 0 0 1.2rem;
}
.project-form-error strong { color: var(--red); }

/* -----------------------------------------------------------------
   Docs layout — content + on-this-page rail.
   Used by /sama/*, /guides/*, /blog/* via renderDocsPage. Mobile
   drops the rail entirely.
----------------------------------------------------------------- */

.docs-body main.md {
  max-width: none;
  padding: 0;
}

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
  align-items: start;
}

.docs-rail {
  position: sticky;
  top: 1rem;
  font-size: 0.88rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.docs-content {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.65;
}
.docs-content > h1:first-child { margin-top: 0; }
.docs-content img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin: 1.75rem auto;
  border-radius: 6px;
}
.docs-content h2,
.docs-content h3 {
  scroll-margin-top: 1rem;
  position: relative;
}
.docs-h-anchor {
  position: absolute;
  left: -1.2rem;
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.1s;
  font-weight: normal;
}
.docs-content h2:hover .docs-h-anchor,
.docs-content h3:hover .docs-h-anchor {
  opacity: 1;
}
.docs-h-anchor:hover { color: var(--accent); }

.docs-edit {
  text-align: right;
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}
.docs-edit a {
  color: var(--muted);
  text-decoration: none;
}
.docs-edit a:hover { color: var(--accent); }

.docs-rail-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.docs-rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}
.docs-rail-link {
  display: block;
  padding: 0.25rem 0.6rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
}
.docs-rail-link:hover {
  color: var(--fg);
  border-left-color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.docs-rail-link-h3 { padding-left: 1.4rem; font-size: 0.82rem; }

.docs-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  padding-top: 1.5rem;
}
.docs-pn-prev,
.docs-pn-next {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg);
  background: color-mix(in srgb, var(--muted) 6%, transparent);
}
.docs-pn-prev:hover,
.docs-pn-next:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.docs-pn-prev { justify-content: flex-start; }
.docs-pn-next { justify-content: flex-end; text-align: right; }
.docs-pn-arrow { color: var(--muted); font-size: 1.1rem; }
.docs-pn-label { font-weight: 500; }
.docs-pn-spacer {}

@media (max-width: 1080px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }
  .docs-rail { display: none; }
}

/* -----------------------------------------------------------------
   Editor pages — /edit/:section/:slug, /admin/proposals/*. Wider
   content area, full-width form controls, side-by-side diff blocks.
----------------------------------------------------------------- */

.edit-body main.md {
  max-width: none;
  padding: 0;
}

.edit-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

.edit-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.edit-form { display: flex; flex-direction: column; gap: 0.8rem; }
.edit-textarea {
  width: 100%;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.8rem 1rem;
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 4px;
  resize: vertical;
  outline: none;
}
.edit-textarea:focus { border-color: var(--accent); }

.edit-actions { display: flex; gap: 0.8rem; align-items: center; }
.edit-actions-row { flex-wrap: wrap; }
.edit-actions button,
.edit-form-inline button {
  font: inherit;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}
.edit-actions button:hover,
.edit-form-inline button:hover { filter: brightness(1.1); }
.edit-cancel,
.edit-action-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.edit-cancel:hover, .edit-action-link:hover { color: var(--accent); }

.edit-form-inline {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.edit-form-inline input[type="text"] {
  font-family: inherit;
  padding: 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 4px;
  font-size: 0.85rem;
  min-width: 16rem;
}

.edit-login-button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
}
.edit-login-button:hover { filter: brightness(1.1); }

.edit-note {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  border-left: 2px solid color-mix(in srgb, var(--muted) 30%, transparent);
  padding-left: 0.8rem;
}

.edit-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}
.edit-table th, .edit-table td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  font-size: 0.9rem;
}
.edit-table th {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.edit-empty { color: var(--muted); text-align: center; padding: 2rem !important; }

.edit-status {
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.edit-status-pending { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.edit-status-approved { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.edit-status-rejected { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

.edit-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.edit-diff-pane {
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 5%, transparent);
}
.edit-diff-label {
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
}
.edit-diff-pane pre {
  margin: 0;
  padding: 0.8rem;
  max-height: 60vh;
  overflow: auto;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .edit-diff { grid-template-columns: 1fr; }
}


/* ---- /GIT/<owner>/<repo>/commit/<sha> ---- */
.commit-view { max-width: 980px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.commit-breadcrumb { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.4rem; }
.commit-breadcrumb code { font-size: 0.85rem; }
.commit-subject {
  font-size: 1.4rem;
  margin: 0.2rem 0 0.6rem;
  line-height: 1.3;
  font-weight: 600;
}
.commit-body {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--muted) 35%, transparent);
  font-size: 0.88rem;
  white-space: pre-wrap;
  line-height: 1.5;
}
.commit-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0 0 1.4rem;
  font-size: 0.86rem;
}
.commit-meta dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  align-self: center;
}
.commit-meta dd { margin: 0; }
.commit-meta-email { color: var(--muted); }
.commit-meta-empty { color: var(--muted); font-style: italic; }
.commit-parent code { font-size: 0.85rem; }

.commit-files-summary {
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border-radius: 4px;
  font-size: 0.85rem;
}
.commit-empty { color: var(--muted); font-style: italic; }
.commit-file-add { color: #2ea043; font-weight: 600; }
.commit-file-rem { color: #f85149; font-weight: 600; }

.commit-file {
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  border-radius: 6px;
  margin: 0 0 1rem;
  overflow: hidden;
}
.commit-file-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.commit-file-path { font-weight: 600; }
.commit-file-stats { margin-left: auto; display: flex; gap: 0.5rem; font-size: 0.82rem; }
.commit-file-rename code { font-size: 0.82rem; color: var(--muted); }
.commit-file-status {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.commit-file-status-modified {
  background: color-mix(in srgb, #d29922 25%, transparent);
  color: #d29922;
}
.commit-file-status-added {
  background: color-mix(in srgb, #2ea043 25%, transparent);
  color: #2ea043;
}
.commit-file-status-removed {
  background: color-mix(in srgb, #f85149 25%, transparent);
  color: #f85149;
}
.commit-file-status-renamed {
  background: color-mix(in srgb, #79c0ff 25%, transparent);
  color: #79c0ff;
}

.commit-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size: 0.78rem;
  line-height: 1.45;
  table-layout: fixed;
}
.commit-diff-table td {
  padding: 0 0.4rem;
  vertical-align: top;
  white-space: pre-wrap;
  word-break: break-word;
}
.commit-line-old, .commit-line-new {
  width: 3.5rem;
  text-align: right;
  color: var(--muted);
  user-select: none;
  border-right: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
}
.commit-line-text { padding-left: 0.6rem; }
.commit-line-added { background: color-mix(in srgb, #2ea043 14%, transparent); }
.commit-line-added .commit-line-text { color: inherit; }
.commit-line-removed { background: color-mix(in srgb, #f85149 14%, transparent); }
.commit-line-context .commit-line-text { color: var(--muted); }

.commit-hunk-header td {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--fg));
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
}
.commit-hunk-heading { color: var(--muted); margin-left: 0.6rem; }

.commit-footer {
  margin-top: 1.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .commit-line-old, .commit-line-new { width: 2.5rem; }
  .commit-meta { grid-template-columns: 1fr; gap: 0.1rem; }
  .commit-meta dt { margin-top: 0.4rem; }
}

/* ---- /GIT/<owner>/<repo>/tree|blob/... ---- */
.repo-tree-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 1rem;
  font-size: 0.88rem;
}
.repo-tree-row td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
}
.repo-tree-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.repo-tree-icon {
  width: 1.6rem;
  text-align: center;
  user-select: none;
}
.repo-tree-name a { text-decoration: none; }
.repo-tree-name a:hover { text-decoration: underline; }
.repo-tree-row-tree .repo-tree-name a { font-weight: 600; }
.repo-tree-sha {
  color: var(--muted);
  text-align: right;
  width: 5rem;
}
.repo-tree-row-up { background: color-mix(in srgb, var(--muted) 5%, transparent); }

.repo-blob-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.repo-blob-path { font-weight: 600; }
.repo-blob-meta { color: var(--muted); font-size: 0.82rem; }
.repo-blob-actions { margin-left: auto; }
.repo-blob-source {
  margin: 0;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  border-radius: 0 0 6px 6px;
  background: color-mix(in srgb, var(--muted) 5%, transparent);
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 75vh;
}
.repo-blob-rendered {
  padding: 1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  border-radius: 0 0 6px 6px;
  border-top: none;
}

.commit-meta-pill {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  text-decoration: none;
}

/* -----------------------------------------------------------------
   admin sxdoc block editor (Fase 2 of podman→tdd.md CMS port)
   ----------------------------------------------------------------- */

.admin-form {
  display: grid;
  gap: 0.9rem;
  max-width: 60rem;
}
.admin-field { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.admin-field > span { color: var(--muted); }
.admin-field input,
.admin-field select,
.admin-field textarea {
  font: inherit;
  padding: 0.35rem 0.55rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.admin-field textarea { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85rem; }
.admin-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0.75rem; }
.admin-actions { display: flex; gap: 0.5rem; align-items: center; }
.admin-cancel { color: var(--muted); }
.admin-error {
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, #ff5555 12%, transparent);
  border: 1px solid color-mix(in srgb, #ff5555 50%, transparent);
  border-radius: 4px;
  color: #ff8080;
  font-size: 0.85rem;
}
.admin-delete {
  background: transparent;
  color: #ff8080;
  border: 1px solid color-mix(in srgb, #ff5555 40%, transparent);
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}

.block-editor {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 85%, var(--fg) 4%);
  min-height: 12rem;
}
.block-editor-mode {
  margin-bottom: 0.4rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  cursor: pointer;
}
.block-editor-raw { font-family: ui-monospace, monospace; }
.block {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.4rem;
  padding: 0.2rem 0.3rem;
  border-radius: 3px;
  align-items: start;
}
.block:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.block-handle { color: var(--muted); cursor: grab; user-select: none; padding-top: 0.4rem; }
.block-body :is(p, h1, h2, h3, h4, h5, h6, blockquote, li) {
  margin: 0;
  outline: none;
  min-height: 1.4em;
}
.block-body :is(p, h1, h2, h3, h4, h5, h6, blockquote, li)[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}
.block-actions { opacity: 0; transition: opacity 100ms; }
.block:hover .block-actions { opacity: 1; }
.block-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 1.5rem; height: 1.5rem;
  border-radius: 3px;
  cursor: pointer;
}
.block-empty { color: var(--muted); padding: 0.5rem 0; }
.block-empty-hint { margin: 0 0 0.3rem; font-size: 0.85rem; }
.block-insert {
  display: flex;
  justify-content: flex-start;
  padding-left: 1.9rem;
  margin: -0.1rem 0;
  height: 0;
  overflow: visible;
  opacity: 0;
  transition: opacity 80ms;
}
.block-editor:hover .block-insert { opacity: 0.5; }
.block-insert:hover { opacity: 1; }
.block-insert-btn {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  width: 1.5rem; height: 1.5rem;
  border-radius: 3px;
  cursor: pointer;
}

.code-shell, .img-shell, .shortcode-shell, .hr-shell { display: grid; gap: 0.3rem; }
.code-shell .code-lang { font-size: 0.75rem; max-width: 14rem; }
.code-shell .code-src,
.html-shell {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  color: var(--fg);
  width: 100%;
}
.img-row { display: grid; grid-template-columns: 5rem 1fr; gap: 0.4rem; align-items: center; }
.img-row span { color: var(--muted); font-size: 0.75rem; }
.img-preview { max-width: 24rem; border: 1px solid var(--border); border-radius: 3px; }
.hr-shell hr { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; }

.slash-menu {
  position: fixed;
  z-index: 1000;
  min-width: 18rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 0.3rem;
  display: grid;
  gap: 0.2rem;
}
.slash-menu-filter {
  font: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
  color: var(--fg);
  outline: none;
}
.slash-menu-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.slash-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.slash-menu-item.highlighted { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.slash-menu-label { color: var(--fg); }
.slash-menu-hint { color: var(--muted); font-size: 0.75rem; }
.slash-menu-empty { color: var(--muted); padding: 0.4rem 0.5rem; font-size: 0.85rem; }

.block-editor-toast {
  position: fixed;
  bottom: 1rem; right: 1rem;
  padding: 0.45rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
  z-index: 999;
}
.block-editor-toast-show { opacity: 1; }
.block-editor-toast-ok { color: #6fdc6f; border-color: color-mix(in srgb, #6fdc6f 40%, transparent); }
.block-editor-toast-error { color: #ff8080; border-color: color-mix(in srgb, #ff5555 40%, transparent); }