/* kanb.us site theme. Unlayered, so it wins over the vendored `@layer markus` styles.
   The page structure it styles comes from web/hooks.py: masthead, banded main, footer. */

:root {
  color-scheme: light;
  --kanbus-ink: #12161c;
  --kanbus-ink-soft: #3a424e;
  --kanbus-muted: #5d6673;
  --kanbus-paper: #f7f6f2;
  --kanbus-paper-deep: #efede6;
  --kanbus-card: #ffffff;
  --kanbus-line: #e0ddd3;
  --kanbus-line-strong: #c9c5b8;
  --kanbus-accent: #2557d6;
  --kanbus-accent-strong: #1a43ad;
  --kanbus-accent-wash: #e7eefc;
  --kanbus-epic: #7c4dd8;
  --kanbus-epic-wash: #efe8fc;
  --kanbus-task: #2557d6;
  --kanbus-task-wash: #e7eefc;
  --kanbus-bug: #d0443a;
  --kanbus-bug-wash: #fbe9e7;
  --kanbus-done: #1f8a5b;
  --kanbus-done-wash: #e3f3ea;
  --kanbus-preview: #9a5b00;
  --kanbus-preview-wash: #fdf0d8;
  --kanbus-code-paper: #10141a;
  --kanbus-code-ink: #e6e9ee;
  --kanbus-code-muted: #8a94a3;
  --kanbus-shadow: 0 1px 2px rgba(18, 22, 28, 0.06), 0 8px 24px -12px rgba(18, 22, 28, 0.18);
  --kanbus-radius: 14px;
  --kanbus-radius-small: 8px;
  --kanbus-content-width: 72rem;
  --kanbus-reading-width: 46rem;
  --kanbus-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --kanbus-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kanbus-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --markus-ink: var(--kanbus-ink);
  --markus-muted: var(--kanbus-muted);
  --markus-paper: var(--kanbus-paper);
  --markus-card: var(--kanbus-card);
  --markus-line: var(--kanbus-line);
  --markus-accent: var(--kanbus-accent);
  --markus-note: var(--kanbus-accent);
  --markus-tip: var(--kanbus-done);
  --markus-warning: var(--kanbus-preview);
  --markus-caution: var(--kanbus-bug);
  --markus-sans: var(--kanbus-sans);
  --markus-serif: var(--kanbus-display);
  --markus-mono: var(--kanbus-mono);
  --markus-pre-bg: var(--kanbus-code-paper);
  --markus-pre-ink: var(--kanbus-code-ink);
  --markus-code-bg: var(--kanbus-paper-deep);
  --markus-tab-nav-bg: transparent;
  --markus-th-bg: var(--kanbus-paper-deep);
  --markus-aside-bg: var(--kanbus-card);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --kanbus-ink: #eceef1;
    --kanbus-ink-soft: #c5cad2;
    --kanbus-muted: #969fac;
    --kanbus-paper: #0e1116;
    --kanbus-paper-deep: #151a21;
    --kanbus-card: #171c24;
    --kanbus-line: #262d38;
    --kanbus-line-strong: #36404e;
    --kanbus-accent: #7aa2ff;
    --kanbus-accent-strong: #a3bfff;
    --kanbus-accent-wash: #1a2540;
    --kanbus-epic: #b39af5;
    --kanbus-epic-wash: #2a2142;
    --kanbus-task: #7aa2ff;
    --kanbus-task-wash: #1a2540;
    --kanbus-bug: #f0857c;
    --kanbus-bug-wash: #3a1f1d;
    --kanbus-done: #5fcf98;
    --kanbus-done-wash: #17301f;
    --kanbus-preview: #f2b45a;
    --kanbus-preview-wash: #352710;
    --kanbus-code-paper: #090b0f;
    --kanbus-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.kanbus-site {
  margin: 0;
  background: var(--kanbus-paper);
  color: var(--kanbus-ink);
  font-family: var(--kanbus-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.kanbus-site a {
  color: var(--kanbus-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.kanbus-site a:hover {
  color: var(--kanbus-accent-strong);
}

.kanbus-site :focus-visible {
  outline: 2px solid var(--kanbus-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Masthead */

.kanbus-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--kanbus-paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--kanbus-line);
}

.kanbus-masthead-inner {
  max-width: var(--kanbus-content-width);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.kanbus-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--kanbus-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--kanbus-ink) !important;
  text-decoration: none;
}

.kanbus-wordmark-mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 6px);
  gap: 3px;
  align-items: end;
  height: 22px;
}

.kanbus-wordmark-mark i {
  display: block;
  width: 6px;
  border-radius: 2px;
  background: var(--kanbus-ink);
}

.kanbus-wordmark-mark i:nth-child(1) { height: 22px; background: var(--kanbus-epic); }
.kanbus-wordmark-mark i:nth-child(2) { height: 15px; background: var(--kanbus-task); }
.kanbus-wordmark-mark i:nth-child(3) { height: 9px; background: var(--kanbus-done); }

.kanbus-navigation {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.kanbus-navigation a {
  color: var(--kanbus-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}

.kanbus-navigation a:hover {
  color: var(--kanbus-ink);
  background: var(--kanbus-paper-deep);
}

.kanbus-navigation a[aria-current="page"] {
  color: var(--kanbus-ink);
  background: var(--kanbus-paper-deep);
}

.kanbus-navigation .kanbus-navigation-github {
  margin-left: 0.5rem;
  border: 1px solid var(--kanbus-line-strong);
  color: var(--kanbus-ink);
}

.kanbus-navigation-toggle {
  display: none;
  margin-left: auto;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kanbus-ink);
  background: transparent;
  border: 1px solid var(--kanbus-line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .kanbus-masthead-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .kanbus-navigation-toggle {
    display: inline-block;
  }
  .kanbus-navigation {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0.5rem;
  }
  .kanbus-navigation[data-open="true"] {
    display: flex;
  }
  .kanbus-navigation a {
    padding: 0.6rem 0.75rem;
  }
  .kanbus-navigation .kanbus-navigation-github {
    margin-left: 0;
    text-align: center;
  }
}

/* Document and bands */

.kanbus-site main {
  display: block;
}

.kanbus-site .markus-document {
  max-width: none;
  margin: 0;
  padding: 0;
}

.kanbus-site .markus-document > * + * {
  margin-top: 0;
}

.kanbus-band {
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--kanbus-line);
}

.kanbus-band:nth-of-type(even) {
  background: var(--kanbus-paper-deep);
}

.kanbus-band-inner {
  max-width: var(--kanbus-content-width);
  margin: 0 auto;
}

.kanbus-band-inner > * + * {
  margin-top: 1.25rem;
}

.kanbus-page--detail .kanbus-band-inner,
.kanbus-page--standalone .kanbus-band-inner {
  max-width: var(--kanbus-reading-width);
}

.kanbus-page--detail .kanbus-band,
.kanbus-page--standalone .kanbus-band {
  border-top: 0;
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

.kanbus-page--detail .kanbus-band:last-of-type,
.kanbus-page--standalone .kanbus-band:last-of-type {
  padding-bottom: 5rem;
}

.kanbus-page--detail .kanbus-band + .kanbus-band,
.kanbus-page--standalone .kanbus-band + .kanbus-band {
  margin-top: 2.5rem;
}

/* Page header (the hero on the home page) */

.kanbus-site .markus-header {
  max-width: calc(var(--kanbus-content-width) + 3rem);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
}

.kanbus-page--detail .markus-header,
.kanbus-page--standalone .markus-header {
  max-width: calc(var(--kanbus-reading-width) + 3rem);
  padding-bottom: 2.5rem;
}

.kanbus-site .markus-header h1 {
  font-family: var(--kanbus-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 22ch;
}

.kanbus-site .markus-lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--kanbus-ink-soft);
  max-width: 44rem;
}

.kanbus-page--home .markus-header {
  padding-top: 6rem;
  padding-bottom: 2rem;
}

.kanbus-page--home .markus-header h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  max-width: 16ch;
  letter-spacing: -0.035em;
}

.kanbus-page--home .markus-lede {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  max-width: 40rem;
}

.kanbus-page--home .kanbus-band:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.kanbus-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--kanbus-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kanbus-accent);
}

.kanbus-availability {
  display: inline-block;
  margin: 0 0 1rem 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: top;
}

.kanbus-eyebrow + .kanbus-availability {
  margin-left: 0.75rem;
}

.kanbus-availability:first-child {
  margin-left: 0;
}

.kanbus-availability--available {
  color: var(--kanbus-done);
  background: var(--kanbus-done-wash);
}

.kanbus-availability--preview {
  color: var(--kanbus-preview);
  background: var(--kanbus-preview-wash);
}

.kanbus-runs-on {
  display: inline-block;
  margin: 0 0 1rem 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kanbus-accent);
  background: var(--kanbus-accent-wash);
  vertical-align: top;
}

.kanbus-byline {
  margin: 1.25rem 0 0;
  color: var(--kanbus-muted);
  font-size: 0.95rem;
}

/* Type */

.kanbus-site .markus-document h2 {
  font-family: var(--kanbus-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 34ch;
}

.kanbus-page--detail .markus-document h2,
.kanbus-page--standalone .markus-document h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}

.kanbus-site .markus-document h3 {
  font-family: var(--kanbus-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 2rem 0 0;
}

.kanbus-site .markus-document h2 + p {
  font-size: 1.12rem;
  color: var(--kanbus-ink-soft);
  max-width: 44rem;
}

.kanbus-site .markus-document p,
.kanbus-site .markus-document li {
  max-width: 46rem;
}

.kanbus-site .markus-document ul,
.kanbus-site .markus-document ol {
  padding-left: 1.3rem;
}

.kanbus-site .markus-document li + li {
  margin-top: 0.35rem;
}

.kanbus-site .markus-document strong {
  font-weight: 600;
}

.kanbus-site .markus-document hr {
  border: 0;
  border-top: 1px solid var(--kanbus-line);
  margin: 2.5rem 0;
}

/* Code */

.kanbus-site .markus-document code {
  font-family: var(--kanbus-mono);
  font-size: 0.88em;
  background: var(--kanbus-paper-deep);
  border: 1px solid var(--kanbus-line);
  padding: 0.1em 0.35em;
  border-radius: 5px;
}

.kanbus-site .markus-document pre {
  position: relative;
  margin-top: 1.25rem;
  background: var(--kanbus-code-paper);
  color: var(--kanbus-code-ink);
  border-radius: var(--kanbus-radius-small);
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 100%;
}

.kanbus-site .markus-document pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.kanbus-copy-button {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font: 500 0.75rem var(--kanbus-sans);
  color: var(--kanbus-code-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.kanbus-site pre:hover .kanbus-copy-button,
.kanbus-copy-button:focus-visible {
  opacity: 1;
}

.kanbus-copy-button[data-copied="true"] {
  color: #9be3bf;
}

/* Buttons */

.kanbus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem !important;
}

.kanbus-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none !important;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease;
}

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

.kanbus-button--primary {
  background: var(--kanbus-ink);
  color: var(--kanbus-paper) !important;
}

.kanbus-button--primary:hover {
  background: var(--kanbus-ink-soft);
}

.kanbus-button--secondary {
  background: transparent;
  color: var(--kanbus-ink) !important;
  border-color: var(--kanbus-line-strong);
}

.kanbus-button--secondary:hover {
  background: var(--kanbus-card);
}

/* Cards */

.kanbus-site .markus-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--markus-columns, 3), minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 960px) {
  .kanbus-site .markus-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .kanbus-site .markus-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kanbus-site .markus-card {
  position: relative;
  background: var(--kanbus-card);
  border: 1px solid var(--kanbus-line);
  border-radius: var(--kanbus-radius);
  padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kanbus-site .markus-card:has(a):hover {
  border-color: var(--kanbus-line-strong);
  box-shadow: var(--kanbus-shadow);
  transform: translateY(-2px);
}

.kanbus-site .markus-document .markus-card .markus-card-title {
  font-family: var(--kanbus-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.kanbus-site .markus-card-body > * {
  margin: 0;
}

.kanbus-site .markus-card-body > * + * {
  margin-top: 0.6rem;
}

.kanbus-site .markus-card-body p {
  color: var(--kanbus-ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}

.kanbus-site .markus-card-body p strong a {
  font-family: var(--kanbus-display);
  font-size: 1.12rem;
  color: var(--kanbus-ink);
  text-decoration: none;
}

.kanbus-site .markus-card-body p strong a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kanbus-site .markus-card-body p em {
  font-style: normal;
  font-family: var(--kanbus-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kanbus-muted);
}

.kanbus-site .markus-card-body pre {
  font-size: 0.82rem;
}

.kanbus-site .markus-card-icon {
  display: none;
}

/* Step lists */

.kanbus-site .markus-step-list {
  counter-reset: kanbus-step;
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.kanbus-site .markus-step {
  counter-increment: kanbus-step;
  position: relative;
  padding: 0 0 1.75rem 3.25rem;
  max-width: none;
  border-left: 1px solid var(--kanbus-line-strong);
  margin-left: 1rem;
}

.kanbus-site .markus-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.kanbus-site .markus-step::before {
  content: counter(kanbus-step);
  position: absolute;
  left: -1rem;
  top: -0.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 0.9rem var(--kanbus-mono);
  color: var(--kanbus-paper);
  background: var(--kanbus-ink);
}

.kanbus-site .markus-step > :first-child {
  margin-top: 0;
}

.kanbus-site .markus-step > * + * {
  margin-top: 0.6rem;
}

.kanbus-site .markus-step pre {
  margin-top: 0.75rem;
}

/* Two-up */

.kanbus-site .markus-two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}

.kanbus-site .markus-two-up[data-ratio="2:1"] {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.kanbus-site .markus-two-up[data-ratio="1:2"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.kanbus-site .markus-two-up--center {
  align-items: center;
}

.kanbus-site .markus-column > :first-child {
  margin-top: 0;
}

.kanbus-site .markus-column > * + * {
  margin-top: 1rem;
}

@media (max-width: 860px) {
  .kanbus-site .markus-two-up,
  .kanbus-site .markus-two-up[data-ratio] {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* Tabs */

.kanbus-site .markus-tabs {
  margin-top: 1.5rem;
  border: 1px solid var(--kanbus-line);
  border-radius: var(--kanbus-radius);
  background: var(--kanbus-card);
  overflow: hidden;
}

.kanbus-site .markus-tabs-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--kanbus-line);
  overflow-x: auto;
}

.kanbus-site .markus-tab-button {
  font: 500 0.9rem var(--kanbus-sans);
  color: var(--kanbus-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.kanbus-site .markus-tab-button--active {
  color: var(--kanbus-ink);
  background: var(--kanbus-paper-deep);
}

.kanbus-site .markus-tab {
  padding: 1.25rem;
}

.kanbus-site .markus-tabs[data-enhanced="true"] .markus-tab[hidden] {
  display: none;
}

/* Callouts, asides, details, tables */

.kanbus-site .markus-callout {
  margin-top: 1.5rem;
  border: 1px solid var(--kanbus-line);
  border-left: 4px solid var(--kanbus-accent);
  border-radius: var(--kanbus-radius-small);
  background: var(--kanbus-card);
  padding: 1rem 1.25rem;
  max-width: 46rem;
}

.kanbus-site .markus-callout--warning {
  border-left-color: var(--kanbus-preview);
  background: var(--kanbus-preview-wash);
}

.kanbus-site .markus-callout--tip {
  border-left-color: var(--kanbus-done);
}

.kanbus-site .markus-callout--caution {
  border-left-color: var(--kanbus-bug);
}

.kanbus-site .markus-callout-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.kanbus-site .markus-callout-body > :first-child {
  margin-top: 0;
}

.kanbus-site .markus-callout-body > :last-child {
  margin-bottom: 0;
}

.kanbus-site .markus-details {
  margin-top: 0.75rem;
  border: 1px solid var(--kanbus-line);
  border-radius: var(--kanbus-radius-small);
  background: var(--kanbus-card);
  padding: 0.9rem 1.2rem;
  max-width: 46rem;
}

.kanbus-site .markus-details summary {
  cursor: pointer;
  font-weight: 600;
}

.kanbus-site .markus-document table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
}

.kanbus-site .markus-document th,
.kanbus-site .markus-document td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--kanbus-line);
}

.kanbus-site .markus-document th {
  font-weight: 600;
  background: var(--kanbus-paper-deep);
}

/* Media and demos */

.kanbus-site .markus-video {
  display: block;
  width: 100%;
  margin-top: 2rem;
  border-radius: var(--kanbus-radius);
  border: 1px solid var(--kanbus-line);
  background: #000;
}

.kanbus-site .markus-figure img {
  max-width: 100%;
  border-radius: var(--kanbus-radius);
}

.kanbus-demo {
  margin: 2rem 0 0;
}

.kanbus-demo figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--kanbus-muted);
  text-align: center;
}

.kanbus-demo-stage {
  min-height: 280px;
  border-radius: calc(var(--kanbus-radius) + 4px);
  border: 1px solid var(--kanbus-line);
  background:
    radial-gradient(circle at 1px 1px, var(--kanbus-line) 1px, transparent 0) 0 0 / 22px 22px,
    var(--kanbus-card);
  padding: 1.25rem;
  overflow: hidden;
}

.kanbus-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.kanbus-board-column {
  background: var(--kanbus-paper-deep);
  border-radius: 12px;
  padding: 0.7rem;
  min-height: 15rem;
}

.kanbus-board-column-header {
  display: flex;
  justify-content: space-between;
  font: 500 0.72rem var(--kanbus-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kanbus-muted);
  padding: 0.15rem 0.3rem 0.6rem;
}

.kanbus-board-card {
  background: var(--kanbus-card);
  border: 1px solid var(--kanbus-line);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(18, 22, 28, 0.04);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
}

.kanbus-board-card[data-entering="true"] {
  opacity: 0;
  transform: translateY(-8px);
}

.kanbus-board-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font: 500 0.7rem var(--kanbus-mono);
  color: var(--kanbus-muted);
  margin-bottom: 0.3rem;
}

.kanbus-board-card-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kanbus-board-card-type::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--kanbus-task);
}

.kanbus-board-card[data-type="epic"] .kanbus-board-card-type::before { background: var(--kanbus-epic); }
.kanbus-board-card[data-type="bug"] .kanbus-board-card-type::before { background: var(--kanbus-bug); }

.kanbus-board-card-assignee {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--kanbus-muted);
}

.kanbus-board-card-assignee[data-agent="true"] {
  color: var(--kanbus-epic);
}

.kanbus-sync {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.kanbus-sync-file {
  background: var(--kanbus-code-paper);
  color: var(--kanbus-code-ink);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font: 0.82rem/1.6 var(--kanbus-mono);
  white-space: pre;
  overflow-x: auto;
}

.kanbus-sync-file-name {
  display: block;
  color: var(--kanbus-code-muted);
  margin-bottom: 0.5rem;
}

.kanbus-sync-file mark {
  background: rgba(122, 162, 255, 0.25);
  color: inherit;
  border-radius: 3px;
  transition: background 0.6s ease;
}

.kanbus-sync-terminal {
  background: var(--kanbus-code-paper);
  color: var(--kanbus-code-ink);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font: 0.82rem/1.6 var(--kanbus-mono);
  min-height: 4.5rem;
}

.kanbus-sync-terminal span {
  color: var(--kanbus-code-muted);
}

.kanbus-sync-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 720px) {
  .kanbus-board {
    grid-template-columns: repeat(3, minmax(9rem, 1fr));
    overflow-x: auto;
  }
  .kanbus-sync {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanbus-board-card,
  .kanbus-button,
  .kanbus-site .markus-card {
    transition: none;
  }
}

/* Footer */

.kanbus-footer {
  border-top: 1px solid var(--kanbus-line);
  background: var(--kanbus-paper);
  padding: 3.5rem 1.5rem 4rem;
  font-size: 0.93rem;
}

.kanbus-footer-inner {
  max-width: var(--kanbus-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.kanbus-footer-brand p {
  color: var(--kanbus-muted);
  max-width: 24rem;
  margin: 0.9rem 0 0;
}

.kanbus-footer-legal {
  font-size: 0.85rem;
}

.kanbus-footer-heading {
  margin: 0 0 0.75rem;
  font: 500 0.75rem var(--kanbus-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kanbus-muted);
}

.kanbus-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kanbus-footer li + li {
  margin-top: 0.45rem;
}

.kanbus-footer a {
  color: var(--kanbus-ink-soft);
  text-decoration: none;
}

.kanbus-footer a:hover {
  color: var(--kanbus-ink);
}

@media (max-width: 860px) {
  .kanbus-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kanbus-footer-brand {
    grid-column: 1 / -1;
  }
}