/* App UI Kit styles — relies on ../../colors_and_type.css */
@import url("../../colors_and_type.css");

html, body { margin: 0; padding: 0; background: var(--ax-ink-25); color: var(--ax-fg-1); font-family: var(--ax-font-sans); font-size: 14px; }
* { box-sizing: border-box; }

/* ---------- App bar ---------- */
.ax-bar { background: #1C1C1E; color: #fff; display: flex; align-items: center; height: 56px; padding: 0 20px; gap: 28px; border-bottom: 1px solid #000; position: relative; }
.ax-bar-product { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; padding: 6px 8px 6px 4px; border-radius: 6px; user-select: none; }
.ax-bar-product:hover { background: rgba(255,255,255,0.06); }
.ax-bar-mark { width: 32px; height: 32px; border-radius: 9999px; display: block; }
.ax-bar-name { font-family: var(--ax-font-brand); font-weight: 300; font-size: 24px; color: #fff; letter-spacing: 0.005em; }
.ax-bar-menu { display: flex; gap: 2px; flex: 1; }
.ax-bar-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; cursor: pointer; user-select: none; }
.ax-bar-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ax-bar-item.active { color: #fff; }
.ax-bar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ax-bar-org { display: flex; align-items: center; gap: 6px; height: 22px; }
.ax-bar-org img { height: 22px; width: auto; display: block; }
.ax-bar-icon { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: rgba(255,255,255,0.78); cursor: pointer; position: relative; background: transparent; border: 0; padding: 0; }
.ax-bar-icon:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ax-bar-badge { position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px; background: #F2545B; color: #fff; border-radius: 9999px; font-family: var(--ax-font-brand); font-size: 9px; font-weight: 700; display: grid; place-items: center; border: 2px solid #1C1C1E; }
.ax-bar-avatar { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 4px 2px 2px; border-radius: 9999px; background: transparent; border: 0; color: #fff; }
.ax-bar-avatar:hover { background: rgba(255,255,255,0.06); }
.ax-bar-avatar-circle { width: 26px; height: 26px; border-radius: 9999px; background: rgba(255,255,255,0.12); color: #fff; font-family: var(--ax-font-brand); font-weight: 600; font-size: 11px; display: grid; place-items: center; }
.ax-bar-accent { height: 2px; background: var(--ax-accent); }
.ax-bar-crumb { font-family: var(--ax-font-brand); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ax-ink-400); padding: 14px 20px; background: var(--ax-ink-25); }

.ax-bar-switch { position: absolute; left: 12px; top: 64px; background: #fff; border: 1px solid var(--ax-border-1); border-radius: 10px; box-shadow: var(--ax-shadow-md); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; z-index: 100; min-width: 360px; }
.ax-bar-switch-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--ax-fg-1); }
.ax-bar-switch-item:hover { background: var(--ax-ink-50); }
.ax-bar-switch-item img { width: 28px; height: 28px; border-radius: 9999px; }
.ax-bar-switch-name { font-family: var(--ax-font-brand); font-weight: 600; font-size: 13px; }
.ax-bar-switch-phase { font-size: 11px; color: var(--ax-fg-2); }

/* ---------- Phase card ---------- */
.ax-pcard { background: #fff; border: 1px solid var(--ax-border-1); border-radius: var(--ax-radius-lg); padding: 16px; box-shadow: 0 1px 3px rgba(9,9,11,0.06); display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.ax-pcard-strip { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ax-accent); }
.ax-pcard-head { display: flex; align-items: center; gap: 10px; }
.ax-pcard-mark { width: 24px; height: 24px; border-radius: 9999px; }
.ax-pcard-eyebrow { font-family: var(--ax-font-brand); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ax-accent-deep); }
.ax-pcard-title { font-family: var(--ax-font-brand); font-weight: 700; font-size: 18px; color: var(--ax-fg-1); }
.ax-pcard-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ax-fg-2); }
.ax-chip { font-family: var(--ax-font-brand); font-weight: 600; font-size: 10px; padding: 3px 8px; border-radius: 9999px; }
.ax-chip--soft { background: var(--ax-accent-soft); color: var(--ax-accent-deep); }

/* ---------- Buttons ---------- */
.ax-btn { font-family: var(--ax-font-brand); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; padding: 9px 16px; border-radius: var(--ax-radius-md); border: 1px solid transparent; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px; transition: all 120ms var(--ax-ease); }
.ax-btn--primary { background: var(--ax-accent); color: #fff; }
.ax-btn--primary:hover { filter: brightness(0.9); }
[data-product="scrutineer"] .ax-btn--primary { color: #0A0A0B; }
.ax-btn--secondary { background: var(--ax-accent-soft); color: var(--ax-accent-deep); border-color: color-mix(in oklab, var(--ax-accent-deep) 22%, transparent); }
.ax-btn--secondary:hover { background: color-mix(in oklab, var(--ax-accent-deep) 14%, #fff); }
.ax-btn--ghost { background: transparent; color: var(--ax-accent-deep); }
.ax-btn--ghost:hover { background: color-mix(in oklab, var(--ax-accent-deep) 8%, transparent); }
.ax-btn--cross { background: #0A0A0B; color: #fff; padding: 8px 16px 8px 10px; }
.ax-btn--cross:hover { background: #1A1A1F; }
.ax-btn-cross-mark { width: 22px; height: 22px; border-radius: 9999px; display: inline-grid; place-items: center; background: #18181B; }
.ax-btn-cross-mark img { width: 18px; height: 18px; border-radius: 9999px; }
.ax-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Badges ---------- */
.ax-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ax-font-brand); font-weight: 600; font-size: 11px; padding: 3px 9px; border-radius: 9999px; line-height: 1.3; }
.ax-badge-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }
.ax-badge--success { background: rgba(22,163,74,0.12); color: #16A34A; }
.ax-badge--warn    { background: rgba(245,158,11,0.14); color: #B45309; }
.ax-badge--danger  { background: rgba(220,38,38,0.12); color: #DC2626; }
.ax-badge--info    { background: rgba(37,99,235,0.12); color: #2563EB; }
.ax-badge--neutral { background: var(--ax-ink-50); color: var(--ax-ink-600); }
.ax-badge--solid   { background: #0A0A0B; color: #fff; }
.ax-badge--outline { background: transparent; color: var(--ax-fg-1); border: 1px solid var(--ax-border-2); }

/* ---------- Fields ---------- */
.ax-field { display: flex; flex-direction: column; gap: 6px; }
.ax-field-label { font-family: var(--ax-font-brand); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ax-fg-2); }
.ax-input { font-family: var(--ax-font-sans); font-size: 13px; padding: 9px 12px; border: 1px solid var(--ax-border-2); border-radius: var(--ax-radius-md); background: #fff; color: var(--ax-fg-1); }
.ax-input.is-focus { border-color: var(--ax-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ax-accent) 25%, transparent); outline: none; }
.ax-input.is-error { border-color: var(--ax-danger); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.ax-field-help { font-size: 11px; color: var(--ax-fg-2); }
.ax-field-help.is-error { color: var(--ax-danger); }

/* ---------- Layout ---------- */
.ax-page { padding: 24px 32px 64px; }
.ax-page h1 { font-family: var(--ax-font-brand); font-weight: 700; font-size: 32px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -0.01em; }
.ax-page-sub { color: var(--ax-fg-2); margin: 0 0 24px; }
.ax-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ax-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ax-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ax-section { background: #fff; border: 1px solid var(--ax-border-1); border-radius: var(--ax-radius-lg); padding: 20px; margin-top: 24px; box-shadow: 0 1px 3px rgba(9,9,11,0.04); }
.ax-section-title { font-family: var(--ax-font-brand); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ax-fg-2); margin: 0 0 14px; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ax-table th { text-align: left; font-family: var(--ax-font-brand); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ax-fg-2); padding: 8px 12px; border-bottom: 1px solid var(--ax-border-1); }
.ax-table td { padding: 10px 12px; border-bottom: 1px solid var(--ax-border-1); }
.ax-table tr:last-child td { border-bottom: 0; }
.ax-mono { font-family: var(--ax-font-mono); font-size: 12px; color: var(--ax-fg-2); }