/* border-box so height/min-height mean the visible pill — anchors are
   content-box by default and inflate past the buttons beside them.
   inline-flex (not inline-block) so any min-height keeps the label
   vertically centered — base.css's mobile 44px rule intended this but
   loads earlier and lost the display battle for years. */
.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-6);
  border: var(--control-border-w) solid transparent;
  border-radius: var(--control-radius); font-family: var(--font-body); font-size: var(--text-base);
  font-weight: 500; line-height: 1.4; cursor: pointer; text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
    transform 140ms ease; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { transform: scale(1.03); }
.btn--secondary { background: var(--color-surface); color: var(--color-text);
  border-color: var(--color-text); }
.btn--secondary:hover { background: var(--color-text); color: var(--color-primary-contrast); }
.btn--danger { background: var(--color-surface); color: var(--color-danger);
  border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: var(--color-primary-contrast); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn:disabled { opacity: 0.35; pointer-events: none; }

.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: var(--line-height-badge); color: var(--color-text); }
.badge--neutral { background: var(--color-status-empty); border: 1px solid var(--color-border); }
.badge--warning { background: var(--color-status-active); }
.badge--success { background: var(--color-status-done); }
.badge--info    { background: var(--color-info-bg); color: var(--color-info); }
.badge--danger  { background: var(--color-danger-bg); color: var(--color-danger); }

.icon-delete circle { fill: var(--color-surface); }

.confirm-dialog { margin: auto; max-width: 420px; padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.confirm-dialog::backdrop { background: rgb(26 25 23 / 0.35); }
.confirm-dialog__message { margin: 0 0 var(--space-4); }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.card { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-1); }
.card__title { margin: 0 0 var(--space-4); }

.stat-bar { display: grid; grid-template-columns: var(--stat-bar-columns); gap: var(--space-3);
  align-items: center; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.stat-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-bar__track { position: relative; height: var(--stat-bar-track-height);
  background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.stat-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--color-bar-planned); }
.stat-bar__fill--secondary { background: var(--color-text); }
.stat-bar__value { text-align: right; }

/* styleguide page */
.styleguide__section { margin-top: var(--space-8); border-top: 1px solid var(--color-border);
  padding-top: var(--space-6); }
.styleguide__type-row { display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.styleguide__type-row:last-child { border-bottom: none; }
.styleguide__spec { font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted); }
.styleguide__controls { display: flex; gap: var(--space-3); align-items: center;
  flex-wrap: wrap; margin-top: var(--space-3); }
.styleguide__check { display: flex; gap: var(--space-2); align-items: center; }
.styleguide__section + .styleguide__spec { display: block; margin-bottom: var(--space-3); }