/* Shared production theme from the 2026 Otto design handoff. */
:root {
  color-scheme: dark;
  --ground: #101216;
  --panel: #171B20;
  --panel-subtle: rgba(245, 241, 232, 0.03);
  --panel-raised: #1D2127;
  --display: #FFF8ED;
  --strong: #F5F1E8;
  --body: #C9CDD4;
  --muted: #9AA1AB;
  --label: #8C93A0;
  --faint: #6B727D;
  --orange: #FF5F12;
  --orange-text: #FF9257;
  --orange-border: #D85512;
  --orange-press: #B84A10;
  --ok: #34D399;
  --warn: #E8B84B;
  --stop: #FF7864;
  --line: rgba(245, 241, 232, 0.12);
  --line-strong: rgba(245, 241, 232, 0.22);
  --shadow-app: 0 18px 56px rgba(0, 0, 0, 0.28);
  --purple: var(--orange);
  --purple-hover: var(--orange-press);
  --purple-light: var(--orange-text);
  --purple-soft: rgba(255, 95, 18, 0.11);
  --purple-bg: rgba(255, 95, 18, 0.08);
  --violet: var(--orange);
  --violet-2: var(--orange-text);
  --violet-soft: rgba(255, 95, 18, 0.1);
  --cyan: var(--orange-text);
  --brand: var(--orange);
  --bg: var(--ground);
  --card: var(--panel);
  --white: var(--panel);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --navy: var(--display);
  --navy-card: var(--panel-raised);
  --text: var(--strong);
  --text-2: var(--body);
  --text-3: var(--muted);
  --text-4: var(--label);
  --green: var(--ok);
  --green-ink: var(--ok);
  --green-soft: rgba(52, 211, 153, 0.1);
  --red: var(--stop);
  --red-soft: rgba(255, 120, 100, 0.1);
  --amber: var(--warn);
  --amber-soft: rgba(232, 184, 75, 0.1);
  --teal: var(--ok);
  --teal-light: #67E7B9;
  --teal-bg: rgba(52, 211, 153, 0.08);
  --coral: var(--stop);
  --coral-light: #FF9E8F;
  --coral-bg: rgba(255, 120, 100, 0.08);
  --shadow-card: var(--shadow-app);
  --shadow-float: var(--shadow-app);
  --radius: 12px;
}

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body.mainspring-app {
  min-height: 100vh;
  background:
    linear-gradient(rgba(245, 241, 232, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 241, 232, 0.018) 1px, transparent 1px),
    var(--ground) !important;
  background-size: 56px 56px !important;
  color: var(--strong) !important;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body.mainspring-app *,
body.mainspring-app *::before,
body.mainspring-app *::after {
  letter-spacing: inherit;
}

body.mainspring-app h1,
body.mainspring-app h2,
body.mainspring-app h3,
body.mainspring-app h4,
body.mainspring-app strong {
  color: var(--display);
}

body.mainspring-app p,
body.mainspring-app li,
body.mainspring-app dd {
  color: var(--body);
}

body.mainspring-app a {
  color: var(--orange-text);
}

body.mainspring-app button,
body.mainspring-app input,
body.mainspring-app select,
body.mainspring-app textarea {
  font: inherit;
}

body.mainspring-app input,
body.mainspring-app select,
body.mainspring-app textarea {
  border-color: var(--line-strong) !important;
  border-radius: 8px !important;
  background: var(--panel) !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

body.mainspring-app input::placeholder,
body.mainspring-app textarea::placeholder {
  color: var(--faint) !important;
}

body.mainspring-app input:focus,
body.mainspring-app select:focus,
body.mainspring-app textarea:focus {
  border-color: var(--orange-text) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 146, 87, 0.14) !important;
}

body.mainspring-app :focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 3px;
}

body.mainspring-app .serif,
body.mainspring-app .serif-i,
body.mainspring-app .display-italic {
  font-family: 'Fraunces', Georgia, serif !important;
}

body.mainspring-app .eyebrow,
body.mainspring-app .step-eyebrow,
body.mainspring-app .settings-h,
body.mainspring-app .metric-label,
body.mainspring-app .section-label,
body.mainspring-app .status-label,
body.mainspring-app .p-step-label {
  color: var(--label) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

body.mainspring-app .card,
body.mainspring-app .panel,
body.mainspring-app .section-card,
body.mainspring-app .settings-section,
body.mainspring-app .cockpit-section,
body.mainspring-app .dashboard-tool,
body.mainspring-app .metric-card,
body.mainspring-app .comm-card,
body.mainspring-app .tool-card,
body.mainspring-app .login-card {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.mainspring-app .primary-btn,
body.mainspring-app .btn-primary,
body.mainspring-app .activate-btn,
body.mainspring-app .chat-send,
body.mainspring-app .login-btn {
  border: 1px solid var(--orange-border) !important;
  border-radius: 5px !important;
  background: var(--orange) !important;
  color: #101216 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.mainspring-app .primary-btn:hover,
body.mainspring-app .btn-primary:hover,
body.mainspring-app .activate-btn:hover,
body.mainspring-app .chat-send:hover,
body.mainspring-app .login-btn:hover {
  background: var(--orange-text) !important;
}

body.mainspring-app .secondary-btn,
body.mainspring-app .btn-secondary,
body.mainspring-app .logout-btn,
body.mainspring-app .card-action,
body.mainspring-app .owner-action-btn,
body.mainspring-app .filter-tab,
body.mainspring-app .pagination-btn {
  border-color: var(--line-strong) !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

body.mainspring-app .status-dot.online,
body.mainspring-app .status-dot.live,
body.mainspring-app .status-dot.on,
body.mainspring-app .dot.green,
body.mainspring-app .n-save-indicator .dot {
  background: var(--ok) !important;
}

/* Seven-step onboarding */
body.onboarding-app nav {
  border-color: var(--line) !important;
  background: rgba(16, 18, 22, 0.92) !important;
  backdrop-filter: blur(18px);
}

body.onboarding-app .n-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--orange) url('/brand/mainspring-mark-cream.svg') center / 68% no-repeat !important;
}

body.onboarding-app .n-logo svg {
  display: none;
}

body.onboarding-app .n-logo img {
  width: 24px;
  height: 24px;
  display: block;
}

body.onboarding-app .n-name,
body.onboarding-app .step-title,
body.onboarding-app .card-title,
body.onboarding-app .tool-section-title,
body.onboarding-app .highlight-card-title,
body.onboarding-app .success-title {
  color: var(--display) !important;
}

body.onboarding-app .onboard-main {
  max-width: 840px;
}

body.onboarding-app .step-subtitle,
body.onboarding-app .form-label,
body.onboarding-app .terms-check label,
body.onboarding-app .resume-note {
  color: var(--body) !important;
}

body.onboarding-app .card-title .icon,
body.onboarding-app .tool-section-title .icon {
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(255, 146, 87, 0.36);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-text) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

body.onboarding-app .btn-continue {
  border: 1px solid var(--orange-border) !important;
  border-radius: 5px !important;
  background: var(--orange) !important;
  color: #101216 !important;
  box-shadow: none !important;
}

body.onboarding-app .btn-continue:hover {
  background: var(--orange-text) !important;
  transform: translateY(-1px);
}

body.onboarding-app .btn-back,
body.onboarding-app .resume-link {
  color: var(--strong) !important;
}

body.onboarding-app .highlight-card,
body.onboarding-app .timeline,
body.onboarding-app .info-callout,
body.onboarding-app .terms-check {
  border-color: var(--line) !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.onboarding-app .highlight-item .val,
body.onboarding-app .timeline-title,
body.onboarding-app .tl-label {
  color: var(--display) !important;
}

body.onboarding-app .work-order-stamp {
  width: fit-content;
  margin: 0 0 18px auto;
  padding: 9px 12px;
  border: 1px solid var(--orange-border);
  border-radius: 5px;
  display: grid;
  gap: 2px;
  background: rgba(255, 95, 18, 0.08);
  transform: rotate(-1deg);
  color: var(--orange-text);
  font-family: 'JetBrains Mono', monospace;
  text-align: left;
}

body.onboarding-app .work-order-stamp span {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

body.onboarding-app .work-order-stamp strong {
  color: var(--orange-text);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

body.onboarding-app .work-order-stamp--saved {
  margin: 0 auto 22px;
  border-color: rgba(52, 211, 153, 0.48);
  background: rgba(52, 211, 153, 0.08);
  color: var(--ok);
  transform: rotate(1deg);
}

body.onboarding-app .work-order-stamp--saved strong {
  color: var(--ok);
}

body.onboarding-app .progress-wrapper {
  border-color: var(--line) !important;
  background: rgba(16, 18, 22, 0.97) !important;
}

body.onboarding-app .progress-track {
  background: var(--line) !important;
}

body.onboarding-app .progress-fill,
body.onboarding-app .p-step.active .p-step-circle,
body.onboarding-app .p-step.completed .p-step-circle {
  border-color: var(--orange) !important;
  background: var(--orange) !important;
  color: #101216 !important;
}

body.onboarding-app .p-step-circle {
  border-color: var(--line-strong) !important;
  background: var(--ground) !important;
  color: var(--muted) !important;
}

body.onboarding-app .step-card,
body.onboarding-app .glass-card,
body.onboarding-app .review-card,
body.onboarding-app .success-card,
body.onboarding-app .tool-category,
body.onboarding-app .workflow-card,
body.onboarding-app .voice-card,
body.onboarding-app .internal-test-card {
  border-color: var(--line) !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.onboarding-app .tool-option,
body.onboarding-app .choice-card,
body.onboarding-app .radio-card,
body.onboarding-app .check-option,
body.onboarding-app .voice-option {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--body) !important;
}

body.onboarding-app .tool-option.selected,
body.onboarding-app .choice-card.selected,
body.onboarding-app .radio-card.selected,
body.onboarding-app .check-option:has(input:checked),
body.onboarding-app .voice-option.selected {
  border-color: var(--orange) !important;
  background: rgba(255, 95, 18, 0.1) !important;
}

body.onboarding-app .research-card,
body.onboarding-app .research-status {
  border-color: rgba(255, 146, 87, 0.34) !important;
  background: rgba(255, 95, 18, 0.08) !important;
}

body.onboarding-app .workflow-card.selected {
  border-color: var(--orange) !important;
  background: rgba(255, 95, 18, 0.08) !important;
}

body.onboarding-app .workflow-icon,
body.onboarding-app .file-upload-icon {
  border: 1px solid rgba(255, 95, 18, 0.34) !important;
  border-radius: 4px !important;
  background: rgba(255, 95, 18, 0.08) !important;
  color: var(--orange-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

body.onboarding-app .file-upload-icon {
  width: max-content !important;
  margin: 0 auto 12px !important;
  padding: 6px 8px !important;
}

body.onboarding-app .success-icon {
  background: var(--ok) !important;
  color: var(--ground) !important;
  box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.08) !important;
}

body.onboarding-app .internal-test-activation {
  border-color: rgba(255, 95, 18, 0.38) !important;
  background: rgba(255, 95, 18, 0.06) !important;
}

body.onboarding-app .internal-test-activation label,
body.onboarding-app .internal-test-status {
  color: var(--muted) !important;
}

/* Owner portal */
body.portal-app .sidebar {
  border-color: var(--line) !important;
  background: #0C0E11 !important;
}

body.portal-app .sidebar-logo-mark,
body.portal-app .login-logo-mark {
  background: var(--orange) url('/brand/mainspring-mark-cream.svg') center / 68% no-repeat !important;
}

body.portal-app .sidebar-logo-mark img,
body.portal-app .login-logo-mark img {
  opacity: 0;
}

body.portal-app #recoveryLinkBtn {
  border-color: var(--line-strong) !important;
  background: var(--panel-raised) !important;
  color: var(--orange-text) !important;
}

body.portal-app #recoveryLinkBtn:hover {
  border-color: var(--orange-border) !important;
  background: rgba(255, 95, 18, 0.08) !important;
}

body.portal-app .sidebar-nav-item {
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  color: var(--muted) !important;
}

body.portal-app .sidebar-nav-item:hover {
  border-color: var(--line) !important;
  background: rgba(245, 241, 232, 0.04) !important;
  color: var(--strong) !important;
}

body.portal-app .sidebar-nav-item.active {
  border-color: rgba(255, 95, 18, 0.32) !important;
  background: rgba(255, 95, 18, 0.11) !important;
  color: var(--orange-text) !important;
}

body.portal-app .topbar {
  border-color: var(--line) !important;
  background: rgba(16, 18, 22, 0.92) !important;
  backdrop-filter: blur(18px);
}

body.portal-app .main-content,
body.portal-app .content {
  background: transparent !important;
}

body.portal-app .employee-status-card,
body.portal-app .status-card,
body.portal-app .activity-card,
body.portal-app .chat-shell,
body.portal-app .tools-shell {
  border-color: var(--line) !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.portal-app .status-hero,
body.portal-app .cockpit-priority-grid,
body.portal-app .stats-row {
  border-color: var(--line) !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.portal-app .comm-grid {
  border-color: var(--line) !important;
  background: transparent !important;
}

body.portal-app .status-avatar {
  border: 1px solid rgba(255, 95, 18, 0.42) !important;
  background: rgba(255, 95, 18, 0.1) !important;
  color: var(--orange-text) !important;
}

body.portal-app .contact-action,
body.portal-app .owner-action-btn,
body.portal-app .comm-action,
body.portal-app .tool-action,
body.portal-app .tool-link {
  border-color: var(--line-strong) !important;
  background: var(--panel-raised) !important;
  color: var(--orange-text) !important;
}

body.portal-app .contact-action:hover,
body.portal-app .owner-action-btn:hover,
body.portal-app .comm-action:hover,
body.portal-app .tool-action:hover,
body.portal-app .tool-link:hover {
  border-color: var(--orange-border) !important;
  background: rgba(255, 95, 18, 0.09) !important;
  color: var(--orange-text) !important;
}

body.portal-app .owner-action-btn.primary,
body.portal-app .approve-btn {
  border-color: var(--orange) !important;
  background: var(--orange) !important;
  color: var(--ground) !important;
}

body.portal-app .chat-head,
body.portal-app .chat-input-bar,
body.portal-app .tools-head,
body.portal-app .card-head {
  border-color: var(--line) !important;
  background: rgba(23, 27, 32, 0.88) !important;
}

body.portal-app .chat-bubble.owner {
  border: 1px solid var(--orange-border) !important;
  background: var(--orange) !important;
  color: #101216 !important;
}

body.portal-app .chat-bubble.employee {
  border: 1px solid var(--line) !important;
  background: var(--panel-raised) !important;
  color: var(--strong) !important;
}

body.portal-app .chat-bubble.system,
body.portal-app .empty-state,
body.portal-app .shift-empty {
  border-color: var(--line) !important;
  background: rgba(245, 241, 232, 0.035) !important;
  color: var(--muted) !important;
}

body.portal-app .skeleton {
  background: linear-gradient(90deg, #1B1F25 20%, #252A31 50%, #1B1F25 80%) !important;
  background-size: 220% 100% !important;
}

body.portal-app .dashboard-tool.attention,
body.portal-app .activity-recovery {
  border-color: rgba(232, 184, 75, 0.42) !important;
  background: rgba(232, 184, 75, 0.08) !important;
}

body.portal-app .tool-card,
body.portal-app .settings-section {
  border-color: var(--line) !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.portal-app .tool-icon {
  border: 1px solid var(--line) !important;
  background: var(--panel-raised) !important;
  color: var(--orange-text) !important;
}

body.portal-app .tool-detail,
body.portal-app .tool-chip,
body.portal-app .tool-next-action {
  border-color: var(--line) !important;
  background: rgba(245, 241, 232, 0.035) !important;
  color: var(--body) !important;
}

body.portal-app .tool-detail-label,
body.portal-app .tool-mini-heading {
  color: var(--label) !important;
}

body.portal-app .tool-detail-value,
body.portal-app .tool-command-title {
  color: var(--strong) !important;
}

body.portal-app .voice-card {
  border-color: var(--line) !important;
  background: rgba(245, 241, 232, 0.025) !important;
  box-shadow: none !important;
}

body.portal-app .voice-card.selected {
  border-color: var(--orange) !important;
  background: rgba(255, 95, 18, 0.08) !important;
}

body.portal-app .voice-gender-option,
body.portal-app .voice-play,
body.portal-app .settings-danger {
  border-color: var(--line-strong) !important;
  background: var(--panel-raised) !important;
  color: var(--body) !important;
}

body.portal-app .voice-gender-option.selected {
  border-color: var(--orange) !important;
  background: rgba(255, 95, 18, 0.1) !important;
  color: var(--orange-text) !important;
}

body.portal-app .voice-play:hover,
body.portal-app .settings-danger:hover {
  border-color: var(--orange-border) !important;
  color: var(--orange-text) !important;
}

body.portal-app .filter-tab.active {
  border-color: var(--orange) !important;
  background: rgba(255, 95, 18, 0.1) !important;
  color: var(--orange-text) !important;
}

/* Secondary static surfaces */
body.secondary-app main,
body.secondary-app .shell,
body.secondary-app .wrap,
body.secondary-app .container {
  color: var(--strong);
}

body.secondary-app header,
body.secondary-app nav {
  border-color: var(--line) !important;
  background: rgba(16, 18, 22, 0.92) !important;
}

body.secondary-app article,
body.secondary-app section,
body.secondary-app .card,
body.secondary-app .panel {
  border-color: var(--line) !important;
}

body.secondary-app .mark,
body.secondary-app .brand-mark {
  border: 1px solid var(--orange-border) !important;
  border-radius: 8px !important;
  background: var(--orange) !important;
  color: var(--ground) !important;
  box-shadow: none !important;
}

body.secondary-app .proof-strip > span,
body.secondary-app .mode,
body.secondary-app .resume-row,
body.secondary-app .room-history li,
body.secondary-app .surface,
body.secondary-app .empty-state,
body.secondary-app .metric,
body.secondary-app .agent,
body.secondary-app .event,
body.secondary-app .truth {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--panel-subtle) !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

body.secondary-app .proof-strip > span strong,
body.secondary-app .mode strong,
body.secondary-app .room-history-copy span,
body.secondary-app .identity-block strong,
body.secondary-app .metric strong,
body.secondary-app .asset-link strong,
body.secondary-app .free-execution strong,
body.secondary-app .readout strong,
body.secondary-app .feed-item strong,
body.secondary-app .bubble strong,
body.secondary-app .empty-state h1 {
  color: var(--display) !important;
}

body.secondary-app .proof-strip > span,
body.secondary-app .mode span,
body.secondary-app .room-history-copy small,
body.secondary-app .identity-block span,
body.secondary-app .metric span,
body.secondary-app .asset-link span,
body.secondary-app .free-execution p,
body.secondary-app .readout p,
body.secondary-app .feed-item p,
body.secondary-app .empty-state p {
  color: var(--body) !important;
}

body.secondary-app .mode:hover,
body.secondary-app .mode[aria-pressed='true'] {
  border-color: var(--orange) !important;
  background: rgba(255, 95, 18, 0.1) !important;
  box-shadow: inset 0 0 0 1px var(--orange) !important;
}

body.secondary-app .nav-link,
body.secondary-app .button,
body.secondary-app .resume-action,
body.secondary-app .quick-row button,
body.secondary-app .retry-action {
  border: 1px solid var(--line-strong) !important;
  border-radius: 5px !important;
  background: rgba(245, 241, 232, 0.04) !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

body.secondary-app .primary,
body.secondary-app .button.primary,
body.secondary-app button.primary,
body.secondary-app a.primary,
body.secondary-app .free-execution button,
body.secondary-app .chat-form button {
  border: 1px solid var(--orange-border) !important;
  border-radius: 5px !important;
  background: var(--orange) !important;
  color: var(--ground) !important;
  box-shadow: 0 3px 0 var(--orange-press) !important;
}

body.secondary-app .console,
body.secondary-app .work-console {
  border-color: var(--line) !important;
  background: #0C0F13 !important;
  color: var(--ok) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

body.secondary-app .identity-block,
body.secondary-app .asset-link,
body.secondary-app .free-execution,
body.secondary-app .feed-item,
body.secondary-app .readout,
body.secondary-app .bubble,
body.secondary-app .chat-notice,
body.secondary-app .chat-form {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--strong) !important;
  box-shadow: none !important;
}

body.secondary-app .bubble.user {
  border-color: var(--orange-border) !important;
  background: rgba(255, 95, 18, 0.12) !important;
}

body.secondary-app main.wrap {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--panel-subtle) !important;
  box-shadow: none !important;
}

body.secondary-app main.wrap .mark {
  background: var(--orange) !important;
}

body.owner-app .actions a {
  border: 1px solid var(--orange-border) !important;
  border-radius: 5px !important;
  background: var(--orange) !important;
  color: var(--ground) !important;
  box-shadow: 0 3px 0 var(--orange-press) !important;
}

body.owner-app .actions button {
  border: 1px solid var(--line-strong) !important;
  border-radius: 5px !important;
  background: rgba(245, 241, 232, 0.04) !important;
  color: var(--strong) !important;
}

body.test-flight-app .employee.active,
body.test-flight-app .pill {
  border-color: var(--orange-border) !important;
  background: rgba(255, 95, 18, 0.1) !important;
  color: var(--orange-text) !important;
}

@media (max-width: 760px) {
  body.mainspring-app {
    background-size: 40px 40px !important;
  }

  body.onboarding-app .progress-inner {
    padding-inline: 16px;
  }

  body.portal-app .topbar {
    background: rgba(16, 18, 22, 0.98) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mainspring-app *,
  body.mainspring-app *::before,
  body.mainspring-app *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}