@layer components {
  /* ── Buttons ──────────────────────────────────── */
  .button {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-4);
    border:        1px solid transparent;
    border-radius: var(--radius);
    font:          inherit;
    font-size:     var(--text-sm);
    font-weight:   500;
    cursor:        pointer;
    text-decoration: none;
    transition:    background 0.15s, border-color 0.15s;
    white-space:   nowrap;
  }

  .button--primary {
    background:   var(--color-accent);
    color:        oklch(100% 0 0);
  }

  .button--primary:hover {
    background: var(--color-accent-hover);
    color:      oklch(100% 0 0);
  }

  .button--secondary {
    background:   var(--color-surface);
    border-color: var(--color-border);
    color:        var(--color-text);
  }

  .button--secondary:hover {
    background: var(--color-bg);
  }

  .button--danger {
    background: var(--color-danger);
    color:      oklch(100% 0 0);
  }

  .button--ghost {
    background:  transparent;
    color:       var(--color-text-muted);
    font-size:   var(--text-sm);
    padding-inline: var(--space-2);
  }

  .button--ghost:hover {
    color: var(--color-text);
  }

  /* ── Post list ────────────────────────────────── */
  .post-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
  }

  .post-list__item {
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    padding:       var(--space-4) var(--space-5);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    transition:    border-color 0.1s;
  }

  .post-list__item:hover {
    border-color: var(--color-text-muted);
  }

  .post-list__body {
    flex:            1;
    min-inline-size: 0;
    display:         grid;
    gap:             var(--space-1);
  }

  .post-list__meta {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
  }

  .post-list__dot {
    line-height: 1;
  }

  .post-list__status {
    display:       inline-block;
    padding:       1px var(--space-2);
    border-radius: 999px;
    font-size:     0.75rem;
    font-weight:   500;
  }

  .post-list__status--published {
    background: oklch(93% 0.07 145);
    color:      oklch(30% 0.1 145);
  }

  .post-list__status--draft {
    background: oklch(93% 0 0);
    color:      var(--color-text-muted);
  }

  .post-list__title {
    font-size:        var(--text-lg);
    font-weight:      600;
    margin-block-end: 0;
  }

  .post-list__title a {
    color:           var(--color-text);
    text-decoration: none;
  }

  .post-list__title a:hover {
    color: var(--color-accent);
  }

  .post-list__description {
    margin:        0;
    font-size:     var(--text-sm);
    color:         var(--color-text-muted);
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
  }

  .post-list__actions {
    flex-shrink: 0;
  }

  /* ── Post show ────────────────────────────────── */
  .post-back {
    margin-block-end: var(--space-5);
    font-size:        var(--text-sm);
  }

  .post-back a {
    color:           var(--color-text-muted);
    text-decoration: none;
  }

  .post-back a:hover {
    color: var(--color-text);
  }

  .post-detail {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
  }

  .post-detail__toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
    padding-block:   var(--space-4);
    border-block:    1px solid var(--color-border);
  }

  .post-detail__toolbar-status {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
  }

  .post-detail__toolbar-actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-shrink: 0;
  }

  .post-detail__cover {
    margin-block-end: var(--space-6);
    border-radius:    var(--radius);
    overflow:         hidden;
    border:           1px solid var(--color-border);
  }

  .post-detail__cover img {
    display:    block;
    width:      100%;
    max-height: 22rem;
    object-fit: cover;
  }

  .post-detail__title {
    margin-block-end: var(--space-3);
  }

  .post-detail__description {
    color:            var(--color-text-muted);
    font-style:       italic;
    margin-block:     0 var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }

  .post-detail__body {
    line-height: 1.75;
  }

  .sidebar-section__date {
    font-size: var(--text-sm);
    color:     var(--color-text-muted);
  }

  /* ── Git status ───────────────────────────────── */
  .git-config {
    display:              grid;
    grid-template-columns: max-content 1fr;
    gap:                  var(--space-2) var(--space-6);
    margin-block-end:     var(--space-6);
    font-size:            var(--text-sm);
  }

  .git-config dt {
    color:       var(--color-text-muted);
    font-weight: 500;
    align-self:  baseline;
  }

  .git-config dd {
    margin: 0;
    word-break: break-all;
  }

  .git-config dd small {
    display:    block;
    margin-block-start: var(--space-1);
    color:      var(--color-text-muted);
    font-size:  0.8em;
    word-break: normal;
  }


  .git-site {
    margin-block-end: var(--space-10);
    padding-block-end: var(--space-10);
    border-block-end: 1px solid var(--color-border);
  }

  .git-site:last-child {
    border-block-end: none;
  }

  .git-site__heading {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    margin-block-end: var(--space-5);
  }

  .git-site__indicator {
    flex-shrink: 0;
    width:  0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    display: inline-block;
  }

  .git-site__indicator--ok    { background: oklch(60% 0.15 145); }
  .git-site__indicator--error { background: oklch(58% 0.18 25); }

  .git-status__summary {
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-weight:   500;
    margin-block-end: var(--space-6);
  }

  .git-status__summary--ok {
    background: oklch(93% 0.07 145);
    color:      oklch(28% 0.1 145);
  }

  .git-status__summary--error {
    background: oklch(94% 0.06 25);
    color:      oklch(35% 0.15 25);
  }

  .git-checks {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
  }

  .git-check {
    display:     flex;
    gap:         var(--space-3);
    align-items: flex-start;
    padding:     var(--space-3) var(--space-4);
    border:      1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .git-check__indicator {
    flex-shrink: 0;
    width:  1rem;
    height: 1rem;
    border-radius: 50%;
    margin-block-start: 2px;
  }

  .git-check--ok .git-check__indicator   { background: oklch(60% 0.15 145); }
  .git-check--error .git-check__indicator { background: oklch(58% 0.18 25); }

  .git-check__label {
    font-size: var(--text-sm);
  }

  .git-check__error {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    color:     var(--color-text-muted);
  }

  .git-check__error code {
    font-family: monospace;
    font-size:   0.85em;
    white-space: pre-wrap;
    word-break:  break-all;
  }

  /* ── Event facts bar ─────────────────────────── */
  .event-facts {
    display:          flex;
    align-items:      center;
    flex-wrap:        wrap;
    gap:              var(--space-2);
    font-size:        var(--text-sm);
    color:            var(--color-text-muted);
    margin-block-end: var(--space-5);
  }

  .event-facts__sep {
    line-height: 1;
  }

  .event-facts__item--date {
    font-weight: 500;
    color:       var(--color-text);
  }

  .event-facts__item--cta {
    color:           var(--color-accent);
    text-decoration: none;
  }

  .event-facts__item--cta:hover {
    text-decoration: underline;
  }

  /* ── Page header ─────────────────────────────── */
  .page-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    margin-block-end: var(--space-6);
  }

  .page-header h1 {
    margin: 0;
  }

  /* ── Temp password card ───────────────────────── */
  .temp-password-card {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    background:    var(--color-surface);
    padding:       var(--space-4) var(--space-5);
    margin-block:  var(--space-5);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-3);
  }

  .temp-password-card__row {
    display:     flex;
    align-items: baseline;
    gap:         var(--space-4);
  }

  .temp-password-card__label {
    font-size:    var(--text-sm);
    color:        var(--color-text-muted);
    min-width:    10rem;
    flex-shrink:  0;
  }

  .temp-password-card__value {
    font-family:  var(--font-mono);
    font-size:    var(--text-base);
    color:        var(--color-text);
    user-select:  all;
  }

  .temp-password-card__value--password {
    font-size:    var(--text-xl);
    font-weight:  600;
    letter-spacing: 0.05em;
    color:        var(--color-accent);
  }

  .temp-password-card__hint {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    margin-block: 0;
  }

  /* ── Empty state ──────────────────────────────── */
  .empty-state {
    color:      var(--color-text-muted);
    text-align: center;
    padding-block: var(--space-12);
  }

  /* ── Dashboard ────────────────────────────────── */
  .dashboard {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-8);
  }

  /* ── Publish failures banner ──────────────────── */
  .publish-failures {
    background:    oklch(98% 0.02 30);
    border:        1px solid oklch(85% 0.06 30);
    border-radius: var(--radius);
    padding:       var(--space-5) var(--space-6);
  }

  .publish-failures__header {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    margin-block-end: var(--space-4);
  }

  .publish-failures__title {
    flex:        1;
    font-size:   var(--text-base);
    font-weight: 600;
    color:       var(--color-danger);
    margin:      0;
  }

  .publish-failures__list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
  }

  .publish-failures__item {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         var(--space-2) var(--space-3);
    font-size:   var(--text-sm);
  }

  .publish-failures__content-title {
    font-weight: 600;
  }

  .publish-failures__error {
    font-family: var(--font-mono);
    font-size:   0.8125rem;
    color:       var(--color-danger);
    flex-basis:  100%;
  }

  .publish-failures__time {
    color:     var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ── Activity feed ────────────────────────────── */
  .activity-feed__heading {
    font-size:        var(--text-base);
    font-weight:      600;
    margin-block-end: var(--space-4);
  }

  .activity-feed__list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-1);
  }

  .activity-feed__item {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   baseline;
    gap:           var(--space-1) var(--space-2);
    padding:       var(--space-3) var(--space-4);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     var(--text-sm);
  }

  .activity-feed__item--failure {
    border-color: oklch(85% 0.06 30);
    background:   oklch(99% 0.01 30);
  }

  .activity-feed__actor {
    font-weight: 600;
  }

  .activity-feed__subject {
    font-style: normal;
    font-weight: 500;
  }

  .activity-feed__time {
    margin-inline-start: auto;
    color:     var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .activity-feed__empty {
    color:      var(--color-text-muted);
    font-size:  var(--text-sm);
  }
}