/*
 * tcp-ui component layer - the single styling source for every tcp.systems surface.
 * Consumes only --tcp-* tokens (see tokens/tcp-theme.css). Hex never appears here.
 * Geometry decrees: radius 0, hairlines, 44px targets, focus from the theme.
 */
.tcp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 0; transition: background-color var(--tcp-dur-1) var(--tcp-ease-standard), border-color var(--tcp-dur-1) var(--tcp-ease-standard), color var(--tcp-dur-1) var(--tcp-ease-standard); }
.tcp-btn--primary { background: var(--tcp-accent); color: var(--tcp-on-accent); }
.tcp-btn--primary:hover { background: var(--tcp-accent-hover); text-decoration: none; }
.tcp-btn--primary:active { background: var(--tcp-accent-press); }
.tcp-btn--secondary { background: transparent; color: var(--tcp-fg); border-color: var(--tcp-line-strong); }
.tcp-btn--secondary:hover { border-color: var(--tcp-accent-text); color: var(--tcp-accent-text); text-decoration: none; }
.tcp-btn--danger { background: var(--tcp-bad); color: var(--tcp-bad-foreground); }
.tcp-btn--danger:hover { background: var(--tcp-bad); filter: brightness(1.08); }
.tcp-btn--link { min-height: 44px; padding: 0 12px; color: var(--tcp-accent-text); }
.tcp-btn--link:hover { text-decoration: underline; }
.tcp-btn[disabled], .tcp-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.tcp-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 10px; border: 1px solid transparent; border-radius: 0; font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tcp-badge::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.tcp-badge--running { color: var(--tcp-ok); background: var(--tcp-ok-bg); border-color: var(--tcp-ok-line); }
.tcp-badge--pending { color: var(--tcp-info); background: var(--tcp-info-bg); border-color: var(--tcp-info-line); }
.tcp-badge--stale { color: var(--tcp-warn); background: var(--tcp-warn-bg); border-color: var(--tcp-warn-line); }
.tcp-badge--failed { color: var(--tcp-bad); background: var(--tcp-bad-bg); border-color: var(--tcp-bad-line); }
.tcp-badge--stopped, .tcp-badge--neutral { color: var(--tcp-muted); background: transparent; border-color: var(--tcp-line-strong); }
.tcp-card { border: 1px solid var(--tcp-line); background: var(--tcp-surface); border-radius: 0; box-shadow: none; padding: clamp(20px, 3vw, 32px); }
.tcp-card__label { font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcp-muted); margin: 0 0 12px; }
.tcp-card__title { font-family: var(--tcp-font-sans); font-weight: 600; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--tcp-fg); }
.tcp-card__body { color: var(--tcp-fg-soft); font-size: 15px; line-height: 1.5; }
.tcp-nav { position: sticky; top: 0; z-index: var(--tcp-z-sticky, 30); background: var(--tcp-bg); border-bottom: 1px solid var(--tcp-line); }
.tcp-nav__inner { max-width: 72rem; margin: 0 auto; padding: 0 var(--tcp-gutter, 1.5rem); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.tcp-nav__wordmark { font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcp-fg); display: inline-flex; align-items: center; gap: 8px; }
.tcp-nav__wordmark::before { content: ''; width: 8px; height: 8px; background: var(--tcp-accent); }
.tcp-nav__items { display: flex; align-items: center; gap: 4px; }
.tcp-nav__item { font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcp-muted); min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; text-decoration: none; }
.tcp-nav__item:hover { color: var(--tcp-fg); text-decoration: none; }
.tcp-nav__actions { display: flex; align-items: center; gap: 8px; }
.tcp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tcp-table th { text-align: left; font-family: var(--tcp-font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcp-muted); border-bottom: 1px solid var(--tcp-line-strong); padding: 8px 12px; }
.tcp-table td { font-size: 14px; line-height: 1.45; color: var(--tcp-fg); border-bottom: 1px solid var(--tcp-line); padding: 12px; }
.tcp-field { display: grid; gap: 8px; margin: 0 0 24px; }
.tcp-field__label { font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcp-muted); }
.tcp-field__input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--tcp-input); border-radius: 0; background: var(--tcp-surface); color: var(--tcp-fg); font-family: var(--tcp-font-sans); font-size: 15px; line-height: 1.5; }
textarea.tcp-field__input { padding: 10px 12px; min-height: 96px; resize: vertical; }
.tcp-field__hint { font-size: 13px; color: var(--tcp-muted); margin: 0; }
.tcp-field__error { font-size: 13px; color: var(--tcp-bad); margin: 0; }
.tcp-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--tcp-fg); }
.tcp-check input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--tcp-input); border-radius: 0; background: var(--tcp-surface); cursor: pointer; }
.tcp-check input:checked { background: var(--tcp-accent); border-color: var(--tcp-accent); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' fill='none' stroke='%2310151B' stroke-width='2.5'/></svg>"); background-size: 12px 12px; background-position: center; background-repeat: no-repeat; }
.tcp-codeblock { margin: 0; background: var(--tcp-code); border: 1px solid var(--tcp-line); border-radius: 0; box-shadow: none; padding: 16px 20px; overflow-x: auto; }
.tcp-codeblock code { font-family: var(--tcp-font-mono); font-size: 13px; line-height: 1.5; font-feature-settings: 'liga' 0; font-variant-ligatures: none; }
.tcp-dialog__trigger { display: inline-flex; min-height: 44px; align-items: center; }
.tcp-dialog__overlay { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--tcp-bg) 76%, transparent); }
.tcp-dialog__content { position: fixed; z-index: 60; inset: 50% auto auto 50%; width: min(32rem, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 24px; border: 1px solid var(--tcp-line-strong); background: var(--tcp-surface); color: var(--tcp-fg); box-shadow: var(--tcp-elevation-overlay); }
.tcp-dialog__header { padding-right: 40px; }
.tcp-dialog__title { margin: 0; font-size: 20px; line-height: 1.2; }
.tcp-dialog__description { margin: 8px 0 0; color: var(--tcp-muted); font-size: 14px; }
.tcp-dialog__body { margin: 24px 0; }
.tcp-dialog__close { min-height: 44px; padding: 0 16px; border: 1px solid var(--tcp-line-strong); background: transparent; color: var(--tcp-fg); cursor: pointer; }
.tcp-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--tcp-line); }
.tcp-tabs__trigger { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--tcp-muted); cursor: pointer; font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tcp-tabs__trigger[data-state='active'] { border-bottom-color: var(--tcp-accent); color: var(--tcp-fg); }
.tcp-tabs__content { padding-top: 20px; }
.tcp-select { display: grid; gap: 8px; }
.tcp-select__label { color: var(--tcp-muted); font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tcp-select__trigger { display: flex; min-height: 44px; width: 100%; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid var(--tcp-input); background: var(--tcp-surface); color: var(--tcp-fg); cursor: pointer; text-align: left; }
.tcp-select__content { z-index: 40; min-width: 12rem; border: 1px solid var(--tcp-line-strong); background: var(--tcp-surface); box-shadow: var(--tcp-elevation-overlay); }
.tcp-select__item { display: flex; min-height: 44px; align-items: center; padding: 0 12px; color: var(--tcp-fg); cursor: pointer; }
.tcp-select__item[data-highlighted] { background: var(--tcp-hover-fill); }
.tcp-select__item[data-disabled] { color: var(--tcp-muted); cursor: not-allowed; }
.tcp-toast { position: fixed; right: 24px; bottom: 24px; z-index: 70; max-width: min(26rem, calc(100vw - 48px)); padding: 16px 20px; border: 1px solid var(--tcp-line-strong); background: var(--tcp-surface); color: var(--tcp-fg); box-shadow: var(--tcp-elevation-overlay); }
.tcp-toast--success { border-color: var(--tcp-ok-line); background: var(--tcp-ok-bg); }
.tcp-toast--warning { border-color: var(--tcp-warn-line); background: var(--tcp-warn-bg); }
.tcp-toast--danger { border-color: var(--tcp-bad-line); background: var(--tcp-bad-bg); }
.tcp-toast__title { font-weight: 600; }
.tcp-shell { display: grid; min-height: 100vh; grid-template-columns: 248px minmax(0, 1fr); background: var(--tcp-bg); color: var(--tcp-fg); }
.tcp-shell__sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--tcp-line); background: var(--tcp-surface); padding: 24px 16px; }
.tcp-shell__brand { margin: 0 8px 24px; font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tcp-shell__link { display: flex; min-height: 44px; align-items: center; padding: 0 12px; color: var(--tcp-muted); text-decoration: none; }
.tcp-shell__link:hover, .tcp-shell__link--active { background: var(--tcp-hover-fill); color: var(--tcp-fg); text-decoration: none; }
.tcp-shell__main { min-width: 0; padding: clamp(24px, 4vw, 64px); }
.tcp-shell__mobile-header { display: none; }
.tcp-stat { position: relative; min-height: 132px; padding: 20px; border: 1px solid var(--tcp-line); background: var(--tcp-surface); }
.tcp-stat__label { margin: 0 0 12px; color: var(--tcp-muted); font-family: var(--tcp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tcp-stat__value { font-size: 32px; font-weight: 600; line-height: 1; }
.tcp-stat__delta { margin: 12px 0 0; font-family: var(--tcp-font-mono); font-size: 12px; }
.tcp-stat__delta--up { color: var(--tcp-ok); }
.tcp-stat__delta--down { color: var(--tcp-bad); }
.tcp-stat__delta--neutral { color: var(--tcp-muted); }
.tcp-stat__sparkline { position: absolute; right: 20px; bottom: 20px; color: var(--tcp-accent); }
.tcp-quota { display: grid; gap: 10px; }
.tcp-quota__header, .tcp-quota__footer { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.tcp-quota__header span, .tcp-quota__footer { color: var(--tcp-muted); }
.tcp-quota__track { height: 8px; overflow: hidden; background: var(--tcp-sunken-bg); }
.tcp-quota__fill { display: block; height: 100%; background: var(--tcp-accent); transition: width var(--tcp-dur-3) var(--tcp-ease-standard), background-color var(--tcp-dur-3) var(--tcp-ease-standard); }
.tcp-quota__fill--warning { background: var(--tcp-warn); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .tcp-shell { display: block; }
  .tcp-shell__mobile-header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--tcp-line); background: var(--tcp-bg); }
  .tcp-shell__menu { min-height: 44px; padding: 0 12px; border: 1px solid var(--tcp-line-strong); background: transparent; color: var(--tcp-fg); }
  .tcp-shell__sidebar { position: fixed; inset: 64px 0 auto 0; z-index: 30; display: none; width: 100%; height: auto; max-height: calc(100vh - 64px); border-right: 0; border-bottom: 1px solid var(--tcp-line); }
  .tcp-shell__sidebar--open { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .tcp-btn, .tcp-quota__fill { transition-duration: 0ms; }
}