/* Shared base for all Remote Pilot Ace mockups (mobile, web, admin). Uses tokens.css variables only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.i { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.i.sm { width: 16px; height: 16px; } .i.lg { width: 24px; height: 24px; } .i.xl { width: 32px; height: 32px; } .i.xxl { width: 48px; height: 48px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Buttons: primary / secondary / ghost / danger (§6.4) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch-min); padding: 0 18px; border-radius: var(--r-md); border: 1.5px solid transparent; font-weight: 600; font-size: 16px; line-height: 20px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-danger { background: var(--danger-strong); color: var(--on-danger); }
.btn-quiet { background: var(--surface-2); color: var(--text); }
.btn[disabled], .btn.is-disabled { background: var(--surface-2); color: var(--muted); border-color: transparent; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 52px; font-size: 17px; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 14px; border-radius: var(--r-sm); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip-acs { font-family: var(--mono); background: var(--primary-soft); color: var(--primary); }
.chip-success { background: var(--success-soft); color: var(--success-strong); }
.chip-danger { background: var(--danger-soft); color: var(--danger-strong); }
.chip-accent { background: var(--accent-soft); color: var(--accent-strong); }
.chip-pro { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* Skeleton loading (§6.4). Respects reduced motion. */
.sk { background: var(--surface-2); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); animation: sk 1.4s infinite; }
@keyframes sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* Placeholder marker for content that must never be mistaken for real FAA questions */
.ph { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--accent) 14%, transparent) 6px 12px); border-radius: 4px; }
.ph-tag { display: inline-block; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); border: 1px dashed var(--accent-strong); padding: 1px 6px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }