'use client'

/**
 * IwoooS — Information Security posture 入口
 * @created 2026-05-19 Codex Asia/Taipei
 */

import {
  Activity,
  AlertTriangle,
  Bell,
  Boxes,
  CheckCircle2,
  ClipboardCheck,
  Cloud,
  Code2,
  Database,
  Clock3,
  FileText,
  FileWarning,
  GitBranch,
  ListChecks,
  Lock,
  Network,
  Radar,
  Route,
  SearchCheck,
  Server,
  ShieldCheck,
  Workflow,
} from 'lucide-react'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import { useEffect, useRef, useState, type ReactNode } from 'react'
import { AppLayout } from '@/components/layout'

type PostureMetric = {
  key: string
  value: string
  tone: 'steady' | 'warn' | 'locked'
}

type FirstScreenDepthLayer = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
  href?: string
}

type ProgressEvidenceRailItem = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type EvidenceUnlockQueueItem = {
  key: string
  gate: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49RequestDraftPackageItem = {
  key: string
  template: string
  status: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49RequestDraftDetailItem = {
  key: string
  template: string
  requiredCount: string
  forbiddenCount: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseIntakeLane = {
  key: string
  template: string
  received: string
  preflight: string
  acceptance: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseIntakeNextGate = {
  key: string
  gate: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseIntakeDeliveryItem = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseMetadataIntakeField = {
  key: string
  code: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type FastProgressItem = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type VisualDashboardMetric = {
  key: string
  value: string
  arc: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type VisualDashboardNode = {
  key: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type VisualDashboardGate = {
  key: string
  gate: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type VisualExperienceMode = 'attackPath' | 'assetHeat' | 'responseFlow'
type IwoooSCommandMapMode = 'unlock' | 'scope' | 'hosts' | 'sourceControl' | 'awooop' | 'boundary'

type VisualExperienceTab = {
  key: VisualExperienceMode
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type AttackPathNode = {
  key: string
  x: number
  y: number
  tone: 'steady' | 'warn' | 'locked'
}

type AssetHeatCell = {
  key: string
  level: string
  tone: 'steady' | 'warn' | 'locked'
}

type ResponseFlowStep = {
  key: string
  step: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type ProgressAccelerationLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type ProgressHoldMovementGate = {
  key: string
  gate: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HeadlineMovementAcceptanceGate = {
  key: string
  gate: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSOperatorNextTask = {
  key: string
  step: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSStageCompletionReportItem = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type AllProductCoverageSnapshotItem = {
  key: string
  scope: string
  stateKey: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type GlobalSecurityMeshMatrixItem = {
  key: string
  code: string
  icon: typeof ShieldCheck
  coverageTone: 'steady' | 'warn' | 'locked'
  evidenceTone: 'steady' | 'warn' | 'locked'
  runtimeTone: 'steady' | 'warn' | 'locked'
}

type HostToolEvidenceChainItem = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostToolEvidenceChainStep = {
  key: string
  step: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type VibeWorkSecurityOnboardingItem = {
  key: string
  check: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type AgentBountySecurityOnboardingItem = {
  key: string
  check: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type RolloutRiskReadOnlyItem = {
  key: string
  signal: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HighValueConfigOwnerPacketItem = {
  key: string
  gate: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HighValueConfigControlCoverageItem = {
  key: string
  rank: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type DomainTlsCertbotInventoryItem = {
  key: string
  check: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type PublicGatewayPreflightItem = {
  key: string
  gate: string
  state: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSCommandMapItem = {
  key: IwoooSCommandMapMode
  metric: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSFocusDeckItem = {
  key: string
  href: string
  metric: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSExecutiveSnapshotCard = {
  key: string
  metric: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSExecutiveSnapshotAxis = {
  key: string
  value: string
  percent: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSProgressIntegritySignal = {
  key: string
  value: string
  percent: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSImmediateVisualMeshNode = {
  key: string
  metric: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyAtlasMode = 'architecture' | 'topology' | 'attackSurface' | 'evidenceFlow'
type IwoooSTopologyPathKey = 'externalToGate' | 'sourceToHost' | 'kaliToDev' | 'evidenceToGate'
type IwoooSTopologyInsightKey = 'assetContext' | 'attackPath' | 'blastRadius' | 'evidenceTimeline'
type IwoooSTopologyNodeKey =
  | 'productSurface'
  | 'sourceControl'
  | 'kali'
  | 'devHosts'
  | 'monitoring'
  | 'awooopTruth'
  | 'runtimeGate'

type IwoooSTopologyAtlasLens = {
  key: IwoooSTopologyAtlasMode
  metric: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyAtlasNode = {
  key: IwoooSTopologyNodeKey
  metric: string
  x: number
  y: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyAtlasLayer = {
  key: string
  metric: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyAtlasChart = {
  key: string
  value: string
  percent: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyDrilldownNode = {
  key: IwoooSTopologyNodeKey
  relationCode: string
  evidenceCode: string
  nextCode: string
  boundaryCode: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyPathExplorerPath = {
  key: IwoooSTopologyPathKey
  metric: string
  nodes: readonly IwoooSTopologyNodeKey[]
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSTopologyInsightItem = {
  key: IwoooSTopologyInsightKey
  metric: string
  percent: number
  lensKey: IwoooSTopologyAtlasMode
  pathKey: IwoooSTopologyPathKey
  nodes: readonly IwoooSTopologyNodeKey[]
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSDecisionRunwayStepKey =
  | 'ownerEvidence'
  | 'reviewerAcceptance'
  | 'hostWindow'
  | 'githubPrimary'
  | 'runtimeGate'

type IwoooSDecisionRunwayStep = {
  key: IwoooSDecisionRunwayStepKey
  metric: string
  progress: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSDecisionRunwayDependency = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSDecisionRunwayBoundarySignal = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type IwoooSGateRadarMode = 'visible' | 'blocker' | 'review' | 'locked'

type IwoooSGateRadarLane = {
  key: IwoooSGateRadarMode
  metric: string
  score: number
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type AwoooPReadOnlyLandingReadinessItem = {
  key: string
  item: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type AwoooPCrossSessionHandoffPacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseNextActionFocusItem = {
  key: string
  focus: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type SourceControlReadinessItem = {
  key: string
  gate: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponsePreflightCheck = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseRequestTemplate = {
  key: string
  template: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseWorkOrderItem = {
  key: string
  item: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseEnvelopeField = {
  key: string
  field: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseEnvelopePreflightCheck = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseEnvelopePreflightOutcomeLane = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseRequestDraftItem = {
  key: string
  draft: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type S49OwnerResponseDispatchFlowStep = {
  key: string
  step: string
  status: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type SecurityComplianceFrontStageDecision = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type FrontstageSecurityEntryRole = {
  key: string
  href: string
  route: string
  mode: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type Pillar = {
  key: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type Lane = {
  key: string
  mode: 'observe' | 'warn'
}

type SecuritySurface = {
  key: string
  href: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type SurfaceConnectionStatus = {
  key: string
  href: string
  state: 'embeddedBridge' | 'directBridge' | 'awooopCandidate' | 'reviewHandoffCandidate'
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type AwoooPCoverageStatus = {
  key: string
  href: string
  route: string
  stage: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type SecurityConvergenceStep = {
  key: string
  step: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseCollectionPacket = {
  key: string
  packet: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseIntakeSafetyRule = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseReviewOutcomeLane = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseHumanDecisionQueueItem = {
  key: string
  queue: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseDecisionRecordDraftGuardItem = {
  key: string
  guard: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordCandidatePreflightItem = {
  key: string
  check: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordCandidateOutcomeLane = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerHandoffPacket = {
  key: string
  packet: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerHandoffReviewItem = {
  key: string
  check: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerHandoffReviewOutcomeLane = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerReviewPreparationPacket = {
  key: string
  packet: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerReviewChecklistItem = {
  key: string
  check: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerReviewOutcomeLane = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerAssignmentPreparationPacket = {
  key: string
  packet: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerAssignmentChecklistItem = {
  key: string
  check: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerAssignmentOutcomeLane = {
  key: string
  lane: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationPacket = {
  key: string
  packet: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistItem = {
  key: string
  check: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type CoverageGroup = {
  key: string
  count: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
  surfaces: string
}

type ConflictControl = {
  key: string
  tone: 'steady' | 'warn' | 'locked'
}

type JourneyStep = {
  key: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type EvidenceReadinessItem = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostCoverageItem = {
  key: string
  address: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type KaliMaintenanceReadinessItem = {
  key: string
  value: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type KaliMaintenanceRunwayStep = {
  key: string
  step: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostActionGateItem = {
  key: string
  gate: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceReadinessItem = {
  key: string
  gate: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceCollectionStep = {
  key: string
  step: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceIntakeCheck = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceReviewHandoffPacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceReviewerChecklistItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostEvidenceReviewerOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionCandidatePacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionReviewChecklistItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordDraftPacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordDraftReviewItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordDraftReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordWriteupPacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordWriteupReviewItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordWriteupReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordFormalCandidatePacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordFormalCandidateReviewItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordFormalCandidateReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordFormalRecordQueuePacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordFormalRecordQueueReviewItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordFormalRecordQueueReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanHandoffReadinessPacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanHandoffReadinessReviewItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeLane = {
  key: string
  lane: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPacket = {
  key: string
  packet: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

type HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistItem = {
  key: string
  check: string
  icon: typeof ShieldCheck
  tone: 'steady' | 'warn' | 'locked'
}

const postureMetrics: PostureMetric[] = [
  { key: 'overall', value: '64%', tone: 'warn' },
  { key: 'framework', value: '92%', tone: 'steady' },
  { key: 'runtime', value: '40-45%', tone: 'locked' },
  { key: 'contracts', value: '36', tone: 'steady' },
  { key: 'activeGates', value: '0', tone: 'locked' },
]

const progressIntegritySignals: IwoooSProgressIntegritySignal[] = [
  { key: 'coverageVisible', value: '9 類', percent: 92, icon: Network, tone: 'steady' },
  { key: 'evidenceMissing', value: '0 / 3', percent: 0, icon: FileText, tone: 'warn' },
  { key: 'executionLocked', value: '0', percent: 0, icon: Lock, tone: 'locked' },
]

const progressIntegrityRibbonBoundaries = [
  'iwooos_progress_integrity_ribbon_first_layer=true',
  'iwooos_progress_integrity_ribbon_signal_count=3',
  'iwooos_progress_integrity_ribbon_headline_percent=64',
  'iwooos_progress_integrity_ribbon_headline_delta=3',
  'iwooos_progress_integrity_ribbon_read_only_scope_count=9',
  'iwooos_progress_integrity_ribbon_pending_evidence_gate_count=3',
  'iwooos_progress_integrity_ribbon_runtime_gate_count=0',
  'owner_response_received_count=0',
  'owner_response_accepted_count=0',
  'redacted_evidence_refs_received_count=0',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const firstScreenDepthLayers: FirstScreenDepthLayer[] = [
  { key: 'visible', value: '4', icon: ShieldCheck, tone: 'steady' },
  { key: 'advanced', value: '2', icon: SearchCheck, tone: 'warn', href: '#iwooos-decision-gate-visuals' },
  { key: 'ledger', value: '4', icon: ListChecks, tone: 'warn', href: '#iwooos-scope-evidence-visuals' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
]

const firstScreenDepthBoundaries = [
  'iwooos_first_screen_depth_map_visible_layer_count=4',
  'iwooos_first_screen_depth_map_advanced_group_count=2',
  'iwooos_first_screen_depth_map_ledger_group_count=4',
  'iwooos_first_screen_depth_map_runtime_gate_count=0',
  'iwooos_first_screen_depth_map_advanced_default_visible=false',
  'iwooos_first_screen_depth_map_scope_evidence_default_visible=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const progressEvidenceRailItems: ProgressEvidenceRailItem[] = [
  { key: 'ownerResponses', value: '0/4', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidence', value: '0', icon: FileText, tone: 'warn' },
  { key: 'reviewAcceptance', value: '0', icon: CheckCircle2, tone: 'warn' },
  { key: 'githubPrimary', value: '0/10', icon: GitBranch, tone: 'locked' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
]

const progressEvidenceRailBoundaries = [
  'iwooos_progress_evidence_rail_owner_response_received_count=0',
  'iwooos_progress_evidence_rail_owner_response_accepted_count=0',
  'iwooos_progress_evidence_rail_redacted_evidence_count=0',
  'iwooos_progress_evidence_rail_review_acceptance_count=0',
  'iwooos_progress_evidence_rail_github_primary_ready_count=0',
  'iwooos_progress_evidence_rail_runtime_gate_count=0',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const evidenceUnlockQueueItems: EvidenceUnlockQueueItem[] = [
  { key: 'giteaOwner', gate: 'S4.9', value: '草稿 5', icon: ClipboardCheck, tone: 'warn' },
  { key: 'githubTarget', gate: 'S4.10', value: '0/10', icon: GitBranch, tone: 'locked' },
  { key: 'refTruth', gate: 'S4.11', value: '0/5', icon: Route, tone: 'warn' },
  { key: 'workflowSecrets', gate: 'S4.12', value: '0/5', icon: Workflow, tone: 'locked' },
]

const evidenceUnlockQueueBoundaries = [
  'iwooos_evidence_unlock_queue_item_count=4',
  'iwooos_evidence_unlock_queue_s4_9_request_draft_template_count=5',
  'iwooos_evidence_unlock_queue_s4_9_request_draft_ready_count=1',
  'iwooos_evidence_unlock_queue_request_sent_count=0',
  'iwooos_evidence_unlock_queue_received_count=0',
  'iwooos_evidence_unlock_queue_accepted_count=0',
  'iwooos_evidence_unlock_queue_github_primary_ready_count=0',
  'iwooos_evidence_unlock_queue_runtime_gate_count=0',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const s49RequestDraftPackageItems: S49RequestDraftPackageItem[] = [
  { key: 'publicGap', template: 'D1', status: '草稿', icon: Radar, tone: 'warn' },
  { key: 'namespaceIdentity', template: 'D2', status: '草稿', icon: Network, tone: 'warn' },
  { key: 'adjacentScope', template: 'D3', status: '草稿', icon: Server, tone: 'warn' },
  { key: 'canonicalOwner', template: 'D4', status: '草稿', icon: GitBranch, tone: 'warn' },
  { key: 'legacyDisposition', template: 'D5', status: '草稿', icon: FileText, tone: 'warn' },
]

const s49RequestDraftPackageBoundaries = [
  's4_9_owner_attestation_request_draft_frontstage_card_count=5',
  's4_9_owner_attestation_request_draft_template_ready_count=5',
  's4_9_owner_attestation_request_sent=false',
  's4_9_owner_attestation_owner_response_received_count=0',
  's4_9_owner_attestation_owner_response_accepted_count=0',
  's4_9_owner_attestation_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const s49RequestDraftDetailItems: S49RequestDraftDetailItem[] = [
  { key: 'publicGap', template: 'D1', requiredCount: '6 欄', forbiddenCount: '10 禁', icon: Radar, tone: 'warn' },
  { key: 'namespaceIdentity', template: 'D2', requiredCount: '6 欄', forbiddenCount: '10 禁', icon: Network, tone: 'warn' },
  { key: 'adjacentScope', template: 'D3', requiredCount: '6 欄', forbiddenCount: '10 禁', icon: Server, tone: 'warn' },
  { key: 'canonicalOwner', template: 'D4', requiredCount: '6 欄', forbiddenCount: '10 禁', icon: GitBranch, tone: 'warn' },
  { key: 'legacyDisposition', template: 'D5', requiredCount: '6 欄', forbiddenCount: '10 禁', icon: FileWarning, tone: 'warn' },
]

const s49RequestDraftDetailBoundaries = [
  's4_9_owner_attestation_request_draft_detail_frontstage_row_count=5',
  's4_9_owner_attestation_request_draft_detail_required_field_total=30',
  's4_9_owner_attestation_request_draft_detail_forbidden_action_count=10',
  's4_9_owner_attestation_request_sent=false',
  's4_9_owner_attestation_owner_response_received_count=0',
  's4_9_owner_attestation_owner_response_accepted_count=0',
  's4_9_owner_attestation_runtime_gate_opened=false',
  'redacted_evidence_refs_only=true',
  'secret_plaintext_collection_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const s49OwnerResponseIntakeLanes: S49OwnerResponseIntakeLane[] = [
  { key: 'publicGap', template: 'D1', received: '未收', preflight: '未預檢', acceptance: '未接受', icon: Radar, tone: 'warn' },
  { key: 'namespaceIdentity', template: 'D2', received: '未收', preflight: '未預檢', acceptance: '未接受', icon: Network, tone: 'warn' },
  { key: 'adjacentScope', template: 'D3', received: '未收', preflight: '未預檢', acceptance: '未接受', icon: Server, tone: 'warn' },
  { key: 'canonicalOwner', template: 'D4', received: '未收', preflight: '未預檢', acceptance: '未接受', icon: GitBranch, tone: 'warn' },
  { key: 'legacyDisposition', template: 'D5', received: '未收', preflight: '未預檢', acceptance: '未接受', icon: FileWarning, tone: 'locked' },
]

const s49OwnerResponseIntakeNextGates: S49OwnerResponseIntakeNextGate[] = [
  { key: 'redactedOwnerResponse', gate: 'G1', value: '等待', icon: ClipboardCheck, tone: 'warn' },
  { key: 'preflightChecks', gate: 'G2', value: '0 / 6', icon: ListChecks, tone: 'locked' },
  { key: 'humanAcceptance', gate: 'G3', value: '0 / 5', icon: ShieldCheck, tone: 'locked' },
]

const s49OwnerResponseIntakeBlockerFocus = {
  key: 'currentBlocker',
  gate: 'G1',
  value: '0 / 3',
  icon: Clock3,
  tone: 'warn' as const,
}

const s49OwnerResponseIntakeDeliveryItems: S49OwnerResponseIntakeDeliveryItem[] = [
  { key: 'ownerDecision', value: '待補', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidence', value: '0', icon: FileText, tone: 'locked' },
  { key: 'reviewTrail', value: '0', icon: SearchCheck, tone: 'locked' },
]

const s49OwnerResponseMetadataIntakeFields: S49OwnerResponseMetadataIntakeField[] = [
  { key: 'ownerRoleTeam', code: 'F1', state: '0', icon: Bell, tone: 'warn' },
  { key: 'decision', code: 'F2', state: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'decisionReason', code: 'F3', state: '0', icon: FileText, tone: 'warn' },
  { key: 'affectedScope', code: 'F4', state: '0', icon: Radar, tone: 'warn' },
  { key: 'redactedEvidenceRefs', code: 'F5', state: '0', icon: SearchCheck, tone: 'locked' },
  { key: 'followupOwner', code: 'F6', state: '0', icon: ShieldCheck, tone: 'locked' },
]

const s49OwnerResponseIntakeBoundaries = [
  's4_9_owner_response_intake_frontstage_lane_count=5',
  's4_9_owner_response_intake_next_gate_count=3',
  's4_9_owner_response_intake_next_gate_passed_count=0',
  's4_9_owner_response_intake_blocker_focus_count=1',
  's4_9_owner_response_intake_current_blocker_gate=G1',
  's4_9_owner_response_intake_next_gate_completion_count=0',
  's4_9_owner_response_intake_next_gate_total=3',
  's4_9_owner_response_intake_delivery_card_count=3',
  's4_9_owner_response_intake_delivery_card_completed_count=0',
  's4_9_owner_response_intake_delivery_raw_payload_allowed=false',
  's4_9_owner_response_intake_received_count=0',
  's4_9_owner_response_intake_preflight_passed_count=0',
  's4_9_owner_response_intake_accepted_count=0',
  's4_9_owner_response_intake_rejected_count=0',
  's4_9_owner_response_intake_runtime_gate_count=0',
  's4_9_owner_response_intake_source_bound=true',
  's4_9_owner_response_intake_handoff_queue_count=5',
  's4_9_owner_response_intake_handoff_queue_ready_count=0',
  's4_9_owner_response_intake_handoff_queue_received_count=0',
  's4_9_owner_response_intake_handoff_queue_accepted_count=0',
  's4_9_owner_response_intake_handoff_queue_runtime_gate_count=0',
  's4_9_owner_response_intake_handoff_queue_raw_payload_allowed=false',
  's4_9_owner_response_intake_handoff_queue_action_buttons_allowed=false',
  's4_9_owner_response_metadata_intake_field_count=6',
  's4_9_owner_response_metadata_intake_required_count=6',
  's4_9_owner_response_metadata_intake_filled_count=0',
  's4_9_owner_response_metadata_intake_received_count=0',
  's4_9_owner_response_metadata_intake_accepted_count=0',
  's4_9_owner_response_metadata_intake_runtime_gate_count=0',
  's4_9_owner_response_metadata_intake_redacted_ref_required=true',
  's4_9_owner_response_metadata_intake_raw_payload_allowed=false',
  's4_9_owner_response_metadata_intake_secret_plaintext_allowed=false',
  's4_9_owner_response_metadata_intake_action_buttons_allowed=false',
  's4_9_owner_response_intake_runtime_gate_opened=false',
  's4_9_owner_response_intake_action_buttons_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
]

const fastProgressItems: FastProgressItem[] = [
  { key: 'done', value: '7 頁', icon: CheckCircle2, tone: 'steady' },
  { key: 'kali112', value: '只讀通過', icon: ShieldCheck, tone: 'warn' },
  { key: 'allProducts', value: '7 / 7', icon: Radar, tone: 'steady' },
  { key: 'runtime', value: '閘門 0', icon: Lock, tone: 'locked' },
]

const visualDashboardMetrics: VisualDashboardMetric[] = [
  { key: 'overall', value: '64%', arc: 230, icon: Activity, tone: 'warn' },
  { key: 'framework', value: '92%', arc: 331, icon: ShieldCheck, tone: 'steady' },
  { key: 'runtime', value: '45%', arc: 162, icon: Lock, tone: 'locked' },
]

const visualDashboardNodes: VisualDashboardNode[] = [
  { key: 'awoooiCore', state: 'OK', icon: ShieldCheck, tone: 'steady' },
  { key: 'websites', state: '7/7', icon: Radar, tone: 'steady' },
  { key: 'vibeWork', state: '新專案', icon: FileText, tone: 'warn' },
  { key: 'kali112', state: '112', icon: Activity, tone: 'warn' },
  { key: 'devHosts', state: '2', icon: ListChecks, tone: 'warn' },
  { key: 'githubPrimary', state: '0', icon: GitBranch, tone: 'locked' },
  { key: 'runtimeGate', state: '0', icon: Lock, tone: 'locked' },
]

const visualDashboardGates: VisualDashboardGate[] = [
  { key: 'kaliMaintenance', gate: 'S3.4', value: '1994', icon: FileWarning, tone: 'warn' },
  { key: 'ownerResponse', gate: 'S4.9', value: '0/5', icon: ClipboardCheck, tone: 'warn' },
  { key: 'githubPrimary', gate: 'S4.10', value: '0', icon: GitBranch, tone: 'locked' },
  { key: 'runtimeExecution', gate: '閘門 0', value: '0', icon: Lock, tone: 'locked' },
]

const visualExperienceTabs: VisualExperienceTab[] = [
  { key: 'attackPath', icon: Radar, tone: 'warn' },
  { key: 'assetHeat', icon: Activity, tone: 'steady' },
  { key: 'responseFlow', icon: ClipboardCheck, tone: 'locked' },
]

const attackPathNodes: AttackPathNode[] = [
  { key: 'publicWeb', x: 58, y: 54, tone: 'steady' },
  { key: 'apiRuntime', x: 206, y: 108, tone: 'warn' },
  { key: 'projectSource', x: 344, y: 64, tone: 'warn' },
  { key: 'devHosts', x: 474, y: 130, tone: 'warn' },
  { key: 'kali112', x: 360, y: 204, tone: 'warn' },
  { key: 'runtimeGate', x: 556, y: 214, tone: 'locked' },
]

const assetHeatCells: AssetHeatCell[] = [
  { key: 'awoooi', level: '低', tone: 'steady' },
  { key: 'awooop', level: '低', tone: 'steady' },
  { key: 'iwooos', level: '低', tone: 'steady' },
  { key: 'websites', level: '中', tone: 'warn' },
  { key: 'vibeWork', level: '待', tone: 'warn' },
  { key: 'kali112', level: '中', tone: 'warn' },
  { key: 'devHosts', level: '中', tone: 'warn' },
  { key: 'githubPrimary', level: '待', tone: 'locked' },
  { key: 'runtimeActions', level: '鎖', tone: 'locked' },
]

const responseFlowSteps: ResponseFlowStep[] = [
  { key: 'observe', step: '01', icon: SearchCheck, tone: 'steady' },
  { key: 'triage', step: '02', icon: ListChecks, tone: 'warn' },
  { key: 'evidence', step: '03', icon: FileText, tone: 'warn' },
  { key: 'approval', step: '04', icon: ClipboardCheck, tone: 'warn' },
  { key: 'runtime', step: '05', icon: Lock, tone: 'locked' },
]

const allProductCoverageSnapshotSummary = [
  { key: 'scopeCount', value: '8', icon: ListChecks, tone: 'steady' },
  { key: 'readOnlyScopes', value: '8', icon: ShieldCheck, tone: 'steady' },
  { key: 'runtimeReady', value: '0', icon: Lock, tone: 'locked' },
  { key: 'nextGate', value: 'S4.9', icon: ClipboardCheck, tone: 'warn' },
] as const

const allProductCoverageSnapshotItems: AllProductCoverageSnapshotItem[] = [
  { key: 'awoooiCore', scope: 'P1', stateKey: 'connected', icon: ShieldCheck, tone: 'steady' },
  { key: 'websites', scope: 'P2', stateKey: 'visible', icon: SearchCheck, tone: 'steady' },
  { key: 'sourceControl', scope: 'P3', stateKey: 'waitingEvidence', icon: GitBranch, tone: 'warn' },
  { key: 'hosts', scope: 'P4', stateKey: 'approvalRequired', icon: Activity, tone: 'warn' },
  { key: 'toolsMonitoring', scope: 'P5', stateKey: 'readOnlyFirst', icon: Radar, tone: 'steady' },
  { key: 'vibeWork', scope: 'P6', stateKey: 'newProjectReadOnly', icon: FileText, tone: 'warn' },
  { key: 'agentBountyProtocol', scope: 'P7', stateKey: 'newProjectReadOnly', icon: Workflow, tone: 'warn' },
  { key: 'futureProducts', scope: 'P8', stateKey: 'templateReady', icon: ListChecks, tone: 'warn' },
]

const allProductCoverageSnapshotBoundaries = [
  'iwooos_all_product_coverage_snapshot_scope_count=8',
  'iwooos_all_product_coverage_snapshot_read_only_count=8',
  'iwooos_all_product_coverage_snapshot_runtime_ready_count=0',
  'iwooos_all_product_coverage_snapshot_default_summary_mode=compact_first',
  'iwooos_all_product_coverage_snapshot_detail_ledger_collapsed=true',
  'iwooos_all_product_coverage_snapshot_next_gate=s4_9_owner_response_accepted',
  'vibework_project_read_only_in_scope=true',
  'vibework_runtime_ready=false',
  'agent_bounty_project_read_only_in_scope=true',
  'agent_bounty_runtime_ready=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const operatorNextTasks: IwoooSOperatorNextTask[] = [
  { key: 's49OwnerResponse', step: 'N1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidencePacket', step: 'N2', icon: FileText, tone: 'warn' },
  { key: 'runtimeGatePreflight', step: 'N3', icon: Lock, tone: 'locked' },
  { key: 'githubPrimaryReadiness', step: 'N4', icon: GitBranch, tone: 'warn' },
]

const stageCompletionReportItems: IwoooSStageCompletionReportItem[] = [
  { key: 'stageClosed', value: '完成', icon: CheckCircle2, tone: 'steady' },
  { key: 'productionEvidence', value: 'deploy marker', icon: Radar, tone: 'steady' },
  { key: 'progressBoundary', value: '64%', icon: Activity, tone: 'warn' },
  { key: 'runtimeBoundary', value: '閘門 0', icon: Lock, tone: 'locked' },
]

const progressAccelerationLanes: ProgressAccelerationLane[] = [
  { key: 'ownerResponses', lane: 'PAL1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedIngestion', lane: 'PAL2', icon: FileText, tone: 'warn' },
  { key: 'runtimeGate', lane: 'PAL3', icon: Lock, tone: 'locked' },
  { key: 'githubReadiness', lane: 'PAL4', icon: GitBranch, tone: 'warn' },
  { key: 'awooopLanding', lane: 'PAL5', icon: Radar, tone: 'steady' },
  { key: 'cadenceCompression', lane: 'PAL6', icon: CheckCircle2, tone: 'steady' },
]

const progressHoldMovementGates: ProgressHoldMovementGate[] = [
  { key: 'ownerResponseAccepted', gate: 'G1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedPayloadIngested', gate: 'G2', icon: FileText, tone: 'warn' },
  { key: 'activeRuntimeGate', gate: 'G3', icon: Lock, tone: 'locked' },
  { key: 'githubPrimaryReady', gate: 'G4', icon: GitBranch, tone: 'warn' },
  { key: 'awooopReadOnlyLanding', gate: 'G5', icon: Radar, tone: 'steady' },
]

const headlineMovementAcceptanceGates: HeadlineMovementAcceptanceGate[] = [
  { key: 's49OwnerResponseAccepted', gate: 'G1', value: '0 / 5', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedPayloadAccepted', gate: 'G2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'runtimeGateApproved', gate: 'G3', value: '0', icon: Lock, tone: 'locked' },
  { key: 'githubPrimaryEvidenceReady', gate: 'G4', value: '0', icon: GitBranch, tone: 'warn' },
  { key: 'awooopProductionLandingProof', gate: 'G5', value: '1', icon: Radar, tone: 'steady' },
  { key: 'kali112ReadOnlyProof', gate: 'G6', value: '1', icon: ShieldCheck, tone: 'steady' },
  { key: 'nextHeadlineReviewRecord', gate: 'R1', value: '已記錄', icon: Clock3, tone: 'steady' },
]

const headlineMovementAcceptanceGateBoundaries = [
  'headline_percent_after_this_stage=64',
  'headline_movement_signal_count=2',
  'awooop_read_only_production_landing_evidence_count=1',
  'kali_112_read_only_production_evidence_count=1',
  'owner_response_received_count=0',
  'owner_response_accepted_count=0',
  'owner_response_acceptance_gate_open=false',
  'redacted_payload_ingested=false',
  'active_runtime_gate_count=0',
  'github_primary_ready_count=0',
  'production_landing_enabled=true',
  'execution_router_linked=false',
  'progress_review_authorized=true',
  'runtime_execution_authorized=false',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const awooopReadOnlyLandingReadinessItems: AwoooPReadOnlyLandingReadinessItem[] = [
  { key: 'rollupSnapshotReadable', item: 'L1', icon: FileText, tone: 'steady' },
  { key: 'evidenceRefsReadable', item: 'L2', icon: SearchCheck, tone: 'steady' },
  { key: 'guardChecksKnown', item: 'L3', icon: ShieldCheck, tone: 'steady' },
  { key: 'routeGroupsKnown', item: 'L4', icon: Radar, tone: 'warn' },
  { key: 'forbiddenOutputsLocked', item: 'L5', icon: Lock, tone: 'locked' },
  { key: 'productionHandoffPending', item: 'L6', icon: Clock3, tone: 'locked' },
]

const awooopCrossSessionHandoffPackets: AwoooPCrossSessionHandoffPacket[] = [
  { key: 'branchAndPrAnchor', packet: 'H1', icon: GitBranch, tone: 'steady' },
  { key: 'progressSemantics', packet: 'H2', icon: Radar, tone: 'warn' },
  { key: 'requiredGuardCommands', packet: 'H3', icon: ShieldCheck, tone: 'steady' },
  { key: 'forbiddenRuntimeActions', packet: 'H4', icon: Lock, tone: 'locked' },
  { key: 'awooopReadOnlyInputs', packet: 'H5', icon: FileText, tone: 'steady' },
  { key: 'nextCoordinationGate', packet: 'H6', icon: ClipboardCheck, tone: 'warn' },
]

const ownerResponseNextActionFocusItems: OwnerResponseNextActionFocusItem[] = [
  { key: 'giteaOwnerAttestation', focus: 'S4.9', icon: ClipboardCheck, tone: 'warn' },
  { key: 'githubTargetOwnerDecision', focus: 'S4.10', icon: GitBranch, tone: 'warn' },
  { key: 'refsTruthOwnerResponse', focus: 'S4.11', icon: SearchCheck, tone: 'warn' },
  { key: 'workflowSecretOwnerResponse', focus: 'S4.12', icon: Lock, tone: 'locked' },
]

const sourceControlReadinessItems: SourceControlReadinessItem[] = [
  { key: 'candidateRepos', gate: 'S4.0', value: '8 / 7', icon: GitBranch, tone: 'warn' },
  { key: 'primaryReady', gate: 'S4.0', value: '0', icon: Lock, tone: 'locked' },
  { key: 'ownerResponses', gate: 'S4.13', value: '0 / 22', icon: ClipboardCheck, tone: 'warn' },
  { key: 'refsTruth', gate: 'S4.11', value: '0', icon: SearchCheck, tone: 'locked' },
  { key: 'workflowSecrets', gate: 'S4.12', value: '0 / 7', icon: FileWarning, tone: 'warn' },
  { key: 'rollbackAdr', gate: 'S4.4', value: '0', icon: FileText, tone: 'locked' },
]

const s49OwnerResponsePreflightChecks: S49OwnerResponsePreflightCheck[] = [
  { key: 'knownAttestationItem', check: 'P1', icon: SearchCheck, tone: 'warn' },
  { key: 'requiredOwnerFields', check: 'P2', icon: ListChecks, tone: 'warn' },
  { key: 'allowedDecision', check: 'P3', icon: CheckCircle2, tone: 'warn' },
  { key: 'redactedEvidenceOnly', check: 'P4', icon: Lock, tone: 'locked' },
  { key: 'noExecutionRequest', check: 'P5', icon: AlertTriangle, tone: 'locked' },
  { key: 'allFiveItemsBeforeAccepted', check: 'P6', icon: ShieldCheck, tone: 'locked' },
]

const s49OwnerResponseRequestTemplates: S49OwnerResponseRequestTemplate[] = [
  { key: 'publicOnlyVsLocalGiteaGap', template: 'T1', icon: GitBranch, tone: 'warn' },
  { key: 'orgUserEndpointIdentity', template: 'T2', icon: SearchCheck, tone: 'warn' },
  { key: 'internal110AdjacentScope', template: 'T3', icon: Radar, tone: 'warn' },
  { key: 'repoOwnerCanonicalScope', template: 'T4', icon: ClipboardCheck, tone: 'warn' },
  { key: 'legacyOrInaccessibleDisposition', template: 'T5', icon: FileWarning, tone: 'locked' },
]

const s49OwnerResponseWorkOrderItems: S49OwnerResponseWorkOrderItem[] = [
  { key: 'scopeGapResponse', item: 'W1', value: '未收', icon: GitBranch, tone: 'warn' },
  { key: 'endpointIdentityResponse', item: 'W2', value: '未收', icon: SearchCheck, tone: 'warn' },
  { key: 'adjacentSourceResponse', item: 'W3', value: '未收', icon: Radar, tone: 'warn' },
  { key: 'canonicalOwnerResponse', item: 'W4', value: '未收', icon: ClipboardCheck, tone: 'warn' },
  { key: 'legacyDispositionResponse', item: 'W5', value: '未收', icon: FileWarning, tone: 'locked' },
]

const s49OwnerResponseWorkOrderBoundaries = [
  's4_9_owner_response_work_order_item_count=5',
  's4_9_owner_response_required_field_count=6',
  's4_9_owner_response_received_count=0',
  's4_9_owner_response_accepted_count=0',
  's4_9_owner_response_rejected_count=0',
  's4_9_owner_response_request_sent=false',
  's4_9_owner_response_intake_open=false',
  'owner_response_acceptance_gate_open=false',
  'audit_events_emitted=0',
  'progress_review_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const s49OwnerResponseEnvelopeFields: S49OwnerResponseEnvelopeField[] = [
  { key: 'ownerRoleTeam', field: 'F1', value: '空白', icon: ClipboardCheck, tone: 'warn' },
  { key: 'decision', field: 'F2', value: '空白', icon: CheckCircle2, tone: 'warn' },
  { key: 'decisionReason', field: 'F3', value: '空白', icon: FileText, tone: 'warn' },
  { key: 'affectedScope', field: 'F4', value: '空白', icon: Radar, tone: 'warn' },
  { key: 'redactedEvidenceRefs', field: 'F5', value: '空白', icon: Lock, tone: 'locked' },
  { key: 'followupOwner', field: 'F6', value: '空白', icon: SearchCheck, tone: 'warn' },
]

const s49OwnerResponseEnvelopeBoundaries = [
  's4_9_owner_response_envelope_field_count=6',
  's4_9_owner_response_envelope_filled_count=0',
  's4_9_owner_response_envelope_submitted_count=0',
  's4_9_owner_response_envelope_accepted_count=0',
  's4_9_owner_response_envelope_rejected_count=0',
  's4_9_owner_response_request_sent=false',
  's4_9_owner_response_received_count=0',
  's4_9_owner_response_accepted_count=0',
  'owner_response_acceptance_gate_open=false',
  'audit_events_emitted=0',
  'progress_review_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const s49OwnerResponseEnvelopePreflightChecks: S49OwnerResponseEnvelopePreflightCheck[] = [
  { key: 'fieldCompleteness', check: 'C1', icon: ListChecks, tone: 'warn' },
  { key: 'allowedDisposition', check: 'C2', icon: CheckCircle2, tone: 'warn' },
  { key: 'redactedEvidence', check: 'C3', icon: Lock, tone: 'locked' },
  { key: 'scopeTraceability', check: 'C4', icon: Radar, tone: 'warn' },
  { key: 'mutationRequestRejected', check: 'C5', icon: FileWarning, tone: 'locked' },
  { key: 'followupOwnerTrace', check: 'C6', icon: SearchCheck, tone: 'warn' },
]

const s49OwnerResponseEnvelopePreflightBoundaries = [
  's4_9_owner_response_envelope_preflight_check_count=6',
  's4_9_owner_response_envelope_preflight_passed_count=0',
  's4_9_owner_response_envelope_ready_to_submit_count=0',
  's4_9_owner_response_envelope_submitted_count=0',
  's4_9_owner_response_envelope_accepted_count=0',
  's4_9_owner_response_request_sent=false',
  's4_9_owner_response_received_count=0',
  's4_9_owner_response_accepted_count=0',
  'owner_response_acceptance_gate_open=false',
  'audit_events_emitted=0',
  'progress_review_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const s49OwnerResponseEnvelopePreflightOutcomeLanes: S49OwnerResponseEnvelopePreflightOutcomeLane[] = [
  { key: 'keepEnvelopeWaiting', lane: 'L1', value: '等待', icon: Clock3, tone: 'warn' },
  { key: 'requestFieldCompletion', lane: 'L2', value: '補欄', icon: ListChecks, tone: 'warn' },
  { key: 'requestDispositionCorrection', lane: 'L3', value: '修正', icon: CheckCircle2, tone: 'warn' },
  { key: 'quarantineSensitiveEvidence', lane: 'L4', value: '隔離', icon: Lock, tone: 'locked' },
  { key: 'requestScopeCorrection', lane: 'L5', value: '補範圍', icon: Radar, tone: 'warn' },
  { key: 'rejectMutationRequest', lane: 'L6', value: '拒收', icon: FileWarning, tone: 'locked' },
  { key: 'keepFollowupOwnerWaiting', lane: 'L7', value: '等待', icon: SearchCheck, tone: 'warn' },
]

const s49OwnerResponseEnvelopePreflightOutcomeBoundaries = [
  's4_9_owner_response_envelope_preflight_outcome_lane_count=7',
  's4_9_owner_response_envelope_preflight_ready_for_intake_count=0',
  's4_9_owner_response_envelope_preflight_quarantined_count=0',
  's4_9_owner_response_envelope_preflight_rejected_count=0',
  's4_9_owner_response_envelope_submitted_count=0',
  's4_9_owner_response_envelope_accepted_count=0',
  's4_9_owner_response_request_sent=false',
  's4_9_owner_response_received_count=0',
  's4_9_owner_response_accepted_count=0',
  'owner_response_acceptance_gate_open=false',
  'audit_events_emitted=0',
  'progress_review_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const s49OwnerResponseRequestDraftItems: S49OwnerResponseRequestDraftItem[] = [
  { key: 'scopeMappingDraft', draft: 'D1', value: '草稿', icon: Radar, tone: 'warn' },
  { key: 'ownerRecipientDraft', draft: 'D2', value: '待補', icon: SearchCheck, tone: 'warn' },
  { key: 'redactedEvidenceDraft', draft: 'D3', value: '只讀', icon: Lock, tone: 'locked' },
  { key: 'noMutationClauseDraft', draft: 'D4', value: '鎖定', icon: FileWarning, tone: 'locked' },
  { key: 'auditTemplateDraft', draft: 'D5', value: '範本', icon: FileText, tone: 'warn' },
  { key: 'manualDispatchGateDraft', draft: 'D6', value: '未開', icon: Bell, tone: 'locked' },
]

const s49OwnerResponseRequestDraftBoundaries = [
  's4_9_owner_response_request_draft_item_count=6',
  's4_9_owner_response_request_draft_ready_count=0',
  's4_9_owner_response_request_dispatch_authorized=false',
  's4_9_owner_response_request_sent=false',
  's4_9_owner_response_request_sent_count=0',
  's4_9_owner_response_request_recipients_confirmed_count=0',
  's4_9_owner_response_request_audit_event_draft_count=1',
  's4_9_owner_response_request_audit_events_emitted=0',
  's4_9_owner_response_received_count=0',
  's4_9_owner_response_accepted_count=0',
  'owner_response_acceptance_gate_open=false',
  'audit_events_emitted=0',
  'progress_review_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const s49OwnerResponseDispatchFlowSteps: S49OwnerResponseDispatchFlowStep[] = [
  { key: 'workOrder', step: '01', status: '可讀', icon: ClipboardCheck, tone: 'warn' },
  { key: 'envelope', step: '02', status: '空白', icon: FileText, tone: 'warn' },
  { key: 'preflight', step: '03', status: '未通過', icon: ListChecks, tone: 'locked' },
  { key: 'outcome', step: '04', status: '待分流', icon: SearchCheck, tone: 'warn' },
  { key: 'requestDraft', step: '05', status: '草稿', icon: Bell, tone: 'warn' },
  { key: 'manualDispatchGate', step: '06', status: '未開', icon: Lock, tone: 'locked' },
]

const s49OwnerResponseDispatchFlowBoundaries = [
  's4_9_owner_response_dispatch_flow_step_count=6',
  's4_9_owner_response_dispatch_flow_current_step=request_draft',
  's4_9_owner_response_dispatch_flow_completed_count=0',
  's4_9_owner_response_dispatch_flow_blocked_count=0',
  's4_9_owner_response_request_sent=false',
  's4_9_owner_response_request_sent_count=0',
  's4_9_owner_response_received_count=0',
  's4_9_owner_response_accepted_count=0',
  's4_9_owner_response_request_dispatch_authorized=false',
  'owner_response_acceptance_gate_open=false',
  'audit_events_emitted=0',
  'progress_review_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const securityComplianceFrontStageDecisions: SecurityComplianceFrontStageDecision[] = [
  { key: 'routePreserved', value: '保留', icon: ShieldCheck, tone: 'steady' },
  { key: 'frontStageBridge', value: '整合', icon: GitBranch, tone: 'warn' },
  { key: 'singleSecurityNarrative', value: '收斂', icon: SearchCheck, tone: 'steady' },
  { key: 'runtimeControls', value: '0', icon: Lock, tone: 'locked' },
]

const securityComplianceFrontStageBoundaries = [
  'security_compliance_route_preserved=true',
  'security_compliance_removed=false',
  'security_compliance_integration_mode=iwooos_frontstage_bridge',
  'iwooos_authoritative_security_entry=true',
  'security_compliance_tabs_preserved=true',
  'security_compliance_runtime_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const frontstageSecurityEntryRoles: FrontstageSecurityEntryRole[] = [
  { key: 'iwooosOverview', href: '/iwooos', route: 'IwoooS', mode: '總覽', icon: ShieldCheck, tone: 'steady' },
  { key: 'securityComplianceHub', href: '/security-compliance', route: '安全合規', mode: '前台', icon: Radar, tone: 'warn' },
  { key: 'securityMonitor', href: '/security', route: '安全', mode: '事件', icon: Activity, tone: 'warn' },
  { key: 'complianceStats', href: '/compliance', route: '合規', mode: '統計', icon: ClipboardCheck, tone: 'steady' },
  { key: 'awooopApprovals', href: '/awooop/approvals', route: 'AwoooP', mode: '人控', icon: Lock, tone: 'locked' },
]

const frontstageSecurityEntryRoleBoundaries = [
  'frontstage_security_entry_role_count=5',
  'frontstage_security_primary_entry=iwooos',
  'frontstage_security_familiar_entry=security_compliance',
  'frontstage_security_execution_entry_count=0',
  'frontstage_security_links_read_only=true',
  'frontstage_security_operator_confusion_reduction=true',
  'frontstage_security_action_buttons_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const iwooosLowFrictionRolloutPhases = [
  { key: 'observe', phase: '01', state: '現在', icon: Radar, tone: 'warn' },
  { key: 'evidence', phase: '02', state: '補證', icon: ClipboardCheck, tone: 'steady' },
  { key: 'humanReview', phase: '03', state: '人控', icon: CheckCircle2, tone: 'steady' },
  { key: 'runtimeGate', phase: '04', state: '批准後', icon: ShieldCheck, tone: 'locked' },
  { key: 'tightening', phase: '05', state: '收嚴', icon: Lock, tone: 'locked' },
] as const

const iwooosLowFrictionRolloutBoundaries = [
  'iwooos_rollout_phase_count=5',
  'iwooos_rollout_current_phase=observe_first',
  'iwooos_rollout_frontstage_source=security_compliance_s2_110',
  'iwooos_rollout_runtime_phase_enabled=false',
  'iwooos_rollout_enforcement_enabled=false',
  'iwooos_rollout_action_buttons_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosLowFrictionNextActionItems = [
  { key: 'observeInventory', label: '可做', icon: SearchCheck, tone: 'warn' },
  { key: 'evidencePacket', label: '可做', icon: ClipboardCheck, tone: 'steady' },
  { key: 'humanReviewPrep', label: '準備', icon: CheckCircle2, tone: 'steady' },
  { key: 'runtimeClosed', label: '禁止', icon: Lock, tone: 'locked' },
] as const

const iwooosLowFrictionNextActionBoundaries = [
  'iwooos_next_action_item_count=4',
  'iwooos_next_action_allowed_mode=observe_and_evidence_only',
  'iwooos_next_action_runtime_gate_required=true',
  'iwooos_next_action_scan_authorized=false',
  'iwooos_next_action_host_change_authorized=false',
  'iwooos_next_action_deploy_authorized=false',
  'iwooos_next_action_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProgressMovementSignals = [
  { key: 'ownerResponse', value: '0/5', state: '待收件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidence', value: 'false', state: '未匯入', icon: FileText, tone: 'warn' },
  { key: 'runtimeGate', value: '0', state: '未開閘', icon: Lock, tone: 'locked' },
  { key: 'sourceControl', value: '0', state: '未就緒', icon: GitBranch, tone: 'locked' },
  { key: 'awooopLanding', value: '1', state: '已驗證', icon: CheckCircle2, tone: 'steady' },
  { key: 'kali112ReadOnly', value: '1', state: '只讀證據', icon: ShieldCheck, tone: 'steady' },
] as const

const iwooosProgressMovementSignalBoundaries = [
  'iwooos_progress_movement_signal_count=6',
  'iwooos_progress_current_headline_percent=64',
  'iwooos_progress_owner_response_accepted_count=0',
  'iwooos_progress_redacted_payload_ingested=false',
  'iwooos_progress_active_runtime_gate_count=0',
  'iwooos_progress_github_primary_ready_count=0',
  'iwooos_progress_awooop_landing_evidence_count=1',
  'iwooos_progress_kali_112_read_only_evidence_count=1',
  'iwooos_progress_review_authorized=true',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosConcreteSecurityWorkStreams = [
  { key: 'frontstageVisibility', work: 'W1', state: '已前台化', icon: SearchCheck, tone: 'steady' },
  { key: 'hostScopeInventory', work: 'W2', state: '框架完成', icon: Activity, tone: 'warn' },
  { key: 'sourceControlMigration', work: 'W3', state: '待回覆', icon: GitBranch, tone: 'warn' },
  { key: 'ownerEvidenceIntake', work: 'W4', state: '下一真門檻', icon: ClipboardCheck, tone: 'warn' },
  { key: 'reviewerHumanFlow', work: 'W5', state: '只讀序列', icon: ListChecks, tone: 'locked' },
  { key: 'runtimeExecutionGate', work: 'W6', state: '未開閘', icon: Lock, tone: 'locked' },
] as const

const iwooosConcreteSecurityWorkMapBoundaries = [
  'iwooos_concrete_security_workstream_count=6',
  'iwooos_concrete_security_visible_workstream_count=6',
  'iwooos_concrete_security_framework_only_stream_count=6',
  'iwooos_concrete_security_runtime_workstream_count=0',
  'iwooos_concrete_security_next_real_gate=s4_9_owner_response_accepted',
  'iwooos_concrete_security_owner_response_received_count=0',
  'iwooos_concrete_security_owner_response_accepted_count=0',
  'iwooos_concrete_security_redacted_payload_ingested=false',
  'iwooos_concrete_security_active_runtime_gate_count=0',
  'iwooos_concrete_security_github_primary_ready_count=0',
  'iwooos_concrete_security_kali_scan_authorized=false',
  'iwooos_concrete_security_host_change_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosConcreteSecurityDeliveryChecklist = [
  { key: 'visibilitySurface', deliverable: 'D1', state: '已交付', icon: SearchCheck, tone: 'steady' },
  { key: 'hostScopeEvidence', deliverable: 'D2', state: '已框架化', icon: Activity, tone: 'warn' },
  { key: 'sourceControlEvidence', deliverable: 'D3', state: '待 owner', icon: GitBranch, tone: 'warn' },
  { key: 's49OwnerPacket', deliverable: 'D4', state: '待收件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'reviewerPreparation', deliverable: 'D5', state: '佇列未開', icon: ListChecks, tone: 'locked' },
  { key: 'runtimeGate', deliverable: 'D6', state: '未授權', icon: Lock, tone: 'locked' },
] as const

const iwooosConcreteSecurityDeliveryChecklistBoundaries = [
  'iwooos_concrete_security_delivery_item_count=6',
  'iwooos_concrete_security_delivery_visible_item_count=6',
  'iwooos_concrete_security_delivery_framework_only_count=6',
  'iwooos_concrete_security_delivery_runtime_item_count=0',
  'iwooos_concrete_security_delivery_next_owner_evidence=s4_9_owner_response',
  'iwooos_concrete_security_delivery_ready_for_runtime_count=0',
  'iwooos_concrete_security_delivery_evidence_received_count=0',
  'iwooos_concrete_security_delivery_evidence_accepted_count=0',
  'iwooos_concrete_security_delivery_reviewer_queue_open=false',
  'iwooos_concrete_security_delivery_git_primary_ready=false',
  'iwooos_concrete_security_delivery_kali_execution_ready=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosConcreteSecurityBlockerResolutionItems = [
  { key: 'ownerResponseMissing', blocker: 'B1', state: '待回覆', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidenceMissing', blocker: 'B2', state: '待脫敏', icon: FileWarning, tone: 'warn' },
  { key: 'reviewerQueueClosed', blocker: 'B3', state: '未開佇列', icon: ListChecks, tone: 'locked' },
  { key: 'sourceControlNotReady', blocker: 'B4', state: '待 owner', icon: GitBranch, tone: 'warn' },
  { key: 'hostEvidencePending', blocker: 'B5', state: '待證據', icon: Activity, tone: 'warn' },
  { key: 'runtimeGateClosed', blocker: 'B6', state: '未授權', icon: Lock, tone: 'locked' },
] as const

const iwooosConcreteSecurityBlockerResolutionBoundaries = [
  'iwooos_concrete_security_blocker_count=6',
  'iwooos_concrete_security_visible_blocker_count=6',
  'iwooos_concrete_security_headline_blocker_count=6',
  'iwooos_concrete_security_blocker_resolved_count=0',
  'iwooos_concrete_security_first_resolvable_blocker=s4_9_owner_response_missing',
  'iwooos_concrete_security_owner_response_required=true',
  'iwooos_concrete_security_redacted_evidence_required=true',
  'iwooos_concrete_security_reviewer_queue_open=false',
  'iwooos_concrete_security_github_primary_ready=false',
  'iwooos_concrete_security_kali_execution_ready=false',
  'iwooos_concrete_security_runtime_gate_open=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const globalSecurityMeshMatrixSummary = [
  { key: 'assets', value: '9', icon: Radar, tone: 'steady' },
  { key: 'readOnly', value: '9', icon: ShieldCheck, tone: 'steady' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
  { key: 'nextGate', value: 'S4.9', icon: ClipboardCheck, tone: 'warn' },
] as const

const globalSecurityMeshMatrixItems: GlobalSecurityMeshMatrixItem[] = [
  { key: 'awoooi', code: 'G1', icon: ShieldCheck, coverageTone: 'steady', evidenceTone: 'steady', runtimeTone: 'locked' },
  { key: 'awooop', code: 'G2', icon: Radar, coverageTone: 'steady', evidenceTone: 'steady', runtimeTone: 'locked' },
  { key: 'iwooos', code: 'G3', icon: Activity, coverageTone: 'steady', evidenceTone: 'steady', runtimeTone: 'locked' },
  { key: 'publicSites', code: 'G4', icon: FileText, coverageTone: 'steady', evidenceTone: 'warn', runtimeTone: 'locked' },
  { key: 'vibeWork', code: 'G5', icon: ListChecks, coverageTone: 'steady', evidenceTone: 'warn', runtimeTone: 'locked' },
  { key: 'agentBountyProtocol', code: 'G6', icon: Workflow, coverageTone: 'steady', evidenceTone: 'warn', runtimeTone: 'locked' },
  { key: 'kali112', code: 'G7', icon: SearchCheck, coverageTone: 'steady', evidenceTone: 'warn', runtimeTone: 'locked' },
  { key: 'devHosts', code: 'G8', icon: Activity, coverageTone: 'steady', evidenceTone: 'warn', runtimeTone: 'locked' },
  { key: 'sourceControl', code: 'G9', icon: GitBranch, coverageTone: 'warn', evidenceTone: 'warn', runtimeTone: 'locked' },
]

const globalSecurityMeshMatrixBoundaries = [
  'iwooos_global_security_mesh_first_layer=true',
  'iwooos_global_security_mesh_asset_count=9',
  'iwooos_global_security_mesh_read_only_count=9',
  'iwooos_global_security_mesh_runtime_gate_count=0',
  'iwooos_global_security_mesh_source_control_mutation_authorized=false',
  'iwooos_global_security_mesh_kali_execution_authorized=false',
  'iwooos_global_security_mesh_host_change_authorized=false',
  'iwooos_global_security_mesh_scan_authorized=false',
  'iwooos_global_security_mesh_production_deploy_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const hostToolEvidenceChainSummary = [
  { key: 'hosts', value: '3', icon: Activity, tone: 'warn' },
  { key: 'toolLanes', value: '6', icon: Radar, tone: 'steady' },
  { key: 'linkedEvidence', value: '已接線', icon: GitBranch, tone: 'steady' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const hostToolEvidenceChainItems: HostToolEvidenceChainItem[] = [
  { key: 'kali112', lane: 'H1', icon: SearchCheck, tone: 'warn' },
  { key: 'dev111', lane: 'H2', icon: Activity, tone: 'warn' },
  { key: 'dev168', lane: 'H3', icon: Activity, tone: 'warn' },
  { key: 'monitoringTools', lane: 'T1', icon: Radar, tone: 'steady' },
  { key: 'automationTools', lane: 'T2', icon: ListChecks, tone: 'steady' },
  { key: 'sourceControl', lane: 'T3', icon: GitBranch, tone: 'warn' },
]

const hostToolEvidenceChainSteps: HostToolEvidenceChainStep[] = [
  { key: 'observe', step: '01', icon: SearchCheck, tone: 'steady' },
  { key: 'evidence', step: '02', icon: FileText, tone: 'warn' },
  { key: 'review', step: '03', icon: ClipboardCheck, tone: 'warn' },
  { key: 'ownerGate', step: '04', icon: Lock, tone: 'locked' },
  { key: 'runtimeHold', step: '05', icon: AlertTriangle, tone: 'locked' },
]

const hostToolEvidenceChainBoundaries = [
  'iwooos_host_tool_evidence_chain_first_layer=true',
  'iwooos_host_tool_evidence_chain_host_count=3',
  'iwooos_host_tool_evidence_chain_tool_lane_count=6',
  'iwooos_host_tool_evidence_chain_step_count=5',
  'kali_112_integrated_as_read_only=true',
  'dev_hosts_111_168_integrated_as_read_only=true',
  'monitoring_tools_evidence_chain_linked=true',
  'kali_112_execute_authorized=false',
  'host_update_authorized=false',
  'active_scan_authorized=false',
  'ssh_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const vibeWorkSecurityOnboardingSummary = [
  { key: 'readOnly', value: '已納管', icon: ShieldCheck, tone: 'steady' },
  { key: 'missingEvidence', value: '6', icon: ListChecks, tone: 'warn' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const vibeWorkSecurityOnboardingItems: VibeWorkSecurityOnboardingItem[] = [
  { key: 'owner', check: 'VW1', state: '待補', icon: ClipboardCheck, tone: 'warn' },
  { key: 'dataClass', check: 'VW2', state: '待分級', icon: ShieldCheck, tone: 'warn' },
  { key: 'sourceRepo', check: 'VW3', state: '待證據', icon: GitBranch, tone: 'warn' },
  { key: 'deployBoundary', check: 'VW4', state: '待界定', icon: FileText, tone: 'warn' },
  { key: 'evidencePointer', check: 'VW5', state: '待收件', icon: SearchCheck, tone: 'warn' },
  { key: 'runtimeGate', check: 'VW6', state: '未開', icon: Lock, tone: 'locked' },
]

const vibeWorkSecurityOnboardingBoundaries = [
  'vibework_security_onboarding_item_count=6',
  'vibework_security_onboarding_read_only=true',
  'vibework_owner_evidence_received=false',
  'vibework_data_classification_received=false',
  'vibework_source_control_evidence_received=false',
  'vibework_deployment_boundary_received=false',
  'vibework_runtime_gate_open=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'production_deploy_authorized=false',
] as const

const agentBountySecurityOnboardingSummary = [
  { key: 'readOnly', value: '已納管', icon: ShieldCheck, tone: 'steady' },
  { key: 'missingEvidence', value: '7', icon: ListChecks, tone: 'warn' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const agentBountySecurityOnboardingItems: AgentBountySecurityOnboardingItem[] = [
  { key: 'owner', check: 'AB1', state: '待補', icon: ClipboardCheck, tone: 'warn' },
  { key: 'dataClass', check: 'AB2', state: '待分級', icon: ShieldCheck, tone: 'warn' },
  { key: 'sourceRepo', check: 'AB3', state: '待證據', icon: GitBranch, tone: 'warn' },
  { key: 'deployBoundary', check: 'AB4', state: '待界定', icon: FileText, tone: 'warn' },
  { key: 'externalAgent', check: 'AB5', state: '未授權', icon: Workflow, tone: 'locked' },
  { key: 'treasuryBoundary', check: 'AB6', state: '未授權', icon: Lock, tone: 'locked' },
  { key: 'runtimeGate', check: 'AB7', state: '未開', icon: Lock, tone: 'locked' },
]

const agentBountySecurityOnboardingBoundaries = [
  'agent_bounty_security_onboarding_item_count=7',
  'agent_bounty_security_onboarding_read_only=true',
  'agent_bounty_owner_evidence_received=false',
  'agent_bounty_data_classification_received=false',
  'agent_bounty_source_control_evidence_received=false',
  'agent_bounty_deployment_boundary_received=false',
  'agent_bounty_external_agent_boundary_received=false',
  'agent_bounty_treasury_boundary_received=false',
  'agent_bounty_auto_claim_submit_authorized=false',
  'agent_bounty_bounty_payout_authorized=false',
  'agent_bounty_runtime_gate_open=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'production_deploy_authorized=false',
] as const

const rolloutRiskReadOnlySummary = [
  { key: 'sourceDeployMarker', value: '16756d24', icon: GitBranch, tone: 'warn' },
  { key: 'rolloutRisk', value: '1', icon: AlertTriangle, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const rolloutRiskReadOnlyItems: RolloutRiskReadOnlyItem[] = [
  { key: 'argocdHealth', signal: 'RR1', state: 'Degraded', icon: Cloud, tone: 'warn' },
  { key: 'resourceSync', signal: 'RR2', state: 'OutOfSync', icon: Workflow, tone: 'warn' },
  { key: 'smokePassed', signal: 'RR3', state: '通過', icon: CheckCircle2, tone: 'steady' },
  { key: 'riskBoundary', signal: 'RR4', state: '不開閘', icon: Lock, tone: 'locked' },
]

const rolloutRiskReadOnlyBoundaries = [
  'rollout_risk_read_only_card_count=4',
  'rollout_risk_source_deploy_marker=16756d24',
  'rollout_risk_awoooi_rollout_risk=1',
  'rollout_risk_argocd_health=Degraded',
  'rollout_risk_resource_sync=OutOfSync',
  'rollout_risk_api_health_passed=true',
  'rollout_risk_playwright_smoke_passed=true',
  'rollout_risk_requires_read_only_triage=true',
  'rollout_risk_runtime_gate_count=0',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'argocd_sync_authorized=false',
  'kubectl_action_authorized=false',
  'host_restart_authorized=false',
] as const

const highValueConfigOwnerPacketSummary = [
  { key: 'packetCount', value: '1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'c0Packets', value: '0', icon: Lock, tone: 'locked' },
  { key: 'responses', value: '0 / 0', icon: SearchCheck, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const highValueConfigControlCoverageSummary = [
  { key: 'categories', value: '14', icon: ListChecks, tone: 'steady' },
  { key: 'c0', value: '8', icon: AlertTriangle, tone: 'warn' },
  { key: 'coverage', value: '66%', icon: ShieldCheck, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const highValueConfigControlCoverageItems: HighValueConfigControlCoverageItem[] = [
  { key: 'dockerSystemd', rank: 'P1-1', value: '50%', icon: Server, tone: 'warn' },
  { key: 'sshNetwork', rank: 'P1-2', value: '54%', icon: Network, tone: 'warn' },
  { key: 'backupRestore', rank: 'P1-3', value: '58%', icon: Database, tone: 'warn' },
  { key: 'monitoring', rank: 'P1-4', value: '62%', icon: Radar, tone: 'warn' },
]

const highValueConfigControlCoverageBoundaries = [
  'high_value_config_control_coverage_frontstage_summary_count=4',
  'high_value_config_control_coverage_frontstage_item_count=4',
  'high_value_config_control_coverage_category_count=14',
  'high_value_config_control_coverage_c0_category_count=8',
  'high_value_config_control_coverage_c1_category_count=4',
  'high_value_config_control_coverage_average_percent=66',
  'high_value_config_control_coverage_needs_live_evidence_count=7',
  'high_value_config_control_coverage_owner_response_required_count=14',
  'high_value_config_control_coverage_owner_response_received_count=0',
  'high_value_config_control_coverage_owner_response_accepted_count=0',
  'high_value_config_control_coverage_runtime_gate_count=0',
  'high_value_config_control_coverage_action_button_count=0',
  'nginx_public_gateway_coverage_percent=84',
  'public_gateway_preflight_inventory_source_config_count=3',
  'public_gateway_preflight_inventory_route_impact_count=14',
  'public_gateway_preflight_inventory_preflight_gate_count=12',
  'public_gateway_preflight_inventory_runtime_gate_count=0',
  'host_service_config_inventory_surface_count=9',
  'host_service_config_inventory_write_capable_surface_count=3',
  'host_service_config_inventory_runtime_gate_count=0',
  'ssh_network_access_inventory_surface_count=16',
  'ssh_network_access_inventory_write_capable_surface_count=6',
  'ssh_network_access_inventory_runtime_gate_count=0',
  'backup_restore_escrow_inventory_surface_count=38',
  'backup_restore_escrow_inventory_write_capable_surface_count=27',
  'backup_restore_escrow_inventory_runtime_gate_count=0',
  'backup_restore_escrow_inventory_restore_drill_accepted_count=0',
  'backup_restore_escrow_inventory_offsite_sync_accepted_count=0',
  'backup_restore_escrow_inventory_credential_escrow_accepted_count=0',
  'backup_restore_escrow_inventory_retention_change_accepted_count=0',
  'monitoring_alerting_observability_inventory_surface_count=60',
  'monitoring_alerting_observability_inventory_alert_rule_surface_count=13',
  'monitoring_alerting_observability_inventory_deploy_or_reload_surface_count=6',
  'monitoring_alerting_observability_inventory_write_capable_surface_count=11',
  'monitoring_alerting_observability_inventory_runtime_gate_count=0',
  'monitoring_alerting_observability_inventory_reload_owner_accepted_count=0',
  'monitoring_alerting_observability_inventory_receiver_owner_accepted_count=0',
  'monitoring_alerting_observability_inventory_route_smoke_accepted_count=0',
  'docker_compose_action_authorized=false',
  'systemctl_action_authorized=false',
  'repair_bot_execution_authorized=false',
  'ansible_apply_authorized=false',
  'ssh_read_authorized=false',
  'ssh_write_authorized=false',
  'sudo_action_authorized=false',
  'firewall_change_authorized=false',
  'network_policy_apply_authorized=false',
  'nodeport_change_authorized=false',
  'wireguard_change_authorized=false',
  'known_hosts_patch_authorized=false',
  'host_keyscan_authorized=false',
  'runtime_execution_authorized=false',
  'host_write_authorized=false',
  'host_live_conf_read_authorized=false',
  'nginx_test_authorized=false',
  'public_gateway_reload_authorized=false',
  'public_route_change_authorized=false',
  'admin_route_change_authorized=false',
  'websocket_route_change_authorized=false',
  'acme_challenge_change_authorized=false',
  'route_smoke_authorized=false',
  'rollback_executed=false',
  'nginx_reload_authorized=false',
  'dns_tls_change_authorized=false',
  'certbot_renew_authorized=false',
  'backup_run_authorized=false',
  'restore_run_authorized=false',
  'restore_drill_authorized=false',
  'offsite_sync_authorized=false',
  'offsite_remote_delete_authorized=false',
  'credential_escrow_marker_write_authorized=false',
  'retention_change_authorized=false',
  'restic_prune_authorized=false',
  'rclone_config_authorized=false',
  'velero_restore_authorized=false',
  'prometheus_reload_authorized=false',
  'alertmanager_reload_authorized=false',
  'grafana_dashboard_apply_authorized=false',
  'signoz_rule_apply_authorized=false',
  'sentry_deploy_authorized=false',
  'langfuse_config_change_authorized=false',
  'otel_collector_reload_authorized=false',
  'receiver_route_change_authorized=false',
  'silence_policy_change_authorized=false',
  'telegram_send_authorized=false',
  'notification_route_change_authorized=false',
  'webhook_receiver_change_authorized=false',
  'remote_write_change_authorized=false',
  'exporter_deploy_authorized=false',
  'live_alert_fire_authorized=false',
  'alert_chain_smoke_authorized=false',
  'workflow_modification_authorized=false',
  'active_scan_authorized=false',
  'agent_bounty_runtime_authorized=false',
] as const

const highValueConfigOwnerPacketItems: HighValueConfigOwnerPacketItem[] = [
  { key: 'packetDraft', gate: 'HV1', state: '草案 1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'currentTier', gate: 'HV2', state: 'C3 / P3', icon: ListChecks, tone: 'warn' },
  { key: 'canonicalFields', gate: 'HV3', state: '9 欄', icon: FileText, tone: 'steady' },
  { key: 'requestState', gate: 'HV4', state: '未送件', icon: Clock3, tone: 'warn' },
  { key: 'responseState', gate: 'HV5', state: '未收件', icon: SearchCheck, tone: 'warn' },
  { key: 'runtimeBoundary', gate: 'HV6', state: '未開閘', icon: Lock, tone: 'locked' },
]

const highValueConfigOwnerPacketBoundaries = [
  'high_value_config_owner_packet_frontstage_summary_count=4',
  'high_value_config_owner_packet_frontstage_item_count=6',
  'high_value_config_owner_packet_count=1',
  'high_value_config_owner_packet_c0_packet_count=0',
  'high_value_config_owner_packet_c1_packet_count=0',
  'high_value_config_owner_packet_request_sent_count=0',
  'high_value_config_owner_packet_received_response_count=0',
  'high_value_config_owner_packet_accepted_response_count=0',
  'high_value_config_owner_packet_runtime_gate_count=0',
  'high_value_config_owner_packet_action_buttons_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'nginx_reload_authorized=false',
  'workflow_modification_authorized=false',
  'agent_bounty_runtime_authorized=false',
] as const

const domainTlsCertbotInventorySummary = [
  { key: 'domains', value: '14', icon: Route, tone: 'steady' },
  { key: 'certPaths', value: '10', icon: ShieldCheck, tone: 'steady' },
  { key: 'ownerConfirm', value: '4', icon: SearchCheck, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const domainTlsCertbotInventoryItems: DomainTlsCertbotInventoryItem[] = [
  { key: 'repoSource', check: 'DT1', state: '3 來源', icon: FileText, tone: 'steady' },
  { key: 'domainMap', check: 'DT2', state: '14 domain', icon: Route, tone: 'steady' },
  { key: 'acmeRoutes', check: 'DT3', state: '7 domain', icon: Network, tone: 'steady' },
  { key: 'ownerConfirmation', check: 'DT4', state: '4 待確認', icon: SearchCheck, tone: 'warn' },
  { key: 'runtimeBoundary', check: 'DT5', state: '未開閘', icon: Lock, tone: 'locked' },
]

const domainTlsCertbotInventoryBoundaries = [
  'domain_tls_certbot_inventory_frontstage_summary_count=4',
  'domain_tls_certbot_inventory_frontstage_item_count=5',
  'domain_tls_certbot_inventory_source_config_count=3',
  'domain_tls_certbot_inventory_managed_domain_count=14',
  'domain_tls_certbot_inventory_unique_certificate_path_count=10',
  'domain_tls_certbot_inventory_acme_challenge_domain_count=7',
  'domain_tls_certbot_inventory_owner_confirmation_required_count=4',
  'domain_tls_certbot_inventory_admin_route_domain_count=1',
  'domain_tls_certbot_inventory_websocket_route_domain_count=6',
  'domain_tls_certbot_inventory_request_sent_count=0',
  'domain_tls_certbot_inventory_received_response_count=0',
  'domain_tls_certbot_inventory_accepted_response_count=0',
  'domain_tls_certbot_inventory_runtime_gate_count=0',
  'domain_tls_certbot_inventory_live_tls_probe_executed=false',
  'domain_tls_certbot_inventory_dns_change_executed=false',
  'domain_tls_certbot_inventory_certbot_renew_executed=false',
  'domain_tls_certbot_inventory_nginx_reload_executed=false',
  'domain_tls_certbot_inventory_action_buttons_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
] as const

const publicGatewayPreflightSummary = [
  { key: 'sourceConfigs', value: '3', icon: Server, tone: 'steady' },
  { key: 'routeImpacts', value: '14', icon: Route, tone: 'warn' },
  { key: 'preflightGates', value: '12', icon: ListChecks, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const publicGatewayPreflightItems: PublicGatewayPreflightItem[] = [
  { key: 'sourceHash', gate: 'PG1', state: 'repo-only ready', icon: FileText, tone: 'steady' },
  { key: 'affectedRoutes', gate: 'PG2', state: '14 route', icon: Route, tone: 'warn' },
  { key: 'ownerLiveDiff', gate: 'PG3', state: '0 accepted', icon: SearchCheck, tone: 'warn' },
  { key: 'nginxTest', gate: 'PG4', state: '0 evidence', icon: ShieldCheck, tone: 'warn' },
  { key: 'routeSmoke', gate: 'PG5', state: '0 evidence', icon: Radar, tone: 'warn' },
  { key: 'reloadBoundary', gate: 'PG6', state: '未開閘', icon: Lock, tone: 'locked' },
]

const publicGatewayPreflightBoundaries = [
  'public_gateway_preflight_frontstage_summary_count=4',
  'public_gateway_preflight_frontstage_item_count=6',
  'public_gateway_preflight_source_config_count=3',
  'public_gateway_preflight_c0_source_config_count=2',
  'public_gateway_preflight_managed_domain_count=14',
  'public_gateway_preflight_route_impact_count=14',
  'public_gateway_preflight_unique_upstream_count=14',
  'public_gateway_preflight_tls_certificate_path_count=10',
  'public_gateway_preflight_certificate_owner_confirmation_required_count=4',
  'public_gateway_preflight_admin_route_domain_count=1',
  'public_gateway_preflight_websocket_route_domain_count=6',
  'public_gateway_preflight_acme_challenge_domain_count=7',
  'public_gateway_preflight_gate_count=12',
  'public_gateway_preflight_repo_only_ready_count=2',
  'public_gateway_preflight_owner_acceptance_required_gate_count=10',
  'public_gateway_preflight_gate_accepted_count=0',
  'public_gateway_preflight_owner_response_received_count=0',
  'public_gateway_preflight_owner_response_accepted_count=0',
  'public_gateway_preflight_owner_provided_live_conf_received_count=0',
  'public_gateway_preflight_rendered_diff_ready_count=0',
  'public_gateway_preflight_nginx_test_evidence_count=0',
  'public_gateway_preflight_route_smoke_evidence_count=0',
  'public_gateway_preflight_maintenance_window_accepted_count=0',
  'public_gateway_preflight_rollback_owner_accepted_count=0',
  'public_gateway_preflight_runtime_gate_count=0',
  'public_gateway_preflight_action_button_count=0',
  'public_gateway_preflight_coverage_percent_before_preflight=78',
  'public_gateway_preflight_coverage_percent_after_preflight=84',
  'runtime_execution_authorized=false',
  'host_live_conf_read_authorized=false',
  'ssh_read_authorized=false',
  'ssh_write_authorized=false',
  'host_write_authorized=false',
  'nginx_test_authorized=false',
  'nginx_reload_authorized=false',
  'public_gateway_reload_authorized=false',
  'public_route_change_authorized=false',
  'admin_route_change_authorized=false',
  'websocket_route_change_authorized=false',
  'acme_challenge_change_authorized=false',
  'route_smoke_authorized=false',
  'rollback_executed=false',
  'secret_value_collection_allowed=false',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosThreeAxisProductProgressSummary = [
  { key: 'headline', value: '64%', icon: Activity, tone: 'warn' },
  { key: 'framework', value: '92%', icon: ShieldCheck, tone: 'steady' },
  { key: 'runtime', value: '40-45%', icon: Lock, tone: 'locked' },
  { key: 'products', value: '全產品只讀', icon: Radar, tone: 'steady' },
] as const

const iwooosThreeAxisProductProgressItems = [
  { key: 'awoooiCore', scope: 'P1', state: '已套用', icon: ShieldCheck, tone: 'steady' },
  { key: 'websites', scope: 'P2', state: '可套用', icon: SearchCheck, tone: 'steady' },
  { key: 'sourceControl', scope: 'P3', state: '待證據', icon: GitBranch, tone: 'warn' },
  { key: 'hosts', scope: 'P4', state: '待授權', icon: Activity, tone: 'warn' },
  { key: 'toolsMonitoring', scope: 'P5', state: '只讀先行', icon: Radar, tone: 'steady' },
  { key: 'vibeWork', scope: 'P6', state: '新專案只讀', icon: FileText, tone: 'warn' },
  { key: 'agentBountyProtocol', scope: 'P7', state: '新專案只讀', icon: Workflow, tone: 'warn' },
  { key: 'futureProducts', scope: 'P8', state: '分階段', icon: ListChecks, tone: 'warn' },
] as const

const iwooosThreeAxisProductProgressBoundaries = [
  'iwooos_three_axis_progress_headline_percent=64',
  'iwooos_three_axis_progress_framework_percent=92',
  'iwooos_three_axis_progress_runtime_percent=40-45',
  'iwooos_three_axis_progress_product_scope_count=8',
  'iwooos_three_axis_progress_all_products_read_only=true',
  'iwooos_three_axis_progress_vibework_read_only_in_scope=true',
  'iwooos_three_axis_progress_vibework_runtime_ready=false',
  'iwooos_three_axis_progress_agent_bounty_read_only_in_scope=true',
  'iwooos_three_axis_progress_agent_bounty_runtime_ready=false',
  'iwooos_three_axis_progress_runtime_product_rollout_count=0',
  'iwooos_three_axis_progress_first_runtime_gate=s4_9_owner_response_accepted',
  'iwooos_three_axis_progress_owner_response_accepted_count=0',
  'iwooos_three_axis_progress_active_runtime_gate_count=0',
  'iwooos_three_axis_progress_production_deploy_count=1',
  'iwooos_three_axis_progress_kali_execution_authorized=false',
  'iwooos_three_axis_progress_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductRolloutWaveLedgerSummary = [
  { key: 'waves', value: '8', icon: ListChecks, tone: 'steady' },
  { key: 'current', value: '只讀波次', icon: ShieldCheck, tone: 'steady' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
  { key: 'nextGate', value: 'S4.9', icon: ClipboardCheck, tone: 'warn' },
] as const

const iwooosProductRolloutWaveLedgerItems = [
  { key: 'coreProduct', wave: 'W0', state: '已接入', icon: ShieldCheck, tone: 'steady' },
  { key: 'publicSurfaces', wave: 'W1', state: '接可視', icon: SearchCheck, tone: 'steady' },
  { key: 'sourceControl', wave: 'W2', state: '等證據', icon: GitBranch, tone: 'warn' },
  { key: 'hostCoverage', wave: 'W3', state: '等授權', icon: Activity, tone: 'warn' },
  { key: 'monitoringTools', wave: 'W4', state: '只讀輸出', icon: Radar, tone: 'steady' },
  { key: 'vibeWorkProject', wave: 'W5', state: '新專案只讀', icon: FileText, tone: 'warn' },
  { key: 'agentBountyProtocol', wave: 'W6', state: '新專案只讀', icon: Workflow, tone: 'warn' },
  { key: 'futureTemplate', wave: 'W7', state: '預設套用', icon: ListChecks, tone: 'warn' },
] as const

const iwooosProductRolloutWaveLedgerBoundaries = [
  'iwooos_product_rollout_wave_count=8',
  'iwooos_product_rollout_all_products_count=8',
  'iwooos_product_rollout_current_wave=read_only_visibility',
  'iwooos_product_rollout_vibework_project_wave=read_only_visibility',
  'iwooos_product_rollout_vibework_runtime_ready=false',
  'iwooos_product_rollout_agent_bounty_project_wave=read_only_visibility',
  'iwooos_product_rollout_agent_bounty_runtime_ready=false',
  'iwooos_product_rollout_runtime_wave_count=0',
  'iwooos_product_rollout_enforcement_wave_count=0',
  'iwooos_product_rollout_owner_response_accepted_count=0',
  'iwooos_product_rollout_active_runtime_gate_count=0',
  'iwooos_product_rollout_first_runtime_candidate=s4_9_owner_response_accepted',
  'iwooos_product_rollout_all_products_read_only=true',
  'iwooos_product_rollout_public_secret_exposure_allowed=false',
  'iwooos_product_rollout_kali_execution_authorized=false',
  'iwooos_product_rollout_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductRolloutAcceptanceGatesSummary = [
  { key: 'gateCount', value: '6', icon: ClipboardCheck, tone: 'steady' },
  { key: 'passed', value: '0', icon: Lock, tone: 'locked' },
  { key: 'ownerEvidence', value: 'S4.9', icon: FileText, tone: 'warn' },
  { key: 'runtime', value: '0', icon: Radar, tone: 'locked' },
] as const

const iwooosProductRolloutAcceptanceGates = [
  { key: 'visibilityEvidence', gate: 'G1', state: '待驗收', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerEvidence', gate: 'G2', state: '待收件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactionReview', gate: 'G3', state: '待審查', icon: ShieldCheck, tone: 'warn' },
  { key: 'sourceControlProof', gate: 'G4', state: '待證據', icon: GitBranch, tone: 'warn' },
  { key: 'hostSafetyWindow', gate: 'G5', state: '待授權', icon: Activity, tone: 'locked' },
  { key: 'rollbackDisable', gate: 'G6', state: '待確認', icon: FileWarning, tone: 'warn' },
] as const

const iwooosProductRolloutAcceptanceGateBoundaries = [
  'iwooos_product_rollout_acceptance_gate_count=6',
  'iwooos_product_rollout_acceptance_current_stage=read_only_acceptance',
  'iwooos_product_rollout_acceptance_passed_count=0',
  'iwooos_product_rollout_acceptance_failed_count=0',
  'iwooos_product_rollout_acceptance_owner_response_received_count=0',
  'iwooos_product_rollout_acceptance_owner_response_accepted_count=0',
  'iwooos_product_rollout_acceptance_redacted_evidence_pointer_count=0',
  'iwooos_product_rollout_acceptance_source_control_proof_count=0',
  'iwooos_product_rollout_acceptance_host_safety_window_approved=false',
  'iwooos_product_rollout_acceptance_rollback_disable_ready=false',
  'iwooos_product_rollout_acceptance_runtime_gate_open=false',
  'iwooos_product_rollout_acceptance_runtime_wave_count=0',
  'iwooos_product_rollout_acceptance_enforcement_wave_count=0',
  'iwooos_product_rollout_acceptance_public_secret_exposure_allowed=false',
  'iwooos_product_rollout_acceptance_kali_execution_authorized=false',
  'iwooos_product_rollout_acceptance_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductRolloutAcceptanceOutcomeSummary = [
  { key: 'outcomes', value: '7', icon: ListChecks, tone: 'steady' },
  { key: 'accepted', value: '0', icon: CheckCircle2, tone: 'locked' },
  { key: 'quarantine', value: '0', icon: FileWarning, tone: 'warn' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductRolloutAcceptanceOutcomes = [
  { key: 'keepReadOnly', lane: 'R1', state: '維持只讀', icon: ShieldCheck, tone: 'steady' },
  { key: 'returnEvidence', lane: 'R2', state: '退回補證', icon: FileText, tone: 'warn' },
  { key: 'quarantineSensitive', lane: 'R3', state: '隔離敏感', icon: FileWarning, tone: 'warn' },
  { key: 'sourceControlHold', lane: 'R4', state: '版本待證', icon: GitBranch, tone: 'warn' },
  { key: 'hostSafetyHold', lane: 'R5', state: '主機暫停', icon: Activity, tone: 'locked' },
  { key: 'humanReviewCandidate', lane: 'R6', state: '待人工審', icon: ClipboardCheck, tone: 'warn' },
  { key: 'runtimeDenied', lane: 'R7', state: 'runtime 未開', icon: Lock, tone: 'locked' },
] as const

const iwooosProductRolloutAcceptanceOutcomeBoundaries = [
  'iwooos_product_rollout_acceptance_outcome_lane_count=7',
  'iwooos_product_rollout_acceptance_outcome_current_stage=read_only_outcome_routing',
  'iwooos_product_rollout_acceptance_outcome_keep_read_only_lane_count=1',
  'iwooos_product_rollout_acceptance_outcome_returned_for_evidence_count=0',
  'iwooos_product_rollout_acceptance_outcome_quarantined_count=0',
  'iwooos_product_rollout_acceptance_outcome_source_control_hold_count=0',
  'iwooos_product_rollout_acceptance_outcome_host_safety_hold_count=0',
  'iwooos_product_rollout_acceptance_outcome_human_review_candidate_count=0',
  'iwooos_product_rollout_acceptance_outcome_runtime_candidate_count=0',
  'iwooos_product_rollout_acceptance_outcome_owner_response_received_count=0',
  'iwooos_product_rollout_acceptance_outcome_owner_response_accepted_count=0',
  'iwooos_product_rollout_acceptance_outcome_redacted_evidence_accepted_count=0',
  'iwooos_product_rollout_acceptance_outcome_active_runtime_gate_count=0',
  'iwooos_product_rollout_acceptance_outcome_runtime_gate_open=false',
  'iwooos_product_rollout_acceptance_outcome_runtime_wave_count=0',
  'iwooos_product_rollout_acceptance_outcome_enforcement_wave_count=0',
  'iwooos_product_rollout_acceptance_outcome_public_secret_exposure_allowed=false',
  'iwooos_product_rollout_acceptance_outcome_kali_execution_authorized=false',
  'iwooos_product_rollout_acceptance_outcome_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringSummary = [
  { key: 'channels', value: '6', icon: ListChecks, tone: 'steady' },
  { key: 'connected', value: '0', icon: Lock, tone: 'locked' },
  { key: 'accepted', value: '0', icon: ClipboardCheck, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Radar, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringChannels = [
  { key: 'productScope', channel: 'E1', state: '範圍待接線', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerResponse', channel: 'E2', state: '負責人待收件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidence', channel: 'E3', state: '脫敏待驗收', icon: ShieldCheck, tone: 'warn' },
  { key: 'sourceControlTruth', channel: 'E4', state: '版本待對照', icon: GitBranch, tone: 'warn' },
  { key: 'hostSafetyWindow', channel: 'E5', state: '主機待窗口', icon: Activity, tone: 'locked' },
  { key: 'monitoringToolEvidence', channel: 'E6', state: '工具待摘要', icon: Radar, tone: 'steady' },
] as const

const iwooosProductEvidenceWiringBoundaries = [
  'iwooos_product_evidence_wiring_channel_count=6',
  'iwooos_product_evidence_wiring_current_stage=read_only_evidence_wiring',
  'iwooos_product_evidence_wiring_visible_channel_count=6',
  'iwooos_product_evidence_wiring_connected_product_count=0',
  'iwooos_product_evidence_wiring_owner_response_received_count=0',
  'iwooos_product_evidence_wiring_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_monitoring_tool_payload_ingested=false',
  'iwooos_product_evidence_wiring_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightSummary = [
  { key: 'checks', value: '6', icon: SearchCheck, tone: 'steady' },
  { key: 'passed', value: '0', icon: Lock, tone: 'locked' },
  { key: 'quarantine', value: '0', icon: FileWarning, tone: 'warn' },
  { key: 'runtime', value: '0', icon: Radar, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightChecks = [
  { key: 'scopeMetadata', check: 'P1', state: '範圍待檢', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerEnvelope', check: 'P2', state: '封套待檢', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactionBoundary', check: 'P3', state: '脫敏待檢', icon: ShieldCheck, tone: 'warn' },
  { key: 'sourceTruth', check: 'P4', state: '版本待檢', icon: GitBranch, tone: 'warn' },
  { key: 'hostWindow', check: 'P5', state: '窗口待檢', icon: Activity, tone: 'locked' },
  { key: 'toolOutput', check: 'P6', state: '摘要待檢', icon: Radar, tone: 'steady' },
] as const

const iwooosProductEvidenceWiringPreflightBoundaries = [
  'iwooos_product_evidence_wiring_preflight_check_count=6',
  'iwooos_product_evidence_wiring_preflight_current_stage=read_only_evidence_wiring_preflight',
  'iwooos_product_evidence_wiring_preflight_visible_check_count=6',
  'iwooos_product_evidence_wiring_preflight_passed_count=0',
  'iwooos_product_evidence_wiring_preflight_failed_count=0',
  'iwooos_product_evidence_wiring_preflight_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_returned_for_scope_count=0',
  'iwooos_product_evidence_wiring_preflight_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_monitoring_tool_payload_ingested=false',
  'iwooos_product_evidence_wiring_preflight_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_preflight_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightOutcomeSummary = [
  { key: 'outcomes', value: '8', icon: ListChecks, tone: 'steady' },
  { key: 'ready', value: '0', icon: CheckCircle2, tone: 'locked' },
  { key: 'returned', value: '0', icon: FileText, tone: 'warn' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightOutcomes = [
  { key: 'stayReadOnly', lane: 'O1', state: '維持只讀', icon: ShieldCheck, tone: 'steady' },
  { key: 'returnScope', lane: 'O2', state: '退回範圍', icon: SearchCheck, tone: 'warn' },
  { key: 'returnOwnerEnvelope', lane: 'O3', state: '退回封套', icon: ClipboardCheck, tone: 'warn' },
  { key: 'quarantineSensitive', lane: 'O4', state: '隔離敏感', icon: FileWarning, tone: 'warn' },
  { key: 'sourceTruthHold', lane: 'O5', state: '版本暫停', icon: GitBranch, tone: 'warn' },
  { key: 'hostWindowHold', lane: 'O6', state: '主機暫停', icon: Activity, tone: 'locked' },
  { key: 'toolSummaryHold', lane: 'O7', state: '工具待摘要', icon: Radar, tone: 'warn' },
  { key: 'runtimeClosed', lane: 'O8', state: 'runtime 關閉', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightOutcomeBoundaries = [
  'iwooos_product_evidence_wiring_preflight_outcome_lane_count=8',
  'iwooos_product_evidence_wiring_preflight_outcome_current_stage=read_only_preflight_outcome_routing',
  'iwooos_product_evidence_wiring_preflight_outcome_keep_read_only_lane_count=1',
  'iwooos_product_evidence_wiring_preflight_outcome_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_returned_for_scope_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_returned_for_owner_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_source_control_hold_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_host_safety_hold_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_tool_summary_hold_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_runtime_candidate_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_outcome_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_outcome_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_outcome_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_outcome_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRecoverySummary = [
  { key: 'queues', value: '7', icon: ClipboardCheck, tone: 'steady' },
  { key: 'submitted', value: '0', icon: FileText, tone: 'warn' },
  { key: 'accepted', value: '0', icon: CheckCircle2, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRecoveryQueues = [
  { key: 'scopePacket', queue: 'R1', state: '範圍補件', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerEnvelope', queue: 'R2', state: '封套補件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidence', queue: 'R3', state: '脫敏重送', icon: ShieldCheck, tone: 'warn' },
  { key: 'sourceTruth', queue: 'R4', state: '版本補證', icon: GitBranch, tone: 'warn' },
  { key: 'hostWindow', queue: 'R5', state: '窗口補齊', icon: Activity, tone: 'locked' },
  { key: 'toolSummary', queue: 'R6', state: '摘要補件', icon: Radar, tone: 'steady' },
  { key: 'runtimeGate', queue: 'R7', state: 'runtime 待門檻', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRecoveryBoundaries = [
  'iwooos_product_evidence_wiring_preflight_recovery_queue_count=7',
  'iwooos_product_evidence_wiring_preflight_recovery_current_stage=read_only_recovery_ledger',
  'iwooos_product_evidence_wiring_preflight_recovery_visible_queue_count=7',
  'iwooos_product_evidence_wiring_preflight_recovery_submitted_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_returned_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_ready_for_preflight_retry_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_recovery_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_recovery_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_recovery_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_recovery_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_recovery_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_recovery_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryGateSummary = [
  { key: 'gates', value: '6', icon: SearchCheck, tone: 'steady' },
  { key: 'candidate', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'passed', value: '0', icon: CheckCircle2, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryGates = [
  { key: 'scopeReady', gate: 'G1', state: '範圍可重試', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerReady', gate: 'G2', state: '封套可重試', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactionReady', gate: 'G3', state: '脫敏可重試', icon: ShieldCheck, tone: 'steady' },
  { key: 'sourceReady', gate: 'G4', state: '版本可重試', icon: GitBranch, tone: 'warn' },
  { key: 'hostReady', gate: 'G5', state: '主機可重試', icon: Activity, tone: 'locked' },
  { key: 'toolReady', gate: 'G6', state: '摘要可重試', icon: Radar, tone: 'steady' },
] as const

const iwooosProductEvidenceWiringPreflightRetryGateBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_gate_count=6',
  'iwooos_product_evidence_wiring_preflight_retry_current_stage=read_only_recovery_retry_gate',
  'iwooos_product_evidence_wiring_preflight_retry_visible_gate_count=6',
  'iwooos_product_evidence_wiring_preflight_retry_candidate_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_submitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_passed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_failed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_returned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryOutcomeSummary = [
  { key: 'outcomes', value: '8', icon: SearchCheck, tone: 'steady' },
  { key: 'ready', value: '0', icon: CheckCircle2, tone: 'warn' },
  { key: 'review', value: '0', icon: ClipboardCheck, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryOutcomes = [
  { key: 'stayCandidate', lane: 'O1', state: '維持只讀候選', icon: SearchCheck, tone: 'steady' },
  { key: 'returnSupplement', lane: 'O2', state: '退回補件', icon: FileWarning, tone: 'warn' },
  { key: 'quarantineSensitive', lane: 'O3', state: '隔離敏感', icon: ShieldCheck, tone: 'locked' },
  { key: 'sourceTruthReturn', lane: 'O4', state: '版本退回', icon: GitBranch, tone: 'warn' },
  { key: 'hostWindowPause', lane: 'O5', state: '主機暫停', icon: Activity, tone: 'locked' },
  { key: 'toolSummaryReturn', lane: 'O6', state: '摘要退回', icon: Radar, tone: 'warn' },
  { key: 'humanReviewWait', lane: 'O7', state: '等待人工審查', icon: ClipboardCheck, tone: 'steady' },
  { key: 'runtimeStillClosed', lane: 'O8', state: 'runtime 仍關閉', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryOutcomeBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_outcome_lane_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_current_stage=read_only_retry_outcome_routing',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_visible_lane_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_returned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_human_review_candidate_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_runtime_candidate_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_outcome_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewCandidateSummary = [
  { key: 'packets', value: '8', icon: ClipboardCheck, tone: 'steady' },
  { key: 'ready', value: '0', icon: CheckCircle2, tone: 'warn' },
  { key: 'queue', value: '0', icon: ListChecks, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewCandidatePackets = [
  { key: 'candidateIdentity', packet: 'P1', state: '候選識別', icon: ClipboardCheck, tone: 'steady' },
  { key: 'sourceOutcomeTrace', packet: 'P2', state: '結果來源', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerScopePacket', packet: 'P3', state: '負責人與範圍', icon: FileText, tone: 'warn' },
  { key: 'redactionAttestation', packet: 'P4', state: '脫敏聲明', icon: ShieldCheck, tone: 'steady' },
  { key: 'sourceControlReadiness', packet: 'P5', state: '版本來源證據', icon: GitBranch, tone: 'warn' },
  { key: 'hostSafetyWindow', packet: 'P6', state: '主機窗口', icon: Activity, tone: 'locked' },
  { key: 'toolSummaryEvidence', packet: 'P7', state: '工具摘要證據', icon: Radar, tone: 'steady' },
  { key: 'runtimeSeparation', packet: 'P8', state: 'runtime 分離', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewCandidateBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_packet_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_current_stage=read_only_retry_review_candidate_preparation',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_visible_packet_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_packet_completed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_ready_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_queue_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_created_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_reviewer_assigned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_audit_event_emitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_candidate_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightSummary = [
  { key: 'checks', value: '8', icon: SearchCheck, tone: 'steady' },
  { key: 'passed', value: '0', icon: CheckCircle2, tone: 'warn' },
  { key: 'queue', value: '0', icon: ListChecks, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightChecks = [
  { key: 'candidateIdentity', check: 'C1', state: '識別可追溯', icon: ClipboardCheck, tone: 'steady' },
  { key: 'sourceOutcomeTrace', check: 'C2', state: '來源可追溯', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerScope', check: 'C3', state: '範圍可讀', icon: FileText, tone: 'warn' },
  { key: 'redactionAttestation', check: 'C4', state: '脫敏成立', icon: ShieldCheck, tone: 'steady' },
  { key: 'sourceControlTruth', check: 'C5', state: '版本待證', icon: GitBranch, tone: 'warn' },
  { key: 'hostSafetyWindow', check: 'C6', state: '主機窗口待證', icon: Activity, tone: 'locked' },
  { key: 'toolSummary', check: 'C7', state: '摘要可讀', icon: Radar, tone: 'steady' },
  { key: 'runtimeSeparation', check: 'C8', state: 'runtime 關閉', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_check_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_current_stage=read_only_retry_review_candidate_preflight',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_visible_check_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_passed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_failed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_ready_for_queue_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_queue_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_candidate_created_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_reviewer_assigned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_audit_event_emitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightOutcomeSummary = [
  { key: 'outcomes', value: '8', icon: SearchCheck, tone: 'steady' },
  { key: 'ready', value: '0', icon: CheckCircle2, tone: 'warn' },
  { key: 'queue', value: '0', icon: ListChecks, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightOutcomes = [
  { key: 'stayReadOnly', lane: 'O1', state: '維持只讀', icon: SearchCheck, tone: 'steady' },
  { key: 'returnIdentity', lane: 'O2', state: '退回識別', icon: FileWarning, tone: 'warn' },
  { key: 'returnTrace', lane: 'O3', state: '退回來源', icon: FileWarning, tone: 'warn' },
  { key: 'returnOwnerScope', lane: 'O4', state: '退回範圍', icon: FileText, tone: 'warn' },
  { key: 'quarantineRedaction', lane: 'O5', state: '隔離敏感', icon: ShieldCheck, tone: 'locked' },
  { key: 'sourceHostHold', lane: 'O6', state: '版本 / 主機暫停', icon: GitBranch, tone: 'locked' },
  { key: 'readyForHumanReviewWait', lane: 'O7', state: '等待人工審查', icon: ClipboardCheck, tone: 'steady' },
  { key: 'runtimeStillClosed', lane: 'O8', state: 'runtime 仍關閉', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightOutcomeBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_lane_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_current_stage=read_only_retry_review_candidate_preflight_outcome_routing',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_visible_lane_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_ready_for_queue_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_returned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_candidate_created_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_reviewer_assigned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_audit_event_emitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_ready_for_connection_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_outcome_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoverySummary = [
  { key: 'queues', value: '8', icon: FileWarning, tone: 'warn' },
  { key: 'submitted', value: '0', icon: ClipboardCheck, tone: 'locked' },
  { key: 'accepted', value: '0', icon: CheckCircle2, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryQueues = [
  { key: 'identitySupplement', queue: 'R1', state: '識別補件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'traceSupplement', queue: 'R2', state: '來源補件', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerScopeSupplement', queue: 'R3', state: '範圍補件', icon: FileText, tone: 'warn' },
  { key: 'redactionResubmission', queue: 'R4', state: '脫敏重送', icon: ShieldCheck, tone: 'locked' },
  { key: 'sourceControlEvidence', queue: 'R5', state: '版本補證', icon: GitBranch, tone: 'warn' },
  { key: 'hostWindowEvidence', queue: 'R6', state: '主機窗口補證', icon: Activity, tone: 'locked' },
  { key: 'toolSummarySupplement', queue: 'R7', state: '工具摘要補件', icon: Radar, tone: 'warn' },
  { key: 'runtimeAttestation', queue: 'R8', state: 'runtime 聲明', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_queue_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_current_stage=read_only_retry_review_candidate_preflight_recovery_ledger',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_visible_queue_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_submitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_rejected_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_quarantined_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_ready_for_preflight_retry_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_candidate_created_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_reviewer_assigned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_audit_event_emitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryRetryGateSummary = [
  { key: 'gates', value: '8', icon: SearchCheck, tone: 'steady' },
  { key: 'candidates', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'passed', value: '0', icon: CheckCircle2, tone: 'locked' },
  { key: 'runtime', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryRetryGates = [
  { key: 'identityGate', gate: 'G1', state: '識別可重試', icon: ClipboardCheck, tone: 'warn' },
  { key: 'traceGate', gate: 'G2', state: '來源可重試', icon: SearchCheck, tone: 'warn' },
  { key: 'ownerScopeGate', gate: 'G3', state: '範圍可重試', icon: FileText, tone: 'warn' },
  { key: 'redactionGate', gate: 'G4', state: '脫敏可重試', icon: ShieldCheck, tone: 'steady' },
  { key: 'sourceControlGate', gate: 'G5', state: '版本可重試', icon: GitBranch, tone: 'warn' },
  { key: 'hostWindowGate', gate: 'G6', state: '主機窗口待證', icon: Activity, tone: 'locked' },
  { key: 'toolSummaryGate', gate: 'G7', state: '摘要可重試', icon: Radar, tone: 'warn' },
  { key: 'runtimeGate', gate: 'G8', state: 'runtime 仍關閉', icon: Lock, tone: 'locked' },
] as const

const iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryRetryGateBoundaries = [
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_gate_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_current_stage=read_only_retry_review_candidate_preflight_recovery_retry_gate',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_visible_gate_count=8',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_candidate_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_submitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_passed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_failed_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_ready_for_preflight_retry_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_ready_for_human_review_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_candidate_created_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_reviewer_assigned_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_audit_event_emitted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_ready_for_runtime_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_owner_response_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_redacted_evidence_pointer_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_source_control_truth_accepted_count=0',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_host_safety_window_approved=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_tool_summary_ingested=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_runtime_gate_open=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_public_secret_exposure_allowed=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_kali_execution_authorized=false',
  'iwooos_product_evidence_wiring_preflight_retry_review_preflight_recovery_retry_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstProgressUnlockPathSteps = [
  { key: 'ownerResponseScope', step: '01', state: '待收件', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidencePointer', step: '02', state: '待補證', icon: FileText, tone: 'warn' },
  { key: 'intakePreflight', step: '03', state: '待預檢', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewAcceptance', step: '04', state: '待接受', icon: CheckCircle2, tone: 'steady' },
  { key: 'headlineReviewCandidate', step: '05', state: '未開啟', icon: Activity, tone: 'locked' },
] as const

const iwooosFirstProgressUnlockPathBoundaries = [
  'iwooos_first_unlock_path_step_count=5',
  'iwooos_first_unlock_path_current_focus=s4_9_owner_response',
  'iwooos_first_unlock_path_owner_response_received_count=0',
  'iwooos_first_unlock_path_owner_response_accepted_count=0',
  'iwooos_first_unlock_path_redacted_evidence_pointer_count=0',
  'iwooos_first_unlock_path_intake_preflight_passed_count=0',
  'iwooos_first_unlock_path_headline_review_authorized=false',
  'iwooos_first_unlock_path_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosCommandMapItems: IwoooSCommandMapItem[] = [
  { key: 'unlock', metric: 'S4.9', icon: ListChecks, tone: 'warn' },
  { key: 'scope', metric: '8/8', icon: Radar, tone: 'steady' },
  { key: 'hosts', metric: '3', icon: Activity, tone: 'warn' },
  { key: 'sourceControl', metric: '0', icon: GitBranch, tone: 'locked' },
  { key: 'awooop', metric: '已接線', icon: Bell, tone: 'steady' },
  { key: 'boundary', metric: '閘門 0', icon: Lock, tone: 'locked' },
]

const iwooosCommandMapBoundaries = [
  'iwooos_command_map_first_layer=true',
  'iwooos_command_map_mode_count=6',
  'iwooos_command_map_default_mode=unlock',
  'iwooos_command_map_above_first_progress_unlock_path=true',
  'iwooos_command_map_navigation_controls_allowed=true',
  'iwooos_command_map_execution_action_buttons_allowed=false',
  'iwooos_command_map_runtime_gate_count=0',
  'iwooos_command_map_kali_execute_authorized=false',
  'iwooos_command_map_host_mutation_authorized=false',
  'iwooos_command_map_source_control_mutation_authorized=false',
  'iwooos_command_map_github_primary_switch_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'not_authorization=true',
] as const

const iwooosExecutiveSnapshotCards: IwoooSExecutiveSnapshotCard[] = [
  { key: 'visibleWork', metric: '7區', icon: CheckCircle2, tone: 'steady' },
  { key: 'assetMesh', metric: '8+3', icon: Network, tone: 'steady' },
  { key: 'nextBlocker', metric: 'S4.9', icon: FileWarning, tone: 'warn' },
  { key: 'reviewFixCandidate', metric: '候選 0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'runtimeLock', metric: '閘門 0', icon: Lock, tone: 'locked' },
]

const iwooosExecutiveSnapshotAxes: IwoooSExecutiveSnapshotAxis[] = [
  { key: 'framework', value: '92%', percent: 92, icon: ShieldCheck, tone: 'steady' },
  { key: 'evidence', value: '0/4', percent: 0, icon: ClipboardCheck, tone: 'warn' },
  { key: 'runtime', value: '0', percent: 0, icon: Lock, tone: 'locked' },
]

const iwooosExecutiveSnapshotBoundaries = [
  'iwooos_executive_snapshot_first_layer=true',
  'iwooos_executive_snapshot_card_count=5',
  'iwooos_executive_snapshot_axis_count=3',
  'iwooos_executive_snapshot_above_focus_deck=true',
  'iwooos_executive_snapshot_explains_done_next_blocked=true',
  'iwooos_executive_snapshot_review_fix_candidate_count=0',
  'iwooos_executive_snapshot_review_fix_candidate_execution_allowed=false',
  'iwooos_executive_snapshot_execution_action_buttons_allowed=false',
  'iwooos_executive_snapshot_runtime_gate_count=0',
  'iwooos_executive_snapshot_owner_response_received_count=0',
  'iwooos_executive_snapshot_owner_response_accepted_count=0',
  'iwooos_executive_snapshot_scan_authorized=false',
  'iwooos_executive_snapshot_host_change_authorized=false',
  'iwooos_executive_snapshot_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosFocusDeckItems: IwoooSFocusDeckItem[] = [
  { key: 'workMap', href: '#iwooos-decision-gate-visuals', metric: '6', icon: Radar, tone: 'warn' },
  { key: 'unlockPath', href: '#iwooos-decision-gate-visuals', metric: 'S4.9', icon: ListChecks, tone: 'warn' },
  { key: 'productScope', href: '#iwooos-scope-evidence-visuals', metric: '9/9', icon: ShieldCheck, tone: 'steady' },
  { key: 'hostTools', href: '#iwooos-scope-evidence-visuals', metric: '3', icon: Activity, tone: 'warn' },
  { key: 'sourceControl', href: '#iwooos-decision-gate-visuals', metric: '0', icon: GitBranch, tone: 'locked' },
]

const iwooosFocusDeckBoundaries = [
  'iwooos_focus_deck_first_layer=true',
  'iwooos_focus_deck_item_count=5',
  'iwooos_focus_deck_anchor_navigation_allowed=true',
  'iwooos_focus_deck_execution_action_buttons_allowed=false',
  'iwooos_focus_deck_runtime_gate_count=0',
  'iwooos_focus_deck_above_command_map=true',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosImmediateVisualMeshNodes: IwoooSImmediateVisualMeshNode[] = [
  { key: 'products', metric: '9', icon: ShieldCheck, tone: 'steady' },
  { key: 'hosts', metric: '112 / 111 / 168', icon: Activity, tone: 'warn' },
  { key: 'sourceControl', metric: 'S4.9', icon: GitBranch, tone: 'warn' },
  { key: 'monitoring', metric: '6', icon: Radar, tone: 'steady' },
  { key: 'awooop', metric: '已接線', icon: Bell, tone: 'steady' },
  { key: 'runtimeGate', metric: '閘門 0', icon: Lock, tone: 'locked' },
]

const iwooosImmediateVisualMeshStats = [
  { key: 'assetScope', value: '9', icon: Radar, tone: 'steady' },
  { key: 'hostScope', value: '3', icon: Activity, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosImmediateVisualMeshBoundaries = [
  'iwooos_immediate_visual_mesh_first_layer=true',
  'iwooos_immediate_visual_mesh_node_count=7',
  'iwooos_immediate_visual_mesh_link_count=6',
  'iwooos_immediate_visual_mesh_above_command_map=true',
  'iwooos_immediate_visual_mesh_anchor_navigation_allowed=false',
  'iwooos_immediate_visual_mesh_execution_action_buttons_allowed=false',
  'iwooos_immediate_visual_mesh_runtime_gate_count=0',
  'iwooos_immediate_visual_mesh_scan_authorized=false',
  'iwooos_immediate_visual_mesh_host_change_authorized=false',
  'iwooos_immediate_visual_mesh_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosTopologyAtlasLenses: IwoooSTopologyAtlasLens[] = [
  { key: 'architecture', metric: '5層', icon: Boxes, tone: 'steady' },
  { key: 'topology', metric: '3主機', icon: Network, tone: 'warn' },
  { key: 'attackSurface', metric: '9面', icon: Route, tone: 'warn' },
  { key: 'evidenceFlow', metric: '閘門 0', icon: Workflow, tone: 'locked' },
]

const iwooosTopologyAtlasNodes: IwoooSTopologyAtlasNode[] = [
  { key: 'productSurface', metric: '9', x: 14, y: 30, icon: Boxes, tone: 'steady' },
  { key: 'sourceControl', metric: 'S4.9', x: 35, y: 18, icon: Code2, tone: 'warn' },
  { key: 'kali', metric: '112', x: 58, y: 30, icon: Server, tone: 'warn' },
  { key: 'devHosts', metric: '111 / 168', x: 77, y: 50, icon: Network, tone: 'warn' },
  { key: 'monitoring', metric: '6', x: 37, y: 66, icon: Radar, tone: 'steady' },
  { key: 'awooopTruth', metric: '已接線', x: 62, y: 78, icon: Workflow, tone: 'steady' },
  { key: 'runtimeGate', metric: '0', x: 88, y: 24, icon: Lock, tone: 'locked' },
]

const iwooosTopologyAtlasEdges: readonly (readonly [IwoooSTopologyNodeKey, IwoooSTopologyNodeKey])[] = [
  ['productSurface', 'sourceControl'],
  ['sourceControl', 'kali'],
  ['sourceControl', 'monitoring'],
  ['kali', 'devHosts'],
  ['devHosts', 'runtimeGate'],
  ['monitoring', 'awooopTruth'],
  ['awooopTruth', 'runtimeGate'],
] as const

const iwooosTopologyAtlasCompactPositions: Record<IwoooSTopologyNodeKey, { x: number; y: number }> = {
  productSurface: { x: 28, y: 24 },
  sourceControl: { x: 72, y: 24 },
  kali: { x: 28, y: 43 },
  devHosts: { x: 72, y: 43 },
  monitoring: { x: 28, y: 63 },
  awooopTruth: { x: 72, y: 63 },
  runtimeGate: { x: 50, y: 82 },
}

const iwooosTopologyAtlasLayers: IwoooSTopologyAtlasLayer[] = [
  { key: 'externalSurface', metric: '9', icon: Cloud, tone: 'steady' },
  { key: 'codeSupply', metric: 'S4.9', icon: GitBranch, tone: 'warn' },
  { key: 'hostFabric', metric: '3', icon: Server, tone: 'warn' },
  { key: 'evidenceOps', metric: '6', icon: Database, tone: 'steady' },
  { key: 'gateControl', metric: '0', icon: Lock, tone: 'locked' },
]

const iwooosTopologyAtlasCharts: IwoooSTopologyAtlasChart[] = [
  { key: 'contextDepth', value: '4段', percent: 74, icon: Route, tone: 'steady' },
  { key: 'blastRadius', value: '0', percent: 0, icon: Lock, tone: 'locked' },
  { key: 'evidenceFreshness', value: 'S4.9', percent: 61, icon: ClipboardCheck, tone: 'warn' },
]

const iwooosTopologyDrilldownNodes: IwoooSTopologyDrilldownNode[] = [
  {
    key: 'productSurface',
    relationCode: '9 資產',
    evidenceCode: '只讀',
    nextCode: 'S4.9',
    boundaryCode: '執行閘 0',
    icon: Boxes,
    tone: 'steady',
  },
  {
    key: 'sourceControl',
    relationCode: 'GitHub / Gitea',
    evidenceCode: '負責人回覆 0',
    nextCode: '決策紀錄',
    boundaryCode: '變更 0',
    icon: Code2,
    tone: 'warn',
  },
  {
    key: 'kali',
    relationCode: '192.168.0.112',
    evidenceCode: '只讀觀測',
    nextCode: '範圍批准',
    boundaryCode: '掃描 0',
    icon: Server,
    tone: 'warn',
  },
  {
    key: 'devHosts',
    relationCode: '192.168.0.111 / 168',
    evidenceCode: '主機窗口 0',
    nextCode: '負責人窗口',
    boundaryCode: '變更 0',
    icon: Network,
    tone: 'warn',
  },
  {
    key: 'monitoring',
    relationCode: '6 工具線',
    evidenceCode: '已鏡像',
    nextCode: '新鮮度',
    boundaryCode: '執行期 0',
    icon: Radar,
    tone: 'steady',
  },
  {
    key: 'awooopTruth',
    relationCode: '平行工作',
    evidenceCode: '已接線',
    nextCode: '審查者',
    boundaryCode: '批准 0',
    icon: Workflow,
    tone: 'steady',
  },
  {
    key: 'runtimeGate',
    relationCode: '人工閘',
    evidenceCode: '關閉',
    nextCode: '正式決策',
    boundaryCode: '執行 0',
    icon: Lock,
    tone: 'locked',
  },
]

const iwooosTopologyPathExplorerPaths: IwoooSTopologyPathExplorerPath[] = [
  {
    key: 'externalToGate',
    metric: '5節點',
    nodes: ['productSurface', 'sourceControl', 'monitoring', 'awooopTruth', 'runtimeGate'],
    icon: Route,
    tone: 'warn',
  },
  {
    key: 'sourceToHost',
    metric: '4節點',
    nodes: ['sourceControl', 'kali', 'devHosts', 'runtimeGate'],
    icon: GitBranch,
    tone: 'warn',
  },
  {
    key: 'kaliToDev',
    metric: '3節點',
    nodes: ['kali', 'devHosts', 'runtimeGate'],
    icon: Server,
    tone: 'warn',
  },
  {
    key: 'evidenceToGate',
    metric: '3節點',
    nodes: ['monitoring', 'awooopTruth', 'runtimeGate'],
    icon: Workflow,
    tone: 'steady',
  },
]

const iwooosTopologyInsightDeck: IwoooSTopologyInsightItem[] = [
  {
    key: 'assetContext',
    metric: '8資產',
    percent: 68,
    lensKey: 'architecture',
    pathKey: 'externalToGate',
    nodes: ['productSurface', 'sourceControl', 'monitoring'],
    icon: Boxes,
    tone: 'steady',
  },
  {
    key: 'attackPath',
    metric: '4路徑',
    percent: 61,
    lensKey: 'attackSurface',
    pathKey: 'sourceToHost',
    nodes: ['sourceControl', 'kali', 'devHosts', 'runtimeGate'],
    icon: Route,
    tone: 'warn',
  },
  {
    key: 'blastRadius',
    metric: '0驗證',
    percent: 0,
    lensKey: 'attackSurface',
    pathKey: 'kaliToDev',
    nodes: ['kali', 'devHosts', 'runtimeGate'],
    icon: Lock,
    tone: 'locked',
  },
  {
    key: 'evidenceTimeline',
    metric: 'S4.9',
    percent: 54,
    lensKey: 'evidenceFlow',
    pathKey: 'evidenceToGate',
    nodes: ['monitoring', 'awooopTruth', 'runtimeGate'],
    icon: Clock3,
    tone: 'warn',
  },
]

const iwooosTopologyAtlasBoundaries = [
  'iwooos_topology_atlas_first_layer=true',
  'iwooos_topology_atlas_lens_count=4',
  'iwooos_topology_atlas_node_count=7',
  'iwooos_topology_drilldown_node_count=7',
  'iwooos_topology_drilldown_default_node=productSurface',
  'iwooos_topology_drilldown_interactive_node_allowed=true',
  'iwooos_topology_path_explorer_path_count=4',
  'iwooos_topology_path_explorer_default_path=externalToGate',
  'iwooos_topology_path_explorer_interactive_path_allowed=true',
  'iwooos_topology_intelligence_deck_count=4',
  'iwooos_topology_intelligence_default_item=assetContext',
  'iwooos_topology_intelligence_interactive_item_allowed=true',
  'iwooos_topology_atlas_layer_count=5',
  'iwooos_topology_atlas_technical_chart_count=3',
  'iwooos_topology_atlas_interactive_lens_allowed=true',
  'iwooos_topology_atlas_execution_action_buttons_allowed=false',
  'iwooos_topology_drilldown_execution_action_buttons_allowed=false',
  'iwooos_topology_path_explorer_execution_action_buttons_allowed=false',
  'iwooos_topology_intelligence_execution_action_buttons_allowed=false',
  'iwooos_topology_atlas_runtime_gate_count=0',
  'iwooos_topology_drilldown_runtime_gate_count=0',
  'iwooos_topology_path_explorer_runtime_gate_count=0',
  'iwooos_topology_intelligence_runtime_gate_count=0',
  'iwooos_topology_atlas_scan_authorized=false',
  'iwooos_topology_atlas_host_change_authorized=false',
  'iwooos_topology_atlas_source_control_mutation_authorized=false',
  'iwooos_topology_drilldown_scan_authorized=false',
  'iwooos_topology_drilldown_host_change_authorized=false',
  'iwooos_topology_drilldown_source_control_mutation_authorized=false',
  'iwooos_topology_path_explorer_scan_authorized=false',
  'iwooos_topology_path_explorer_host_change_authorized=false',
  'iwooos_topology_path_explorer_source_control_mutation_authorized=false',
  'iwooos_topology_intelligence_scan_authorized=false',
  'iwooos_topology_intelligence_host_change_authorized=false',
  'iwooos_topology_intelligence_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosDecisionRunwaySteps: IwoooSDecisionRunwayStep[] = [
  { key: 'ownerEvidence', metric: '0/4', progress: 18, icon: FileWarning, tone: 'warn' },
  { key: 'reviewerAcceptance', metric: '0/5', progress: 12, icon: ClipboardCheck, tone: 'warn' },
  { key: 'hostWindow', metric: '112 / 111 / 168', progress: 35, icon: Server, tone: 'warn' },
  { key: 'githubPrimary', metric: 'S4.9', progress: 22, icon: GitBranch, tone: 'warn' },
  { key: 'runtimeGate', metric: '閘門 0', progress: 0, icon: Lock, tone: 'locked' },
]

const iwooosDecisionRunwayDependencies: IwoooSDecisionRunwayDependency[] = [
  { key: 'iwooos', value: '前台', icon: ShieldCheck, tone: 'steady' },
  { key: 'awooop', value: '真相鏈', icon: Workflow, tone: 'steady' },
  { key: 'vibework', value: '納管', icon: Boxes, tone: 'steady' },
  { key: 'agentBounty', value: '新專案', icon: Workflow, tone: 'warn' },
  { key: 'kali', value: '只讀', icon: Server, tone: 'warn' },
  { key: 'devHosts', value: '窗口', icon: Network, tone: 'warn' },
  { key: 'monitoring', value: '證據', icon: Radar, tone: 'steady' },
]

const iwooosDecisionRunwayBoundarySignals: IwoooSDecisionRunwayBoundarySignal[] = [
  { key: 'scan', value: 'false', icon: SearchCheck, tone: 'locked' },
  { key: 'hostChange', value: 'false', icon: Server, tone: 'locked' },
  { key: 'sourceMutation', value: 'false', icon: GitBranch, tone: 'locked' },
  { key: 'runtimeExecution', value: 'false', icon: Lock, tone: 'locked' },
]

const iwooosDecisionRunwayBoundaries = [
  'iwooos_decision_runway_first_layer=true',
  'iwooos_decision_runway_step_count=5',
  'iwooos_decision_runway_default_step=ownerEvidence',
  'iwooos_decision_runway_dependency_count=7',
  'iwooos_decision_runway_boundary_signal_count=4',
  'iwooos_decision_runway_above_gate_radar=true',
  'iwooos_decision_runway_interactive_step_allowed=true',
  'iwooos_decision_runway_execution_action_buttons_allowed=false',
  'iwooos_decision_runway_runtime_gate_count=0',
  'iwooos_decision_runway_owner_response_received_count=0',
  'iwooos_decision_runway_owner_response_accepted_count=0',
  'iwooos_decision_runway_scan_authorized=false',
  'iwooos_decision_runway_host_change_authorized=false',
  'iwooos_decision_runway_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosGateRadarLanes: IwoooSGateRadarLane[] = [
  { key: 'visible', metric: '8/8', score: 92, icon: ShieldCheck, tone: 'steady' },
  { key: 'blocker', metric: 'S4.9', score: 64, icon: FileWarning, tone: 'warn' },
  { key: 'review', metric: '0/5', score: 40, icon: ClipboardCheck, tone: 'warn' },
  { key: 'locked', metric: '閘門 0', score: 0, icon: Lock, tone: 'locked' },
]

const iwooosGateRadarSummary = [
  { key: 'visibleScope', value: '8/8', icon: ShieldCheck, tone: 'steady' },
  { key: 'currentBlocker', value: 'S4.9', icon: FileWarning, tone: 'warn' },
  { key: 'runtimeGate', value: '0', icon: Lock, tone: 'locked' },
] as const

const iwooosGateRadarBoundaries = [
  'iwooos_gate_radar_first_layer=true',
  'iwooos_gate_radar_lane_count=4',
  'iwooos_gate_radar_default_lane=visible',
  'iwooos_gate_radar_above_command_map=true',
  'iwooos_gate_radar_interactive_lens_allowed=true',
  'iwooos_gate_radar_execution_action_buttons_allowed=false',
  'iwooos_gate_radar_runtime_gate_count=0',
  'iwooos_gate_radar_scan_authorized=false',
  'iwooos_gate_radar_host_change_authorized=false',
  'iwooos_gate_radar_source_control_mutation_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

const iwooosFirstUnlockEvidencePacketSlots = [
  { key: 'ownerDecisionMetadata', slot: '01', state: '待補', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeEvidenceRefs', slot: '02', state: '待補', icon: GitBranch, tone: 'warn' },
  { key: 'redactionAttestation', slot: '03', state: '待檢', icon: FileText, tone: 'warn' },
  { key: 'preflightTrace', slot: '04', state: '未通過', icon: SearchCheck, tone: 'locked' },
  { key: 'reviewAcceptanceSummary', slot: '05', state: '未接受', icon: CheckCircle2, tone: 'locked' },
] as const

const iwooosFirstUnlockEvidencePacketBoundaries = [
  'iwooos_first_unlock_evidence_packet_slot_count=5',
  'iwooos_first_unlock_evidence_packet_current_focus=s4_9_owner_response',
  'iwooos_first_unlock_evidence_packet_filled_count=0',
  'iwooos_first_unlock_evidence_packet_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_redacted_pointer_required=true',
  'iwooos_first_unlock_evidence_packet_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketPreflightOutcomes = [
  { key: 'readyForReview', lane: '01', state: '可審查', icon: CheckCircle2, tone: 'steady' },
  { key: 'needsOwnerMetadata', lane: '02', state: '補 metadata', icon: ClipboardCheck, tone: 'warn' },
  { key: 'needsScopeRefs', lane: '03', state: '補參照', icon: GitBranch, tone: 'warn' },
  { key: 'quarantineRawPayload', lane: '04', state: '隔離', icon: FileWarning, tone: 'locked' },
  { key: 'rejectSecretValue', lane: '05', state: '拒收', icon: Lock, tone: 'locked' },
  { key: 'waitingReviewer', lane: '06', state: '等待', icon: Clock3, tone: 'warn' },
] as const

const iwooosFirstUnlockEvidencePacketPreflightOutcomeBoundaries = [
  'iwooos_first_unlock_evidence_packet_preflight_outcome_lane_count=6',
  'iwooos_first_unlock_evidence_packet_preflight_ready_for_review_count=0',
  'iwooos_first_unlock_evidence_packet_preflight_needs_supplement_count=0',
  'iwooos_first_unlock_evidence_packet_preflight_quarantined_count=0',
  'iwooos_first_unlock_evidence_packet_preflight_rejected_count=0',
  'iwooos_first_unlock_evidence_packet_review_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketSupplementPathSteps = [
  { key: 'ownerMetadataPatch', step: '01', state: '補 owner', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeRefsPatch', step: '02', state: '補參照', icon: GitBranch, tone: 'warn' },
  { key: 'redactionPatch', step: '03', state: '補脫敏', icon: FileText, tone: 'warn' },
  { key: 'preflightTracePatch', step: '04', state: '補軌跡', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewerQueuePatch', step: '05', state: '待審查', icon: Clock3, tone: 'locked' },
] as const

const iwooosFirstUnlockEvidencePacketSupplementPathBoundaries = [
  'iwooos_first_unlock_evidence_packet_supplement_path_step_count=5',
  'iwooos_first_unlock_evidence_packet_supplement_current_focus=owner_metadata_and_scope_refs',
  'iwooos_first_unlock_evidence_packet_supplement_ready_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_submitted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_blocked_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_quarantined_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_request_sent=false',
  'iwooos_first_unlock_evidence_packet_supplement_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_supplement_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketSupplementPreReviewChecks = [
  { key: 'ownerMetadataComplete', check: 'C1', state: '待檢', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeRefsTraceable', check: 'C2', state: '待檢', icon: GitBranch, tone: 'warn' },
  { key: 'redactionAttested', check: 'C3', state: '待檢', icon: Lock, tone: 'locked' },
  { key: 'preflightTraceAttached', check: 'C4', state: '待檢', icon: SearchCheck, tone: 'warn' },
  { key: 'noMutationClauseHeld', check: 'C5', state: '鎖定', icon: FileWarning, tone: 'locked' },
  { key: 'reviewerQueueReady', check: 'C6', state: '未開', icon: Clock3, tone: 'locked' },
] as const

const iwooosFirstUnlockEvidencePacketSupplementPreReviewBoundaries = [
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_check_count=6',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_current_focus=supplement_pre_review',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_passed_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_failed_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_ready_for_review_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_queue_open=false',
  'iwooos_first_unlock_evidence_packet_supplement_request_sent=false',
  'iwooos_first_unlock_evidence_packet_supplement_submitted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_supplement_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketSupplementPreReviewOutcomeLanes = [
  { key: 'readyForReviewerQueue', lane: 'O1', state: '可排隊', icon: CheckCircle2, tone: 'steady' },
  { key: 'returnToSupplement', lane: 'O2', state: '退回補件', icon: ListChecks, tone: 'warn' },
  { key: 'quarantineSensitiveMaterial', lane: 'O3', state: '隔離', icon: Lock, tone: 'locked' },
  { key: 'rejectMutationRequest', lane: 'O4', state: '拒收', icon: FileWarning, tone: 'locked' },
  { key: 'keepQueueClosed', lane: 'O5', state: '佇列未開', icon: Clock3, tone: 'locked' },
  { key: 'waitReviewerAssignment', lane: 'O6', state: '待指派', icon: SearchCheck, tone: 'warn' },
] as const

const iwooosFirstUnlockEvidencePacketSupplementPreReviewOutcomeBoundaries = [
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_outcome_lane_count=6',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_ready_for_queue_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_returned_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_quarantined_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_rejected_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_reviewer_assigned_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_queue_open=false',
  'iwooos_first_unlock_evidence_packet_supplement_request_sent=false',
  'iwooos_first_unlock_evidence_packet_supplement_submitted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_supplement_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketReviewerAssignmentPreparationPackets = [
  { key: 'queueStatusFreeze', packet: 'P1', state: '凍結佇列', icon: Clock3, tone: 'locked' },
  { key: 'reviewerRoleBoundary', packet: 'P2', state: '角色邊界', icon: ShieldCheck, tone: 'locked' },
  { key: 'scopePacket', packet: 'P3', state: '範圍包', icon: GitBranch, tone: 'warn' },
  { key: 'evidencePointerIndex', packet: 'P4', state: '證據索引', icon: SearchCheck, tone: 'warn' },
  { key: 'conflictDisclosure', packet: 'P5', state: '衝突揭露', icon: FileWarning, tone: 'locked' },
  { key: 'assignmentAuditDraft', packet: 'P6', state: '稽核草稿', icon: FileText, tone: 'warn' },
] as const

const iwooosFirstUnlockEvidencePacketReviewerAssignmentPreparationBoundaries = [
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preparation_packet_count=6',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preparation_current_focus=reviewer_assignment_preparation',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preparation_ready_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preparation_reviewer_candidate_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preparation_reviewer_assigned_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preparation_audit_event_emitted=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_ready_for_queue_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_queue_open=false',
  'iwooos_first_unlock_evidence_packet_supplement_request_sent=false',
  'iwooos_first_unlock_evidence_packet_supplement_submitted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_supplement_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightChecks = [
  { key: 'queueStillClosed', check: 'C1', state: '鎖定', icon: Clock3, tone: 'locked' },
  { key: 'roleBoundaryTraceable', check: 'C2', state: '待檢', icon: ShieldCheck, tone: 'locked' },
  { key: 'scopePacketTraceable', check: 'C3', state: '待檢', icon: GitBranch, tone: 'warn' },
  { key: 'evidenceIndexRedacted', check: 'C4', state: '待檢', icon: Lock, tone: 'locked' },
  { key: 'conflictDisclosureClear', check: 'C5', state: '待釐清', icon: FileWarning, tone: 'warn' },
  { key: 'auditDraftMetadataOnly', check: 'C6', state: '待檢', icon: FileText, tone: 'warn' },
] as const

const iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightBoundaries = [
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_check_count=6',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_current_focus=reviewer_assignment_preflight',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_passed_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_failed_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_ready_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_reviewer_candidate_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_reviewer_assigned_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_queue_open=false',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_audit_event_emitted=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_ready_for_queue_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_queue_open=false',
  'iwooos_first_unlock_evidence_packet_supplement_request_sent=false',
  'iwooos_first_unlock_evidence_packet_supplement_submitted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_supplement_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightOutcomeLanes = [
  { key: 'keepQueueClosed', outcome: 'O1', state: '維持關閉', icon: Clock3, tone: 'locked' },
  { key: 'returnRoleBoundary', outcome: 'O2', state: '退回補齊', icon: ShieldCheck, tone: 'locked' },
  { key: 'returnScopePacket', outcome: 'O3', state: '退回補齊', icon: GitBranch, tone: 'warn' },
  { key: 'quarantineEvidenceIndex', outcome: 'O4', state: '隔離', icon: Lock, tone: 'locked' },
  { key: 'holdConflictDisclosure', outcome: 'O5', state: '暫停', icon: AlertTriangle, tone: 'warn' },
  { key: 'keepAuditDraftMetadataOnly', outcome: 'O6', state: '保留草稿', icon: FileText, tone: 'warn' },
] as const

const iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightOutcomeBoundaries = [
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_lane_count=6',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_current_focus=reviewer_assignment_preflight_outcomes',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_ready_for_candidate_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_returned_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_quarantined_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_conflict_hold_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_outcome_audit_event_emitted=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_reviewer_candidate_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_reviewer_assigned_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_queue_open=false',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_passed_count=0',
  'iwooos_first_unlock_evidence_packet_reviewer_assignment_preflight_ready_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_pre_review_queue_open=false',
  'iwooos_first_unlock_evidence_packet_supplement_request_sent=false',
  'iwooos_first_unlock_evidence_packet_supplement_submitted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_accepted_count=0',
  'iwooos_first_unlock_evidence_packet_supplement_raw_payload_allowed=false',
  'iwooos_first_unlock_evidence_packet_supplement_secret_value_allowed=false',
  'iwooos_first_unlock_evidence_packet_headline_review_authorized=false',
  'iwooos_first_unlock_evidence_packet_runtime_gate_opened=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
] as const

const posturePillars: Pillar[] = [
  { key: 'exposure', icon: Radar, tone: 'warn' },
  { key: 'sourceControl', icon: GitBranch, tone: 'warn' },
  { key: 'kali', icon: Activity, tone: 'steady' },
  { key: 'governance', icon: ShieldCheck, tone: 'locked' },
]

const nonBlockingLanes: Lane[] = [
  { key: 'lowMedium', mode: 'warn' },
  { key: 'ownerMissing', mode: 'observe' },
  { key: 'mirrorIncomplete', mode: 'warn' },
  { key: 'sourceDrift', mode: 'warn' },
  { key: 'kaliObserve', mode: 'warn' },
  { key: 'workflowGap', mode: 'warn' },
  { key: 'progressHolding', mode: 'observe' },
]

const existingSecuritySurfaces: SecuritySurface[] = [
  { key: 'securityCompliance', href: '/security-compliance', icon: ShieldCheck, tone: 'steady' },
  { key: 'legacySecurity', href: '/security', icon: Radar, tone: 'warn' },
  { key: 'legacyCompliance', href: '/compliance', icon: ClipboardCheck, tone: 'warn' },
  { key: 'alerts', href: '/alerts', icon: Bell, tone: 'warn' },
  { key: 'errors', href: '/errors', icon: FileWarning, tone: 'warn' },
  { key: 'authorizations', href: '/authorizations', icon: Lock, tone: 'locked' },
  { key: 'governance', href: '/governance', icon: ShieldCheck, tone: 'locked' },
  { key: 'alertOperationLogs', href: '/alert-operation-logs', icon: ListChecks, tone: 'steady' },
  { key: 'awooopApprovals', href: '/awooop/approvals', icon: ClipboardCheck, tone: 'locked' },
  { key: 'codeReview', href: '/code-review', icon: SearchCheck, tone: 'warn' },
]

const surfaceConnectionStatuses: SurfaceConnectionStatus[] = [
  { key: 'securityCompliance', href: '/security-compliance', state: 'embeddedBridge', icon: ShieldCheck, tone: 'steady' },
  { key: 'legacySecurity', href: '/security', state: 'directBridge', icon: Radar, tone: 'warn' },
  { key: 'legacyCompliance', href: '/compliance', state: 'directBridge', icon: ClipboardCheck, tone: 'warn' },
  { key: 'alerts', href: '/alerts', state: 'directBridge', icon: Bell, tone: 'warn' },
  { key: 'errors', href: '/errors', state: 'directBridge', icon: FileWarning, tone: 'warn' },
  { key: 'authorizations', href: '/authorizations', state: 'directBridge', icon: Lock, tone: 'locked' },
  { key: 'governance', href: '/governance', state: 'directBridge', icon: ShieldCheck, tone: 'locked' },
  { key: 'alertOperationLogs', href: '/alert-operation-logs', state: 'directBridge', icon: ListChecks, tone: 'steady' },
  { key: 'awooopApprovals', href: '/awooop/approvals', state: 'awooopCandidate', icon: ClipboardCheck, tone: 'locked' },
  { key: 'codeReview', href: '/code-review', state: 'reviewHandoffCandidate', icon: SearchCheck, tone: 'warn' },
]

const awooopCoverageStatuses: AwoooPCoverageStatus[] = [
  { key: 'home', href: '/awooop', route: '/awooop', stage: 'S2.72', icon: ShieldCheck, tone: 'steady' },
  { key: 'workItems', href: '/awooop/work-items', route: '/awooop/work-items', stage: 'S2.73', icon: ListChecks, tone: 'steady' },
  { key: 'contracts', href: '/awooop/contracts', route: '/awooop/contracts', stage: 'S2.74', icon: FileText, tone: 'steady' },
  { key: 'approvals', href: '/awooop/approvals', route: '/awooop/approvals', stage: 'S2.75', icon: ClipboardCheck, tone: 'locked' },
  { key: 'tenants', href: '/awooop/tenants', route: '/awooop/tenants', stage: 'S2.76', icon: Radar, tone: 'steady' },
  { key: 'runs', href: '/awooop/runs', route: '/awooop/runs', stage: 'S2.77', icon: Activity, tone: 'steady' },
  { key: 'runDetail', href: '/awooop/runs', route: '/awooop/runs/[run_id]', stage: 'S2.78', icon: SearchCheck, tone: 'warn' },
  { key: 'approvalDecision', href: '/awooop/approvals', route: '/awooop/approvals/[run_id]', stage: 'S2.79', icon: Lock, tone: 'locked' },
]

const awooopCoverageBoundaries = [
  'awooop_route_coverage_count=8',
  'awooop_route_coverage_visible_count=8',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'secret_value_collection_allowed=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const securityConvergenceSteps: SecurityConvergenceStep[] = [
  { key: 'visibilityFirst', step: 'R1', value: '8/8', icon: SearchCheck, tone: 'steady' },
  { key: 'ownerResponse', step: 'R2', value: '0/22', icon: ClipboardCheck, tone: 'warn' },
  { key: 'redactedEvidence', step: 'R3', value: '0', icon: FileText, tone: 'warn' },
  { key: 'humanDecision', step: 'R4', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'runtimeGate', step: 'R5', value: '0', icon: Lock, tone: 'locked' },
  { key: 'sourceControlCutover', step: 'R6', value: '0', icon: GitBranch, tone: 'locked' },
]

const securityConvergenceBoundaries = [
  'phase_tightening_mode=gradual',
  'initial_enforcement_level=observe_warn_only',
  'blocking_controls_enabled=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'owner_response_required_before_blocking=true',
  'not_authorization=true',
  'kali_execute_authorized=false',
  'host_update_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseCollectionPackets: OwnerResponseCollectionPacket[] = [
  { key: 'giteaAttestation', packet: 'S4.9', value: '0/5', icon: ClipboardCheck, tone: 'warn' },
  { key: 'githubTarget', packet: 'S4.10', value: '0/7', icon: GitBranch, tone: 'warn' },
  { key: 'refsTruth', packet: 'S4.11', value: '0/5', icon: SearchCheck, tone: 'warn' },
  { key: 'workflowSecretNames', packet: 'S4.12', value: '0/5', icon: FileWarning, tone: 'locked' },
]

const ownerResponseCollectionBoundaries = [
  'owner_response_collection_packet_count=4',
  'owner_response_required_template_count=24',
  'owner_response_received_count=0',
  'owner_response_accepted_count=0',
  'owner_response_rejected_count=0',
  'owner_response_collection_mode=human_intake_only',
  'request_packet_visible=true',
  'response_packet_created=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
]

const ownerResponseIntakeSafetyRules: OwnerResponseIntakeSafetyRule[] = [
  { key: 'redactedEvidenceOnly', lane: 'I1', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'ownerScopeCompletion', lane: 'I2', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'secretValueQuarantine', lane: 'I3', value: '0', icon: Lock, tone: 'locked' },
  { key: 'repoMutationRequest', lane: 'I4', value: '0', icon: GitBranch, tone: 'locked' },
  { key: 'refsMutationRequest', lane: 'I5', value: '0', icon: SearchCheck, tone: 'locked' },
  { key: 'runtimeExecutionRequest', lane: 'I6', value: '0', icon: AlertTriangle, tone: 'locked' },
]

const ownerResponseIntakeSafetyBoundaries = [
  'owner_response_intake_safety_rule_count=6',
  'owner_response_payload_ingested_count=0',
  'owner_response_quarantine_count=0',
  'owner_response_rejection_count=0',
  'owner_response_auto_accept_allowed=false',
  'owner_response_secret_value_quarantine_required=true',
  'owner_response_mutation_request_allowed=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'kali_execute_authorized=false',
]

const ownerResponseReviewOutcomeLanes: OwnerResponseReviewOutcomeLane[] = [
  { key: 'remainWaiting', lane: 'O1', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'needsEvidence', lane: 'O2', value: '0', icon: FileWarning, tone: 'warn' },
  { key: 'readyForHumanReview', lane: 'O3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'quarantined', lane: 'O4', value: '0', icon: Lock, tone: 'locked' },
  { key: 'rejected', lane: 'O5', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'readonlyUpdate', lane: 'O6', value: '0', icon: FileText, tone: 'steady' },
  { key: 'humanDecisionRequired', lane: 'O7', value: '0', icon: ListChecks, tone: 'locked' },
]

const ownerResponseReviewOutcomeBoundaries = [
  'owner_response_review_outcome_lane_count=7',
  'owner_response_review_ready_count=0',
  'owner_response_review_accepted_count=0',
  'owner_response_review_escalated_count=0',
  'owner_response_review_runtime_gate_count=0',
  'owner_response_review_auto_decision_allowed=false',
  'owner_response_review_human_decision_required=true',
  'owner_response_review_only_updates_readonly_state=true',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
]

const ownerResponseHumanDecisionQueueItems: OwnerResponseHumanDecisionQueueItem[] = [
  { key: 'decisionPacketDraft', queue: 'D1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'evidenceTraceBundle', queue: 'D2', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewerAssignment', queue: 'D3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'rollbackWindowCandidate', queue: 'D4', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateSeparated', queue: 'D5', value: '0', icon: ShieldCheck, tone: 'locked' },
  { key: 'sourceControlCutoverSeparated', queue: 'D6', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseHumanDecisionQueueBoundaries = [
  'owner_response_human_decision_queue_item_count=6',
  'owner_response_human_decision_ready_count=0',
  'owner_response_human_decision_approved_count=0',
  'owner_response_human_decision_runtime_gate_count=0',
  'owner_response_human_decision_record_created=false',
  'owner_response_human_decision_auto_approval_allowed=false',
  'owner_response_human_decision_requires_reviewer=true',
  'owner_response_human_decision_only_prepares_packet=true',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseDecisionRecordDraftGuardItems: OwnerResponseDecisionRecordDraftGuardItem[] = [
  { key: 'recordIdentityDraft', guard: 'R1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'decisionScopeSnapshot', guard: 'R2', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewerRolePlaceholder', guard: 'R3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'evidenceVersionFreeze', guard: 'R4', value: '0', icon: Lock, tone: 'locked' },
  { key: 'approvalNotExecutionBoundary', guard: 'R5', value: '0', icon: ShieldCheck, tone: 'locked' },
  { key: 'followupRuntimeGatePointer', guard: 'R6', value: '0', icon: FileWarning, tone: 'locked' },
]

const ownerResponseDecisionRecordDraftGuardBoundaries = [
  'owner_response_decision_record_draft_guard_count=6',
  'owner_response_decision_record_draft_created_count=0',
  'owner_response_decision_record_formal_count=0',
  'owner_response_decision_record_approved_count=0',
  'owner_response_decision_record_runtime_gate_count=0',
  'owner_response_decision_record_draft_only=true',
  'owner_response_decision_record_write_authorized=false',
  'owner_response_decision_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordCandidatePreflightItems: OwnerResponseFormalRecordCandidatePreflightItem[] = [
  { key: 'candidateIdentityTrace', check: 'F1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'reviewerIdentityBoundary', check: 'F2', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'evidenceVersionChain', check: 'F3', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'scopeAndExpiry', check: 'F4', value: '0', icon: Radar, tone: 'warn' },
  { key: 'riskRollbackField', check: 'F5', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateSeparation', check: 'F6', value: '0', icon: ShieldCheck, tone: 'locked' },
  { key: 'sourceControlSeparation', check: 'F7', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordCandidatePreflightBoundaries = [
  'owner_response_formal_record_candidate_preflight_count=7',
  'owner_response_formal_record_candidate_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_candidate_only=true',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordCandidateOutcomeLanes: OwnerResponseFormalRecordCandidateOutcomeLane[] = [
  { key: 'remainCandidateWaiting', lane: 'V1', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'returnToDraft', lane: 'V2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'needsEvidenceRefresh', lane: 'V3', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'needsReviewerClarification', lane: 'V4', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'readyForRecordOwner', lane: 'V5', value: '0', icon: CheckCircle2, tone: 'steady' },
  { key: 'quarantineSensitivePayload', lane: 'V6', value: '0', icon: Lock, tone: 'locked' },
  { key: 'rejectMutationRequest', lane: 'V7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeOrCutoverGateRequired', lane: 'V8', value: '0', icon: ShieldCheck, tone: 'locked' },
]

const ownerResponseFormalRecordCandidateOutcomeBoundaries = [
  'owner_response_formal_record_candidate_outcome_lane_count=8',
  'owner_response_formal_record_candidate_ready_count=0',
  'owner_response_formal_record_candidate_returned_count=0',
  'owner_response_formal_record_candidate_quarantine_count=0',
  'owner_response_formal_record_candidate_rejected_count=0',
  'owner_response_formal_record_candidate_promoted_count=0',
  'owner_response_formal_record_candidate_review_only=true',
  'owner_response_formal_record_auto_promotion_allowed=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerHandoffPackets: OwnerResponseFormalRecordOwnerHandoffPacket[] = [
  { key: 'handoffIdentityBundle', packet: 'H1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'handoffDecisionContext', packet: 'H2', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'handoffEvidenceLock', packet: 'H3', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'handoffReviewerNotes', packet: 'H4', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'handoffRiskRollback', packet: 'H5', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'handoffRuntimeGatePointer', packet: 'H6', value: '0', icon: ShieldCheck, tone: 'locked' },
  { key: 'handoffSourceControlPointer', packet: 'H7', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerHandoffBoundaries = [
  'owner_response_formal_record_owner_handoff_packet_count=7',
  'owner_response_formal_record_owner_handoff_ready_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_handoff_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerHandoffReviewItems: OwnerResponseFormalRecordOwnerHandoffReviewItem[] = [
  { key: 'packetCompleteness', check: 'R1', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'recordOwnerIdentityScope', check: 'R2', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryMatch', check: 'R3', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceVersionConfirm', check: 'R4', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewerNoteConfirm', check: 'R5', value: '0', icon: FileText, tone: 'warn' },
  { key: 'mutationRequestReject', check: 'R6', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeCutoverSeparation', check: 'R7', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerHandoffReviewBoundaries = [
  'owner_response_formal_record_owner_handoff_review_check_count=7',
  'owner_response_formal_record_owner_handoff_review_passed_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_handoff_review_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerHandoffReviewOutcomeLanes: OwnerResponseFormalRecordOwnerHandoffReviewOutcomeLane[] = [
  { key: 'remainReviewWaiting', lane: 'O1', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'requestPacketCompletion', lane: 'O2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'requestOwnerScopeClarification', lane: 'O3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'requestEvidenceRefresh', lane: 'O4', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'readyForRecordOwnerReview', lane: 'O5', value: '0', icon: CheckCircle2, tone: 'steady' },
  { key: 'quarantineSensitivePayload', lane: 'O6', value: '0', icon: Lock, tone: 'locked' },
  { key: 'rejectMutationRequest', lane: 'O7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeOrCutoverGateRequired', lane: 'O8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerHandoffReviewOutcomeBoundaries = [
  'owner_response_formal_record_owner_handoff_review_outcome_lane_count=8',
  'owner_response_formal_record_owner_handoff_review_ready_count=0',
  'owner_response_formal_record_owner_handoff_review_returned_count=0',
  'owner_response_formal_record_owner_handoff_review_quarantine_count=0',
  'owner_response_formal_record_owner_handoff_review_rejected_count=0',
  'owner_response_formal_record_owner_handoff_review_promoted_count=0',
  'owner_response_formal_record_owner_handoff_review_outcome_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerReviewPreparationPackets: OwnerResponseFormalRecordOwnerReviewPreparationPacket[] = [
  { key: 'reviewIdentityPacket', packet: 'P1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'handoffOutcomeSnapshot', packet: 'P2', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'ownerScopePacket', packet: 'P3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryPacket', packet: 'P4', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceTracePacket', packet: 'P5', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewerNotePacket', packet: 'P6', value: '0', icon: FileWarning, tone: 'warn' },
  { key: 'mutationRejectionPacket', packet: 'P7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeCutoverPointer', packet: 'P8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerReviewPreparationBoundaries = [
  'owner_response_formal_record_owner_review_preparation_packet_count=8',
  'owner_response_formal_record_owner_review_preparation_ready_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_review_preparation_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerReviewChecklistItems: OwnerResponseFormalRecordOwnerReviewChecklistItem[] = [
  { key: 'identityTraceCheck', check: 'C1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'handoffOutcomeCheck', check: 'C2', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'ownerScopeCheck', check: 'C3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryCheck', check: 'C4', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceTraceCheck', check: 'C5', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewerNoteCheck', check: 'C6', value: '0', icon: FileWarning, tone: 'warn' },
  { key: 'mutationRejectionCheck', check: 'C7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeCutoverSeparationCheck', check: 'C8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerReviewChecklistBoundaries = [
  'owner_response_formal_record_owner_review_check_count=8',
  'owner_response_formal_record_owner_review_passed_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_review_checklist_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerReviewOutcomeLanes: OwnerResponseFormalRecordOwnerReviewOutcomeLane[] = [
  { key: 'remainOwnerReviewWaiting', lane: 'R1', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'requestTraceCompletion', lane: 'R2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'requestOwnerScopeClarification', lane: 'R3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'requestAuthorityBoundaryFix', lane: 'R4', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'readyForManualOwnerAssignmentReview', lane: 'R5', value: '0', icon: CheckCircle2, tone: 'steady' },
  { key: 'quarantineSensitivePayload', lane: 'R6', value: '0', icon: Lock, tone: 'locked' },
  { key: 'rejectMutationRequest', lane: 'R7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeOrPrimaryGateRequired', lane: 'R8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerReviewOutcomeBoundaries = [
  'owner_response_formal_record_owner_review_outcome_lane_count=8',
  'owner_response_formal_record_owner_review_outcome_ready_count=0',
  'owner_response_formal_record_owner_review_outcome_returned_count=0',
  'owner_response_formal_record_owner_review_outcome_quarantine_count=0',
  'owner_response_formal_record_owner_review_outcome_rejected_count=0',
  'owner_response_formal_record_owner_review_outcome_promoted_count=0',
  'owner_response_formal_record_owner_review_outcome_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerAssignmentPreparationPackets: OwnerResponseFormalRecordOwnerAssignmentPreparationPacket[] = [
  { key: 'assignmentIdentityCandidate', packet: 'A1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'ownerScopeConfirmation', packet: 'A2', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryConfirmation', packet: 'A3', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceTraceConfirmation', packet: 'A4', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewOutcomeReference', packet: 'A5', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'backupOwnerNote', packet: 'A6', value: '0', icon: Bell, tone: 'warn' },
  { key: 'mutationRejectionConfirmation', packet: 'A7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimePrimarySeparation', packet: 'A8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerAssignmentPreparationBoundaries = [
  'owner_response_formal_record_owner_assignment_preparation_packet_count=8',
  'owner_response_formal_record_owner_assignment_preparation_ready_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_assignment_preparation_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerAssignmentChecklistItems: OwnerResponseFormalRecordOwnerAssignmentChecklistItem[] = [
  { key: 'assignmentIdentityReadable', check: 'AC1', value: '0', icon: FileText, tone: 'warn' },
  { key: 'ownerScopeCurrent', check: 'AC2', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryReadable', check: 'AC3', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceTraceReadable', check: 'AC4', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'reviewOutcomeLinked', check: 'AC5', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'backupOwnerNoteReadable', check: 'AC6', value: '0', icon: Bell, tone: 'warn' },
  { key: 'mutationRejectionConfirmed', check: 'AC7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimePrimarySeparated', check: 'AC8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerAssignmentChecklistBoundaries = [
  'owner_response_formal_record_owner_assignment_check_count=8',
  'owner_response_formal_record_owner_assignment_check_passed_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_assignment_checklist_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerAssignmentOutcomeLanes: OwnerResponseFormalRecordOwnerAssignmentOutcomeLane[] = [
  { key: 'remainAssignmentCheckWaiting', lane: 'AR1', value: '0', icon: Clock3, tone: 'warn' },
  { key: 'requestIdentityClarification', lane: 'AR2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'requestScopeRefresh', lane: 'AR3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'requestAuthorityBoundaryFix', lane: 'AR4', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'readyForManualOwnerAssignmentDecision', lane: 'AR5', value: '0', icon: CheckCircle2, tone: 'steady' },
  { key: 'quarantineSensitivePayload', lane: 'AR6', value: '0', icon: Lock, tone: 'locked' },
  { key: 'rejectMutationRequest', lane: 'AR7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimeOrPrimaryGateRequired', lane: 'AR8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerAssignmentOutcomeBoundaries = [
  'owner_response_formal_record_owner_assignment_outcome_lane_count=8',
  'owner_response_formal_record_owner_assignment_outcome_ready_count=0',
  'owner_response_formal_record_owner_assignment_outcome_returned_count=0',
  'owner_response_formal_record_owner_assignment_outcome_quarantine_count=0',
  'owner_response_formal_record_owner_assignment_outcome_rejected_count=0',
  'owner_response_formal_record_owner_assignment_outcome_promoted_count=0',
  'owner_response_formal_record_owner_assignment_outcome_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerAssignmentDecisionPreparationPackets: OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationPacket[] = [
  { key: 'outcomeTracePacket', packet: 'AD1', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'ownerIdentityPacket', packet: 'AD2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'scopeSnapshotPacket', packet: 'AD3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryPacket', packet: 'AD4', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceReviewPacket', packet: 'AD5', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'quarantineAndExceptionPacket', packet: 'AD6', value: '0', icon: Lock, tone: 'locked' },
  { key: 'mutationRejectionPacket', packet: 'AD7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimePrimaryGatePacket', packet: 'AD8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerAssignmentDecisionPreparationBoundaries = [
  'owner_response_formal_record_owner_assignment_decision_preparation_packet_count=8',
  'owner_response_formal_record_owner_assignment_decision_preparation_ready_count=0',
  'owner_response_formal_record_owner_assignment_decision_created_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_assignment_decision_preparation_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const ownerResponseFormalRecordOwnerAssignmentDecisionChecklistItems: OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistItem[] = [
  { key: 'decisionTraceReadable', check: 'ADC1', value: '0', icon: ListChecks, tone: 'warn' },
  { key: 'ownerIdentityConfirmable', check: 'ADC2', value: '0', icon: FileText, tone: 'warn' },
  { key: 'scopeSnapshotCurrent', check: 'ADC3', value: '0', icon: ClipboardCheck, tone: 'warn' },
  { key: 'authorityBoundaryChecked', check: 'ADC4', value: '0', icon: ShieldCheck, tone: 'warn' },
  { key: 'evidenceChainReadable', check: 'ADC5', value: '0', icon: SearchCheck, tone: 'warn' },
  { key: 'quarantineExceptionChecked', check: 'ADC6', value: '0', icon: Lock, tone: 'locked' },
  { key: 'mutationRejectionChecked', check: 'ADC7', value: '0', icon: AlertTriangle, tone: 'locked' },
  { key: 'runtimePrimarySeparated', check: 'ADC8', value: '0', icon: GitBranch, tone: 'locked' },
]

const ownerResponseFormalRecordOwnerAssignmentDecisionChecklistBoundaries = [
  'owner_response_formal_record_owner_assignment_decision_check_count=8',
  'owner_response_formal_record_owner_assignment_decision_check_passed_count=0',
  'owner_response_formal_record_owner_assignment_decision_created_count=0',
  'owner_response_formal_record_owner_assigned_count=0',
  'owner_response_formal_record_created_count=0',
  'owner_response_formal_record_approved_count=0',
  'owner_response_formal_record_runtime_gate_count=0',
  'owner_response_formal_record_owner_assignment_decision_checklist_only=true',
  'owner_response_formal_record_owner_assignment_authorized=false',
  'owner_response_formal_record_write_authorized=false',
  'owner_response_formal_record_approval_authorized=false',
  'owner_response_formal_record_execution_authorized=false',
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
  'secret_value_collection_allowed=false',
  'repo_creation_authorized=false',
  'refs_sync_authorized=false',
  'workflow_modification_authorized=false',
  'github_primary_switch_authorized=false',
  'gitea_disablement_authorized=false',
]

const coverageGroups: CoverageGroup[] = [
  {
    key: 'signals',
    count: '5',
    icon: Radar,
    tone: 'warn',
    surfaces: '/security-compliance, /security, /compliance, /alerts, /errors',
  },
  {
    key: 'humanControl',
    count: '2',
    icon: Lock,
    tone: 'locked',
    surfaces: '/authorizations, /awooop/approvals',
  },
  {
    key: 'governanceAudit',
    count: '2',
    icon: ListChecks,
    tone: 'steady',
    surfaces: '/governance, /alert-operation-logs',
  },
  {
    key: 'engineeringReview',
    count: '1',
    icon: SearchCheck,
    tone: 'warn',
    surfaces: '/code-review',
  },
]

const conflictControls: ConflictControl[] = [
  { key: 'preserveOwnership', tone: 'steady' },
  { key: 'noRuntimeLift', tone: 'locked' },
  { key: 'codeReviewNotDeployGate', tone: 'warn' },
  { key: 'awooopNotSecurityApproval', tone: 'locked' },
  { key: 'kaliNotCalled', tone: 'locked' },
]

const journeySteps: JourneyStep[] = [
  { key: 'readPosture', icon: Radar, tone: 'warn' },
  { key: 'openSurface', icon: ListChecks, tone: 'steady' },
  { key: 'triageLane', icon: Activity, tone: 'warn' },
  { key: 'collectEvidence', icon: ClipboardCheck, tone: 'warn' },
  { key: 'humanDecision', icon: Lock, tone: 'locked' },
  { key: 'runtimeGate', icon: ShieldCheck, tone: 'locked' },
]

const evidenceReadinessItems: EvidenceReadinessItem[] = [
  { key: 'giteaOwnerAttestation', lane: 'S4.9', icon: GitBranch, tone: 'warn' },
  { key: 'githubTargetOwner', lane: 'S4.10', icon: GitBranch, tone: 'warn' },
  { key: 'refsTruthOwner', lane: 'S4.11', icon: GitBranch, tone: 'warn' },
  { key: 'workflowSecretOwner', lane: 'S4.12', icon: Lock, tone: 'warn' },
  { key: 'redactedFindingIngestion', lane: 'S1.6', icon: FileWarning, tone: 'warn' },
  { key: 'kaliScanScope', lane: 'S1.6', icon: Activity, tone: 'locked' },
  { key: 'followupRuntimeGate', lane: 'S3.4', icon: ShieldCheck, tone: 'locked' },
]

const hostCoverageItems: HostCoverageItem[] = [
  { key: 'kali112', address: '192.168.0.112', icon: Activity, tone: 'steady' },
  { key: 'dev168', address: '192.168.0.168', icon: Radar, tone: 'warn' },
  { key: 'dev111', address: '192.168.0.111', icon: Radar, tone: 'warn' },
]

const kaliMaintenanceReadinessItems: KaliMaintenanceReadinessItem[] = [
  { key: 'readOnlySnapshot', value: '2026-06-04 08:55', icon: ShieldCheck, tone: 'steady' },
  { key: 'scannerHealth', value: '健康', icon: CheckCircle2, tone: 'steady' },
  { key: 'upgradablePackages', value: '1994', icon: FileWarning, tone: 'warn' },
  { key: 'failedSystemdUnits', value: '1', icon: AlertTriangle, tone: 'warn' },
  { key: 'serviceHardening', value: '0 / 4', icon: Lock, tone: 'warn' },
  { key: 'runtimeGate', value: '閘門 0', icon: Lock, tone: 'locked' },
]

const kaliMaintenanceReadinessBoundaries = [
  'kali_112_read_only_snapshot_collected=true',
  'kali_112_read_only_observed_at=2026-06-04T08:55:43+08:00',
  'kali_112_scanner_health=healthy',
  'kali_112_scanner_health_endpoint=127.0.0.1:8080/health',
  'kali_112_scanner_service_active=active',
  'kali_112_scanner_service_enabled=enabled',
  'kali_112_upgradable_package_count=1994',
  'kali_112_failed_systemd_unit_count=1',
  'kali_112_failed_systemd_unit=networking.service',
  'kali_112_systemd_hardening_enabled=0/4',
  'kali_112_full_upgrade_authorized=false',
  'kali_112_reboot_authorized=false',
  'kali_112_package_update_executed=false',
  'kali_112_host_reboot_executed=false',
  'kali_112_active_scan_executed=false',
  'kali_112_runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'not_authorization=true',
] as const

const kaliMaintenanceRunwaySteps: KaliMaintenanceRunwayStep[] = [
  { key: 'snapshot', step: '01', icon: ShieldCheck, tone: 'steady' },
  { key: 'window', step: '02', icon: Clock3, tone: 'warn' },
  { key: 'rollback', step: '03', icon: FileWarning, tone: 'warn' },
  { key: 'postHealth', step: '04', icon: CheckCircle2, tone: 'warn' },
  { key: 'humanApproval', step: '05', icon: Lock, tone: 'locked' },
]

const hostActionGateItems: HostActionGateItem[] = [
  { key: 'activeScan', gate: 'S1.6', icon: Radar, tone: 'locked' },
  { key: 'credentialedScan', gate: 'S1.6', icon: Lock, tone: 'locked' },
  { key: 'kaliExecute', gate: 'S3.4', icon: Activity, tone: 'locked' },
  { key: 'sshChange', gate: 'S3.4', icon: Lock, tone: 'locked' },
  { key: 'kaliUpdate', gate: 'S3.4', icon: FileWarning, tone: 'warn' },
  { key: 'runtimeBlocking', gate: 'S3.4', icon: ShieldCheck, tone: 'locked' },
]

const hostEvidenceReadinessItems: HostEvidenceReadinessItem[] = [
  { key: 'scopeBoundary', gate: 'S1.6', icon: Radar, tone: 'warn' },
  { key: 'ownerDecision', gate: 'S3.1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'credentialHandling', gate: 'S1.6', icon: Lock, tone: 'locked' },
  { key: 'maintenanceWindow', gate: 'S3.4', icon: Clock3, tone: 'warn' },
  { key: 'rollbackPlan', gate: 'S3.4', icon: FileWarning, tone: 'warn' },
  { key: 'validationMetrics', gate: 'S3.4', icon: CheckCircle2, tone: 'warn' },
  { key: 'redactedIngestion', gate: 'S1.6', icon: ShieldCheck, tone: 'locked' },
]

const hostEvidenceCollectionSteps: HostEvidenceCollectionStep[] = [
  { key: 'scopeFirst', step: '01', icon: Radar, tone: 'warn' },
  { key: 'ownerSecond', step: '02', icon: ClipboardCheck, tone: 'warn' },
  { key: 'credentialThird', step: '03', icon: Lock, tone: 'locked' },
  { key: 'maintenanceFourth', step: '04', icon: Clock3, tone: 'warn' },
  { key: 'rollbackFifth', step: '05', icon: FileWarning, tone: 'warn' },
  { key: 'validationSixth', step: '06', icon: CheckCircle2, tone: 'warn' },
  { key: 'redactedSeventh', step: '07', icon: ShieldCheck, tone: 'locked' },
]

const hostEvidenceIntakeChecks: HostEvidenceIntakeCheck[] = [
  { key: 'metadataPointer', check: 'P1', icon: ListChecks, tone: 'warn' },
  { key: 'dependencyOrder', check: 'P2', icon: GitBranch, tone: 'warn' },
  { key: 'scopeBeforeScan', check: 'P3', icon: Radar, tone: 'locked' },
  { key: 'ownerBeforeChange', check: 'P4', icon: ClipboardCheck, tone: 'locked' },
  { key: 'credentialPlaintext', check: 'P5', icon: Lock, tone: 'locked' },
  { key: 'rawPayload', check: 'P6', icon: FileWarning, tone: 'locked' },
  { key: 'counterFreeze', check: 'P7', icon: ShieldCheck, tone: 'locked' },
]

const hostEvidenceReviewOutcomeLanes: HostEvidenceReviewOutcomeLane[] = [
  { key: 'readyForHumanReview', lane: 'R1', icon: CheckCircle2, tone: 'steady' },
  { key: 'needsScopeEvidence', lane: 'R2', icon: Radar, tone: 'warn' },
  { key: 'needsOwnerDecision', lane: 'R3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'quarantineDependencySkip', lane: 'R4', icon: GitBranch, tone: 'warn' },
  { key: 'rejectRawPayload', lane: 'R5', icon: FileWarning, tone: 'locked' },
  { key: 'rejectCredentialPlaintext', lane: 'R6', icon: Lock, tone: 'locked' },
  { key: 'waitingRuntimeGate', lane: 'R7', icon: Clock3, tone: 'locked' },
]

const hostEvidenceReviewHandoffPackets: HostEvidenceReviewHandoffPacket[] = [
  { key: 'scopeSummaryPacket', packet: 'H1', icon: Radar, tone: 'warn' },
  { key: 'ownerDecisionPacket', packet: 'H2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'credentialHandlingPacket', packet: 'H3', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackPacket', packet: 'H4', icon: Clock3, tone: 'warn' },
  { key: 'validationMetricsPacket', packet: 'H5', icon: CheckCircle2, tone: 'warn' },
  { key: 'redactionAttestationPacket', packet: 'H6', icon: ShieldCheck, tone: 'locked' },
  { key: 'runtimeGatePacket', packet: 'H7', icon: FileWarning, tone: 'locked' },
]

const hostEvidenceReviewerChecklistItems: HostEvidenceReviewerChecklistItem[] = [
  { key: 'scopeBoundaryMatch', check: 'C1', icon: Radar, tone: 'warn' },
  { key: 'ownerDecisionScopeExpiry', check: 'C2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'credentialHandlingMetadataOnly', check: 'C3', icon: Lock, tone: 'locked' },
  { key: 'redactionAttestationPass', check: 'C4', icon: ShieldCheck, tone: 'locked' },
  { key: 'maintenanceRollbackComplete', check: 'C5', icon: Clock3, tone: 'warn' },
  { key: 'validationMetricsLinked', check: 'C6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGateSeparated', check: 'C7', icon: FileWarning, tone: 'locked' },
]

const hostEvidenceReviewerOutcomeLanes: HostEvidenceReviewerOutcomeLane[] = [
  { key: 'readyForOwnerDecision', lane: 'O1', icon: CheckCircle2, tone: 'steady' },
  { key: 'scopeMismatch', lane: 'O2', icon: Radar, tone: 'warn' },
  { key: 'ownerExpired', lane: 'O3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'credentialMetadataFailed', lane: 'O4', icon: Lock, tone: 'locked' },
  { key: 'redactionFailed', lane: 'O5', icon: ShieldCheck, tone: 'locked' },
  { key: 'rollbackMissing', lane: 'O6', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateRequired', lane: 'O7', icon: FileWarning, tone: 'locked' },
]

const hostOwnerDecisionCandidatePackets: HostOwnerDecisionCandidatePacket[] = [
  { key: 'scopeApprovalCandidate', packet: 'D1', icon: Radar, tone: 'warn' },
  { key: 'scanModeCandidate', packet: 'D2', icon: Activity, tone: 'locked' },
  { key: 'credentialHandlingCandidate', packet: 'D3', icon: Lock, tone: 'locked' },
  { key: 'maintenanceWindowCandidate', packet: 'D4', icon: Clock3, tone: 'warn' },
  { key: 'rollbackOwnerCandidate', packet: 'D5', icon: FileWarning, tone: 'warn' },
  { key: 'validationMetricsCandidate', packet: 'D6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGateCandidate', packet: 'D7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionReviewChecklistItems: HostOwnerDecisionReviewChecklistItem[] = [
  { key: 'scopeBoundaryReadable', check: 'A1', icon: Radar, tone: 'warn' },
  { key: 'scanModeNotAuthorization', check: 'A2', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryMetadataOnly', check: 'A3', icon: Lock, tone: 'locked' },
  { key: 'maintenanceWindowNotChange', check: 'A4', icon: Clock3, tone: 'warn' },
  { key: 'rollbackOwnerReadable', check: 'A5', icon: FileWarning, tone: 'warn' },
  { key: 'validationMetricsPredefined', check: 'A6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGateStillSeparate', check: 'A7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionReviewOutcomeLanes: HostOwnerDecisionReviewOutcomeLane[] = [
  { key: 'readyForDecisionRecord', lane: 'U1', icon: CheckCircle2, tone: 'steady' },
  { key: 'scopeNeedsRefresh', lane: 'U2', icon: Radar, tone: 'warn' },
  { key: 'scanModeNeedsScope', lane: 'U3', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryFailed', lane: 'U4', icon: Lock, tone: 'locked' },
  { key: 'maintenanceWindowMissing', lane: 'U5', icon: Clock3, tone: 'warn' },
  { key: 'rollbackOwnerMissing', lane: 'U6', icon: FileWarning, tone: 'warn' },
  { key: 'runtimeGateRequired', lane: 'U7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordDraftPackets: HostOwnerDecisionRecordDraftPacket[] = [
  { key: 'scopeStatementDraft', packet: 'DR1', icon: Radar, tone: 'warn' },
  { key: 'scanModeDraft', packet: 'DR2', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryDraft', packet: 'DR3', icon: Lock, tone: 'locked' },
  { key: 'maintenanceConstraintsDraft', packet: 'DR4', icon: Clock3, tone: 'warn' },
  { key: 'rollbackOwnerDraft', packet: 'DR5', icon: FileWarning, tone: 'warn' },
  { key: 'validationMetricsDraft', packet: 'DR6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGateDraft', packet: 'DR7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordDraftReviewItems: HostOwnerDecisionRecordDraftReviewItem[] = [
  { key: 'scopeStatementComplete', check: 'RV1', icon: Radar, tone: 'warn' },
  { key: 'scanModeStillNotApproval', check: 'RV2', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryMetadataOnly', check: 'RV3', icon: Lock, tone: 'locked' },
  { key: 'maintenanceConstraintsReadable', check: 'RV4', icon: Clock3, tone: 'warn' },
  { key: 'rollbackOwnerReadable', check: 'RV5', icon: FileWarning, tone: 'warn' },
  { key: 'validationMetricsLinked', check: 'RV6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGateStillClosed', check: 'RV7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordDraftReviewOutcomeLanes: HostOwnerDecisionRecordDraftReviewOutcomeLane[] = [
  { key: 'readyForDecisionRecordWriteup', lane: 'DV1', icon: CheckCircle2, tone: 'steady' },
  { key: 'scopeDraftIncomplete', lane: 'DV2', icon: Radar, tone: 'warn' },
  { key: 'scanModeAmbiguous', lane: 'DV3', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryIncomplete', lane: 'DV4', icon: Lock, tone: 'locked' },
  { key: 'maintenanceConstraintsIncomplete', lane: 'DV5', icon: Clock3, tone: 'warn' },
  { key: 'rollbackOwnerIncomplete', lane: 'DV6', icon: FileWarning, tone: 'warn' },
  { key: 'runtimeGateStillRequired', lane: 'DV7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordWriteupPackets: HostOwnerDecisionRecordWriteupPacket[] = [
  { key: 'decisionSummaryWriteup', packet: 'WU1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'approvedScopeWriteup', packet: 'WU2', icon: Radar, tone: 'warn' },
  { key: 'scanModeLimitsWriteup', packet: 'WU3', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryWriteup', packet: 'WU4', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackWriteup', packet: 'WU5', icon: Clock3, tone: 'warn' },
  { key: 'validationEvidenceWriteup', packet: 'WU6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGatePointerWriteup', packet: 'WU7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordWriteupReviewItems: HostOwnerDecisionRecordWriteupReviewItem[] = [
  { key: 'decisionSummaryReadable', check: 'WR1', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryComplete', check: 'WR2', icon: Radar, tone: 'warn' },
  { key: 'scanModeLimitsExplicit', check: 'WR3', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryMetadataOnly', check: 'WR4', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackLinked', check: 'WR5', icon: Clock3, tone: 'warn' },
  { key: 'validationEvidenceLinked', check: 'WR6', icon: CheckCircle2, tone: 'warn' },
  { key: 'runtimeGateStillSeparate', check: 'WR7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordWriteupReviewOutcomeLanes: HostOwnerDecisionRecordWriteupReviewOutcomeLane[] = [
  { key: 'readyForFormalRecordCandidate', lane: 'WV1', icon: CheckCircle2, tone: 'steady' },
  { key: 'decisionSummaryNeedsClarification', lane: 'WV2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryNeedsRefresh', lane: 'WV3', icon: Radar, tone: 'warn' },
  { key: 'scanModeLimitsAmbiguous', lane: 'WV4', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryFailed', lane: 'WV5', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackIncomplete', lane: 'WV6', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateStillRequired', lane: 'WV7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordFormalCandidatePackets: HostOwnerDecisionRecordFormalCandidatePacket[] = [
  { key: 'recordIdentityCandidate', packet: 'FC1', icon: FileText, tone: 'warn' },
  { key: 'decisionSummaryCandidate', packet: 'FC2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'approvedScopeCandidate', packet: 'FC3', icon: Radar, tone: 'warn' },
  { key: 'scanModeLimitsCandidate', packet: 'FC4', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryCandidate', packet: 'FC5', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackCandidate', packet: 'FC6', icon: Clock3, tone: 'warn' },
  { key: 'validationRuntimeGateCandidate', packet: 'FC7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordFormalCandidateReviewItems: HostOwnerDecisionRecordFormalCandidateReviewItem[] = [
  { key: 'identityTraceable', check: 'FR1', icon: FileText, tone: 'warn' },
  { key: 'decisionSummaryReadable', check: 'FR2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryConsistent', check: 'FR3', icon: Radar, tone: 'warn' },
  { key: 'scanLimitsStillNotAuthorization', check: 'FR4', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryStillMetadataOnly', check: 'FR5', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackTraceable', check: 'FR6', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateStillClosed', check: 'FR7', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordFormalCandidateReviewOutcomeLanes: HostOwnerDecisionRecordFormalCandidateReviewOutcomeLane[] = [
  { key: 'readyForHumanRecordQueue', lane: 'FV1', icon: CheckCircle2, tone: 'steady' },
  { key: 'identityNeedsTrace', lane: 'FV2', icon: FileText, tone: 'warn' },
  { key: 'decisionSummaryNeedsClarification', lane: 'FV3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryNeedsRefresh', lane: 'FV4', icon: Radar, tone: 'warn' },
  { key: 'scanLimitsAmbiguous', lane: 'FV5', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryFailed', lane: 'FV6', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackIncomplete', lane: 'FV7', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateStillRequired', lane: 'FV8', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordFormalRecordQueuePackets: HostOwnerDecisionRecordFormalRecordQueuePacket[] = [
  { key: 'queueIdentityPacket', packet: 'FQ1', icon: FileText, tone: 'warn' },
  { key: 'queueDecisionSummaryPacket', packet: 'FQ2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'queueScopeExpiryPacket', packet: 'FQ3', icon: Radar, tone: 'warn' },
  { key: 'queueScanLimitsPacket', packet: 'FQ4', icon: Activity, tone: 'locked' },
  { key: 'queueCredentialBoundaryPacket', packet: 'FQ5', icon: Lock, tone: 'locked' },
  { key: 'queueMaintenanceRollbackPacket', packet: 'FQ6', icon: Clock3, tone: 'warn' },
  { key: 'queueValidationRuntimeGatePacket', packet: 'FQ7', icon: ShieldCheck, tone: 'locked' },
  { key: 'queueNoExecutionAttestationPacket', packet: 'FQ8', icon: FileWarning, tone: 'locked' },
]

const hostOwnerDecisionRecordFormalRecordQueueReviewItems: HostOwnerDecisionRecordFormalRecordQueueReviewItem[] = [
  { key: 'queueIdentityTraceable', check: 'FQC1', icon: FileText, tone: 'warn' },
  { key: 'queueDecisionSummaryReadable', check: 'FQC2', icon: ClipboardCheck, tone: 'warn' },
  { key: 'queueScopeExpiryFresh', check: 'FQC3', icon: Radar, tone: 'warn' },
  { key: 'queueScanLimitsNotAuthorization', check: 'FQC4', icon: Activity, tone: 'locked' },
  { key: 'queueCredentialBoundaryMetadataOnly', check: 'FQC5', icon: Lock, tone: 'locked' },
  { key: 'queueMaintenanceRollbackLinked', check: 'FQC6', icon: Clock3, tone: 'warn' },
  { key: 'queueValidationGateSeparate', check: 'FQC7', icon: ShieldCheck, tone: 'locked' },
  { key: 'queueNoExecutionAttestationPresent', check: 'FQC8', icon: FileWarning, tone: 'locked' },
]

const hostOwnerDecisionRecordFormalRecordQueueReviewOutcomeLanes: HostOwnerDecisionRecordFormalRecordQueueReviewOutcomeLane[] = [
  { key: 'readyForHumanRecordOwnerHandoff', lane: 'FQV1', icon: CheckCircle2, tone: 'steady' },
  { key: 'identityNeedsTraceRefresh', lane: 'FQV2', icon: FileText, tone: 'warn' },
  { key: 'decisionSummaryNeedsClarification', lane: 'FQV3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryNeedsRefresh', lane: 'FQV4', icon: Radar, tone: 'warn' },
  { key: 'scanLimitsRemainAmbiguous', lane: 'FQV5', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryFailed', lane: 'FQV6', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackIncomplete', lane: 'FQV7', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateStillRequired', lane: 'FQV8', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanHandoffReadinessPackets: HostOwnerDecisionRecordHumanHandoffReadinessPacket[] = [
  { key: 'handoffIdentityTrace', packet: 'FHO1', icon: FileText, tone: 'warn' },
  { key: 'handoffOwnerBoundary', packet: 'FHO2', icon: Bell, tone: 'warn' },
  { key: 'handoffDecisionSummary', packet: 'FHO3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'handoffScopeExpiry', packet: 'FHO4', icon: Radar, tone: 'warn' },
  { key: 'handoffScanLimits', packet: 'FHO5', icon: Activity, tone: 'locked' },
  { key: 'handoffCredentialBoundary', packet: 'FHO6', icon: Lock, tone: 'locked' },
  { key: 'handoffMaintenanceRollback', packet: 'FHO7', icon: Clock3, tone: 'warn' },
  { key: 'handoffRuntimeGate', packet: 'FHO8', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanHandoffReadinessReviewItems: HostOwnerDecisionRecordHumanHandoffReadinessReviewItem[] = [
  { key: 'identityTraceReadable', check: 'FHC1', icon: FileText, tone: 'warn' },
  { key: 'ownerBoundaryReadable', check: 'FHC2', icon: Bell, tone: 'warn' },
  { key: 'decisionSummaryReadable', check: 'FHC3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryCurrent', check: 'FHC4', icon: Radar, tone: 'warn' },
  { key: 'scanLimitsNotAuthorization', check: 'FHC5', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryMetadataOnly', check: 'FHC6', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackTraceable', check: 'FHC7', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateSeparate', check: 'FHC8', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeLanes: HostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeLane[] = [
  { key: 'readyForHumanRecordOwnerReviewCandidate', lane: 'FHV1', icon: CheckCircle2, tone: 'steady' },
  { key: 'identityTraceNeedsRefresh', lane: 'FHV2', icon: FileText, tone: 'warn' },
  { key: 'ownerBoundaryNeedsClarification', lane: 'FHV3', icon: Bell, tone: 'warn' },
  { key: 'decisionSummaryNeedsClarification', lane: 'FHV4', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryNeedsRefresh', lane: 'FHV5', icon: Radar, tone: 'warn' },
  { key: 'scanLimitsRemainAmbiguous', lane: 'FHV6', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryFailed', lane: 'FHV7', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackIncomplete', lane: 'FHV8', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateStillRequired', lane: 'FHV9', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePackets: HostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePacket[] = [
  { key: 'reviewCandidateIdentity', packet: 'FHR1', icon: FileText, tone: 'warn' },
  { key: 'reviewOwnerBoundary', packet: 'FHR2', icon: Bell, tone: 'warn' },
  { key: 'reviewDecisionSummary', packet: 'FHR3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'reviewScopeExpiry', packet: 'FHR4', icon: Radar, tone: 'warn' },
  { key: 'reviewScanLimits', packet: 'FHR5', icon: Activity, tone: 'locked' },
  { key: 'reviewCredentialBoundary', packet: 'FHR6', icon: Lock, tone: 'locked' },
  { key: 'reviewMaintenanceRollback', packet: 'FHR7', icon: Clock3, tone: 'warn' },
  { key: 'reviewValidationRuntimeGate', packet: 'FHR8', icon: ShieldCheck, tone: 'locked' },
  { key: 'reviewNoExecutionAttestation', packet: 'FHR9', icon: ListChecks, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistItems: HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistItem[] = [
  { key: 'candidateIdentityTraceable', check: 'FRC1', icon: FileText, tone: 'warn' },
  { key: 'candidateOwnerBoundaryReadable', check: 'FRC2', icon: Bell, tone: 'warn' },
  { key: 'candidateDecisionSummaryReadable', check: 'FRC3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'candidateScopeExpiryCurrent', check: 'FRC4', icon: Radar, tone: 'warn' },
  { key: 'candidateScanLimitsNotAuthorization', check: 'FRC5', icon: Activity, tone: 'locked' },
  { key: 'candidateCredentialBoundaryMetadataOnly', check: 'FRC6', icon: Lock, tone: 'locked' },
  { key: 'candidateMaintenanceRollbackTraceable', check: 'FRC7', icon: Clock3, tone: 'warn' },
  { key: 'candidateValidationRuntimeGateSeparate', check: 'FRC8', icon: ShieldCheck, tone: 'locked' },
  { key: 'candidateNoExecutionAttestationPresent', check: 'FRC9', icon: ListChecks, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeLanes: HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeLane[] = [
  { key: 'readyForHumanRecordOwnerReviewPreparation', lane: 'FRV1', icon: CheckCircle2, tone: 'steady' },
  { key: 'identityTraceNeedsRefresh', lane: 'FRV2', icon: FileText, tone: 'warn' },
  { key: 'ownerBoundaryNeedsClarification', lane: 'FRV3', icon: Bell, tone: 'warn' },
  { key: 'decisionSummaryNeedsClarification', lane: 'FRV4', icon: ClipboardCheck, tone: 'warn' },
  { key: 'scopeExpiryNeedsRefresh', lane: 'FRV5', icon: Radar, tone: 'warn' },
  { key: 'scanLimitsRemainAmbiguous', lane: 'FRV6', icon: Activity, tone: 'locked' },
  { key: 'credentialBoundaryFailed', lane: 'FRV7', icon: Lock, tone: 'locked' },
  { key: 'maintenanceRollbackIncomplete', lane: 'FRV8', icon: Clock3, tone: 'warn' },
  { key: 'runtimeGateStillRequired', lane: 'FRV9', icon: ShieldCheck, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPackets: HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPacket[] = [
  { key: 'preparationIdentityTrace', packet: 'FRP1', icon: FileText, tone: 'warn' },
  { key: 'preparationOwnerBoundary', packet: 'FRP2', icon: Bell, tone: 'warn' },
  { key: 'preparationDecisionSummary', packet: 'FRP3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'preparationScopeExpiry', packet: 'FRP4', icon: Radar, tone: 'warn' },
  { key: 'preparationScanLimits', packet: 'FRP5', icon: Activity, tone: 'locked' },
  { key: 'preparationCredentialBoundary', packet: 'FRP6', icon: Lock, tone: 'locked' },
  { key: 'preparationMaintenanceRollback', packet: 'FRP7', icon: Clock3, tone: 'warn' },
  { key: 'preparationValidationRuntimeGate', packet: 'FRP8', icon: ShieldCheck, tone: 'locked' },
  { key: 'preparationNoExecutionAttestation', packet: 'FRP9', icon: ListChecks, tone: 'locked' },
]

const hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistItems: HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistItem[] = [
  { key: 'preparationIdentityTraceReadable', check: 'FRPC1', icon: FileText, tone: 'warn' },
  { key: 'preparationOwnerBoundaryReadable', check: 'FRPC2', icon: Bell, tone: 'warn' },
  { key: 'preparationDecisionSummaryReadable', check: 'FRPC3', icon: ClipboardCheck, tone: 'warn' },
  { key: 'preparationScopeExpiryCurrent', check: 'FRPC4', icon: Radar, tone: 'warn' },
  { key: 'preparationScanLimitsNotAuthorization', check: 'FRPC5', icon: Activity, tone: 'locked' },
  { key: 'preparationCredentialBoundaryMetadataOnly', check: 'FRPC6', icon: Lock, tone: 'locked' },
  { key: 'preparationMaintenanceRollbackTraceable', check: 'FRPC7', icon: Clock3, tone: 'warn' },
  { key: 'preparationValidationRuntimeGateSeparate', check: 'FRPC8', icon: ShieldCheck, tone: 'locked' },
  { key: 'preparationNoExecutionAttestationPresent', check: 'FRPC9', icon: ListChecks, tone: 'locked' },
]

const evidenceItems = [
  'iwooos-posture-projection.snapshot.json',
  'security-rollout-policy.snapshot.json',
  'security-mirror-status-rollup.snapshot.json',
  'source-control-owner-response-validation-rollup.snapshot.json',
  'kali-integration-status.snapshot.json',
]

const toneColors = {
  steady: '#1f7a4d',
  warn: '#b66a2d',
  locked: '#6f6d66',
}

const page = {
  minHeight: 'calc(100vh - 68px)',
  background: '#f5f4ed',
  color: '#141413',
  padding: '22px',
  fontFamily: 'var(--font-body), monospace',
  overflowX: 'hidden' as const,
}

const band = {
  background: '#fff',
  border: '0.5px solid #e0ddd4',
  borderRadius: 8,
}

const miniMetricStyle = {
  border: '0.5px solid #e4dfc8',
  borderRadius: 8,
  padding: 7,
  display: 'grid',
  gap: 3,
  minWidth: 0,
}

const miniMetricLabelStyle = {
  color: '#787b64',
  fontSize: 10,
  fontWeight: 700,
}

const miniMetricValueStyle = {
  color: '#4f6f21',
  fontSize: 13,
  fontWeight: 900,
  lineHeight: 1.15,
}

function IwoooSSectionGroup({
  id,
  title,
  summary,
  defaultOpen = false,
  children,
}: {
  id?: string
  title: string
  summary: string
  defaultOpen?: boolean
  children: ReactNode
}) {
  const [expanded, setExpanded] = useState(defaultOpen)

  return (
    <details
      id={id}
      open={expanded}
      onToggle={event => setExpanded(event.currentTarget.open)}
      style={{
        marginBottom: 14,
        borderTop: '0.5px solid #d8d2c3',
        borderBottom: '0.5px solid #d8d2c3',
        paddingBottom: 8,
      }}
    >
      <summary
        style={{
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 16,
          padding: '14px 0',
          listStyle: 'none',
        }}
      >
        <span style={{ fontSize: 16, fontWeight: 700, color: '#141413', minWidth: 0 }}>{title}</span>
        <span
          style={{
            flex: '1 1 260px',
            minWidth: 0,
            fontSize: 11,
            color: '#6f6d66',
            lineHeight: 1.45,
            textAlign: 'left',
            maxWidth: 520,
          }}
        >
          {summary}
        </span>
      </summary>
      {expanded ? <div style={{ display: 'grid', gap: 14 }}>{children}</div> : null}
    </details>
  )
}

function ToneDot({ tone }: { tone: 'steady' | 'warn' | 'locked' }) {
  return (
    <span
      style={{
        width: 8,
        height: 8,
        borderRadius: 8,
        background: toneColors[tone],
        display: 'inline-block',
      }}
    />
  )
}

function MetricCard({ item }: { item: PostureMetric }) {
  const t = useTranslations('iwooos.metrics')
  return (
    <div style={{ ...band, padding: 14, minHeight: 96 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t(`${item.key}.label` as never)}</span>
        <ToneDot tone={item.tone} />
      </div>
      <div style={{ fontSize: 30, fontWeight: 700, marginTop: 8, lineHeight: 1 }}>{item.value}</div>
      <div style={{ fontSize: 11, color: '#6f6d66', marginTop: 8 }}>{t(`${item.key}.detail` as never)}</div>
    </div>
  )
}

function IwoooSVisualCommandDashboard() {
  const t = useTranslations('iwooos.visualCommandDashboard')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-visual-command-dashboard"
      style={{
        marginBottom: 14,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 420px), 1fr))',
        gap: 14,
        alignItems: 'stretch',
      }}
    >
      <div style={{ ...band, padding: 16, minWidth: 0, background: '#fbfcfb' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#53645b', fontSize: 12, fontWeight: 700 }}>
              <Radar size={17} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 18, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
          </div>
          <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, maxWidth: 340, ...textWrap }}>
            {t('subtitle')}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))',
            gap: 10,
          }}
        >
          {visualDashboardMetrics.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: '0.5px solid #d8e5dc',
                  borderRadius: 8,
                  background: '#fff',
                  padding: 12,
                  display: 'grid',
                  gap: 10,
                  minWidth: 0,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ fontSize: 11, color: '#65766d' }}>{t(`metrics.${item.key}.label` as never)}</span>
                  <Icon size={15} color={toneColors[item.tone]} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div
                    aria-hidden
                    style={{
                      width: 58,
                      height: 58,
                      borderRadius: 58,
                      background: `conic-gradient(${toneColors[item.tone]} ${item.arc}deg, #e8ebe5 0deg)`,
                      display: 'grid',
                      placeItems: 'center',
                      flex: '0 0 auto',
                    }}
                  >
                    <div style={{ width: 40, height: 40, borderRadius: 40, background: '#fff' }} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <div style={{ fontSize: 11, color: '#53645b', lineHeight: 1.4, marginTop: 5, ...textWrap }}>
                      {t(`metrics.${item.key}.detail` as never)}
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        <div
          style={{
            marginTop: 12,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))',
            gap: 8,
          }}
        >
          {visualDashboardNodes.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  minHeight: 92,
                  border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                  borderRadius: 8,
                  background: item.tone === 'steady' ? '#f7fbfa' : item.tone === 'warn' ? '#fffaf7' : '#f8f7f3',
                  padding: 10,
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  minWidth: 0,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <Icon size={17} color={toneColors[item.tone]} />
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.state}</span>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
                    {t(`nodes.${item.key}.title` as never)}
                  </div>
                  <div style={{ marginTop: 3, fontSize: 11, color: '#6f6d66', lineHeight: 1.35, ...textWrap }}>
                    {t(`nodes.${item.key}.caption` as never)}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>

      <div style={{ ...band, padding: 16, minWidth: 0, background: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <Lock size={17} color={toneColors.locked} />
          <h2 style={{ fontSize: 16, margin: 0 }}>{t('gateMatrix.title')}</h2>
        </div>
        <div style={{ display: 'grid', gap: 9 }}>
          {visualDashboardGates.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'auto minmax(0, 1fr) auto',
                  gap: 10,
                  alignItems: 'center',
                  border: '0.5px solid #e0ddd4',
                  borderRadius: 8,
                  padding: '10px 11px',
                  minWidth: 0,
                }}
              >
                <Icon size={17} color={toneColors[item.tone]} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
                    {t(`gates.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.35, marginTop: 3, ...textWrap }}>
                    {t(`gates.${item.key}.caption` as never)}
                  </div>
                </div>
                <div style={{ textAlign: 'right', display: 'grid', gap: 3 }}>
                  <span style={{ fontSize: 11, color: '#87867f' }}>{item.gate}</span>
                  <span style={{ fontSize: 15, color: toneColors[item.tone], fontWeight: 700 }}>{item.value}</span>
                </div>
              </div>
            )
          })}
        </div>

        <details
          style={{
            marginTop: 12,
            border: '0.5px solid #e0ddd4',
            borderRadius: 8,
            background: '#f8f7f3',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#4f4c45' }}>
            {t('drilldown.title')}
          </summary>
          <div style={{ marginTop: 8, display: 'grid', gap: 7 }}>
            {['evidence', 'hosts', 'actions'].map(key => (
              <div key={key} style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
                {t(`drilldown.${key}` as never)}
              </div>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSProfessionalSecurityExperience() {
  const t = useTranslations('iwooos.professionalSecurityExperience')
  const [mode, setMode] = useState<VisualExperienceMode>('attackPath')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-professional-security-experience"
      style={{
        marginBottom: 14,
        borderTop: '0.5px solid #cfd8d2',
        borderBottom: '0.5px solid #cfd8d2',
        padding: '16px 0',
      }}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
          gap: 14,
          alignItems: 'end',
          marginBottom: 14,
        }}
      >
        <div style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#53645b', fontSize: 12, fontWeight: 700 }}>
            <Radar size={17} color="#1f7a4d" />
            {t('eyebrow')}
          </div>
          <h2 style={{ fontSize: 20, lineHeight: 1.2, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
          <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '8px 0 0', maxWidth: 720, ...textWrap }}>
            {t('subtitle')}
          </p>
        </div>

        <div
          role="tablist"
          aria-label={t('tabsLabel')}
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 7,
            border: '0.5px solid #d8d2c3',
            borderRadius: 8,
            padding: 6,
            background: '#fbfcfb',
            minWidth: 0,
          }}
        >
          {visualExperienceTabs.map(tab => {
            const Icon = tab.icon
            const active = tab.key === mode
            return (
              <button
                key={tab.key}
                role="tab"
                aria-selected={active}
                type="button"
                onClick={() => setMode(tab.key)}
                style={{
                  minHeight: 48,
                  border: active ? `1px solid ${toneColors[tab.tone]}` : '1px solid transparent',
                  borderRadius: 6,
                  background: active ? '#fff' : 'transparent',
                  color: active ? '#141413' : '#6f6d66',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 7,
                  fontSize: 12,
                  fontWeight: 700,
                  cursor: 'pointer',
                  minWidth: 0,
                }}
              >
                <Icon size={15} color={toneColors[tab.tone]} />
                <span style={{ minWidth: 0, ...textWrap }}>{t(`tabs.${tab.key}` as never)}</span>
              </button>
            )
          })}
        </div>
      </div>

      {mode === 'attackPath' ? <IwoooSAttackPathVisual /> : null}
      {mode === 'assetHeat' ? <IwoooSAssetHeatVisual /> : null}
      {mode === 'responseFlow' ? <IwoooSResponseFlowVisual /> : null}
    </section>
  )
}

function IwoooSConcreteWorkSnapshot() {
  const t = useTranslations('iwooos.concreteWorkSnapshot')
  const workT = useTranslations('iwooos.concreteSecurityWorkMap')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const summaryItems = [
    { key: 'visible', value: '6', tone: 'steady' as const },
    { key: 'delivered', value: '1', tone: 'steady' as const },
    { key: 'nextGate', value: 'S4.9', tone: 'warn' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]

  return (
    <section
      data-testid="iwooos-concrete-work-snapshot"
      style={{
        marginBottom: 14,
        borderTop: '0.5px solid #d7e2dc',
        borderBottom: '0.5px solid #d7e2dc',
        padding: '16px 0',
      }}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
          gap: 14,
          alignItems: 'start',
        }}
      >
        <div style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#53645b', fontSize: 12, fontWeight: 700 }}>
            <ListChecks size={17} color="#1f7a4d" />
            {t('eyebrow')}
          </div>
          <h2 style={{ fontSize: 20, lineHeight: 1.2, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
          <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '8px 0 0', maxWidth: 720, ...textWrap }}>
            {t('subtitle')}
          </p>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 120px), 1fr))',
            gap: 8,
            minWidth: 0,
          }}
        >
          {summaryItems.map(item => (
            <div key={item.key} style={{ ...band, padding: 12, background: '#fff', minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ fontSize: 11, color: '#687872' }}>{t(`summary.${item.key}.label` as never)}</span>
                <ToneDot tone={item.tone} />
              </div>
              <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                {item.value}
              </div>
              <div style={{ fontSize: 11, color: '#596761', lineHeight: 1.4, marginTop: 6, ...textWrap }}>
                {t(`summary.${item.key}.detail` as never)}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div
        style={{
          marginTop: 14,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 160px), 1fr))',
          gap: 9,
        }}
      >
        {iwooosConcreteSecurityWorkStreams.map(item => {
          const Icon = item.icon
          return (
            <div
              key={item.key}
              style={{
                border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                borderRadius: 8,
                background: item.tone === 'steady' ? '#f7fbfa' : item.tone === 'warn' ? '#fffaf7' : '#f8f7f3',
                padding: 11,
                minHeight: 118,
                display: 'grid',
                alignContent: 'space-between',
                minWidth: 0,
                ...textWrap,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ fontSize: 11, color: '#7c847c', fontWeight: 700 }}>{item.work}</span>
                <Icon size={16} color={toneColors[item.tone]} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
                  {workT(`items.${item.key}.title` as never)}
                </div>
                <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                  {item.state}
                </div>
              </div>
              <div style={{ height: 4, borderRadius: 4, background: '#e8ebe5', overflow: 'hidden' }}>
                <div
                  style={{
                    width: item.tone === 'steady' ? '100%' : item.tone === 'warn' ? '56%' : '18%',
                    height: '100%',
                    background: toneColors[item.tone],
                  }}
                />
              </div>
            </div>
          )
        })}
      </div>
    </section>
  )
}

function IwoooSAttackPathVisual() {
  const t = useTranslations('iwooos.professionalSecurityExperience')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const edges = [
    ['publicWeb', 'apiRuntime'],
    ['apiRuntime', 'projectSource'],
    ['projectSource', 'devHosts'],
    ['apiRuntime', 'kali112'],
    ['devHosts', 'runtimeGate'],
    ['kali112', 'runtimeGate'],
  ] as const

  return (
    <div
      style={{
        ...band,
        padding: 16,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 360px), 1fr))',
        gap: 14,
        alignItems: 'start',
      }}
    >
      <div
        style={{
          border: '0.5px solid #d8e5dc',
          borderRadius: 8,
          background: '#fbfcfb',
          padding: 12,
          display: 'grid',
          alignContent: 'center',
          minWidth: 0,
        }}
      >
        <svg viewBox="0 0 620 280" role="img" aria-label={t('attackPath.chartLabel')} style={{ width: '100%', height: 'auto', display: 'block' }}>
          <defs>
            <marker id="iwooos-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
              <path d="M0,0 L8,4 L0,8 Z" fill="#9a8f7d" />
            </marker>
          </defs>
          {edges.map(([fromKey, toKey]) => {
            const from = attackPathNodes.find(node => node.key === fromKey)
            const to = attackPathNodes.find(node => node.key === toKey)
            if (!from || !to) return null
            return (
              <line
                key={`${fromKey}-${toKey}`}
                x1={from.x}
                y1={from.y}
                x2={to.x}
                y2={to.y}
                stroke="#b7ac9c"
                strokeWidth="2"
                strokeDasharray={to.tone === 'locked' ? '6 5' : '0'}
                markerEnd="url(#iwooos-arrow)"
              />
            )
          })}
          {attackPathNodes.map(node => (
            <g key={node.key}>
              <circle cx={node.x} cy={node.y} r="26" fill="#fff" stroke={toneColors[node.tone]} strokeWidth="3" />
              <circle cx={node.x} cy={node.y} r="9" fill={toneColors[node.tone]} />
              <text x={node.x} y={node.y + 46} textAnchor="middle" fontSize="13" fontWeight="700" fill="#141413">
                {t(`attackPath.nodes.${node.key}.title` as never)}
              </text>
              <text x={node.x} y={node.y + 64} textAnchor="middle" fontSize="11" fill="#6f6d66">
                {t(`attackPath.nodes.${node.key}.state` as never)}
              </text>
            </g>
          ))}
        </svg>
      </div>

      <div style={{ display: 'grid', gap: 10, minWidth: 0 }}>
        {['scope', 'blastRadius', 'gate'].map(key => (
          <div
            key={key}
            style={{
              border: '0.5px solid #e0ddd4',
              borderRadius: 8,
              padding: 13,
              minHeight: 84,
              background: key === 'gate' ? '#f8f7f3' : '#fff',
              minWidth: 0,
            }}
          >
            <div style={{ fontSize: 12, color: '#87867f', marginBottom: 5 }}>{t(`attackPath.signals.${key}.label` as never)}</div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
              {t(`attackPath.signals.${key}.value` as never)}
            </div>
            <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.4, marginTop: 5, ...textWrap }}>
              {t(`attackPath.signals.${key}.detail` as never)}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function IwoooSAssetHeatVisual() {
  const t = useTranslations('iwooos.professionalSecurityExperience')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <div style={{ ...band, padding: 16, background: '#fff', minWidth: 0 }}>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 140px), 1fr))',
          gap: 9,
        }}
      >
        {assetHeatCells.map(cell => (
          <div
            key={cell.key}
            style={{
              minHeight: 108,
              border: `0.5px solid ${cell.tone === 'steady' ? '#cfe2d8' : cell.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
              borderRadius: 8,
              background: cell.tone === 'steady' ? '#f7fbfa' : cell.tone === 'warn' ? '#fffaf7' : '#f8f7f3',
              padding: 12,
              display: 'grid',
              alignContent: 'space-between',
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <ToneDot tone={cell.tone} />
              <span style={{ fontSize: 18, fontWeight: 700, color: toneColors[cell.tone] }}>{cell.level}</span>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
                {t(`assetHeat.cells.${cell.key}.title` as never)}
              </div>
              <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.4, marginTop: 4, ...textWrap }}>
                {t(`assetHeat.cells.${cell.key}.caption` as never)}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function IwoooSResponseFlowVisual() {
  const t = useTranslations('iwooos.professionalSecurityExperience')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <div style={{ ...band, padding: 16, background: '#fbfcfb', minWidth: 0 }}>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))',
          gap: 10,
          alignItems: 'stretch',
        }}
      >
        {responseFlowSteps.map(item => {
          const Icon = item.icon
          return (
            <div
              key={item.key}
              style={{
                position: 'relative',
                border: '0.5px solid #d8d2c3',
                borderRadius: 8,
                background: '#fff',
                padding: 13,
                minHeight: 142,
                display: 'grid',
                alignContent: 'space-between',
                minWidth: 0,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <Icon size={18} color={toneColors[item.tone]} />
                <span style={{ fontSize: 11, color: '#87867f' }}>{item.step}</span>
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
                  {t(`responseFlow.steps.${item.key}.title` as never)}
                </div>
                <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, marginTop: 5, ...textWrap }}>
                  {t(`responseFlow.steps.${item.key}.caption` as never)}
                </div>
              </div>
              <div style={{ height: 4, borderRadius: 4, background: '#e8ebe5', overflow: 'hidden' }}>
                <div
                  style={{
                    width: item.tone === 'steady' ? '100%' : item.tone === 'warn' ? '58%' : '18%',
                    height: '100%',
                    background: toneColors[item.tone],
                  }}
                />
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

function IwoooSFastProgressSummary() {
  const t = useTranslations('iwooos.fastProgress')
  return (
    <section
      data-testid="iwooos-fast-progress-summary"
      style={{
        marginBottom: 14,
        borderTop: '0.5px solid #d8d2c3',
        borderBottom: '0.5px solid #d8d2c3',
        padding: '16px 0',
      }}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
          gap: 16,
          alignItems: 'start',
          marginBottom: 14,
        }}
      >
        <div style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Activity size={18} color="#b66a2d" />
            <span style={{ fontSize: 12, color: '#6f6d66', fontWeight: 700 }}>{t('eyebrow')}</span>
          </div>
          <h2 style={{ fontSize: 20, lineHeight: 1.2, margin: 0, color: '#141413' }}>{t('title')}</h2>
          <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.6, margin: '8px 0 0' }}>
            {t('subtitle')}
          </p>
        </div>
        <div style={{ ...band, padding: 14, background: '#fffaf7', borderColor: '#e6c8b8', minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <ClipboardCheck size={16} color="#b66a2d" />
            <span style={{ fontSize: 12, fontWeight: 700, color: '#6f4f37' }}>{t('nextGate.title')}</span>
          </div>
          <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f4f37', margin: 0 }}>
            {t('nextGate.body')}
          </p>
        </div>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
          gap: 12,
        }}
      >
        {fastProgressItems.map(item => {
          const Icon = item.icon
          return (
            <div key={item.key} style={{ ...band, padding: 15, minHeight: 150 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <Icon size={18} color={toneColors[item.tone]} />
                <span style={{ fontSize: 12, fontWeight: 700, color: toneColors[item.tone] }}>{item.value}</span>
              </div>
              <h3 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
                {t(`items.${item.key}.title` as never)}
              </h3>
              <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
                {t(`items.${item.key}.body` as never)}
              </p>
            </div>
          )
        })}
      </div>
    </section>
  )
}

function IwoooSOperatorNextTasksBoard() {
  const t = useTranslations('iwooos.operatorNextTasks')
  return (
    <section style={{ marginBottom: 0 }} data-testid="iwooos-operator-next-tasks-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 12,
        }}
      >
        {operatorNextTasks.map(item => {
          const Icon = item.icon
          return (
            <div key={item.key} style={{ ...band, minHeight: 188, padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <Icon size={18} color={toneColors[item.tone]} />
                  <span style={{ fontSize: 11, color: '#87867f' }}>{t('stepLabel')}</span>
                </div>
                <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.step}</span>
              </div>
              <h3 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
                {t(`items.${item.key}.title` as never)}
              </h3>
              <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
                {t(`items.${item.key}.body` as never)}
              </p>
              <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
                <div style={{ fontSize: 11, color: '#87867f' }}>{t('doneLabel')}</div>
                <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
                  {t(`items.${item.key}.done` as never)}
                </div>
              </div>
            </div>
          )
        })}
      </div>
      <div
        style={{
          marginTop: 10,
          border: '0.5px solid #e6c8b8',
          borderRadius: 8,
          background: '#fffaf7',
          padding: 12,
          color: '#6f4f37',
          fontSize: 11,
          lineHeight: 1.5,
        }}
      >
        {t('boundary')}
      </div>
    </section>
  )
}

function IwoooSStageCompletionReportBoard() {
  const t = useTranslations('iwooos.stageCompletionReport')
  return (
    <section style={{ marginBottom: 0 }} data-testid="iwooos-stage-completion-report-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
          gap: 12,
        }}
      >
        {stageCompletionReportItems.map(item => {
          const Icon = item.icon
          return (
            <div key={item.key} style={{ ...band, minHeight: 156, padding: 15 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <Icon size={18} color={toneColors[item.tone]} />
                <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.value}</span>
              </div>
              <h3 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
                {t(`items.${item.key}.title` as never)}
              </h3>
              <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
                {t(`items.${item.key}.body` as never)}
              </p>
            </div>
          )
        })}
      </div>
      <div
        style={{
          marginTop: 10,
          border: '0.5px solid #d6e4d7',
          borderRadius: 8,
          background: '#f8fbf7',
          padding: 12,
          color: '#38533e',
          fontSize: 11,
          lineHeight: 1.5,
        }}
      >
        {t('boundary')}
      </div>
    </section>
  )
}

function IwoooSAllProductCoverageSnapshotBoard() {
  const t = useTranslations('iwooos.allProductCoverageSnapshot')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
      data-testid="iwooos-all-product-coverage-snapshot-board"
    >
      <div style={{ ...band, padding: 16, background: '#f7fbfa' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#53645b', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 8 }}>
              {allProductCoverageSnapshotSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #cfe2d8', borderRadius: 8, padding: 11, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#65766d' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={15} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.1, marginTop: 7, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#53645b', lineHeight: 1.45, margin: '7px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gap: 8 }}>
            {allProductCoverageSnapshotItems.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto minmax(0, 1fr)',
                    alignItems: 'center',
                    gap: 10,
                    border: '0.5px solid #cfe2d8',
                    borderRadius: 8,
                    background: '#fff',
                    padding: '10px 12px',
                    minWidth: 0,
                  }}
                >
                  <Icon size={18} color={toneColors[item.tone]} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: '#141413', lineHeight: 1.35, ...textWrap }}>
                      {t(`items.${item.key}.title` as never)}
                    </div>
                    <div style={{ fontSize: 11, color: '#53645b', lineHeight: 1.4, marginTop: 3, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </div>
                    <div
                      style={{
                        marginTop: 6,
                        display: 'flex',
                        alignItems: 'center',
                        flexWrap: 'wrap',
                        gap: 6,
                        fontSize: 11,
                        lineHeight: 1.35,
                      }}
                    >
                      <span style={{ color: toneColors[item.tone], fontWeight: 700 }}>{item.scope}</span>
                      <span style={{ color: '#6f6d66' }}>
                        {t(`states.${item.stateKey}` as never)}
                      </span>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-all-product-coverage-snapshot-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #cfe2d8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#3d584a' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#53645b', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {allProductCoverageSnapshotBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #dbe8df',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#3d584a',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfdfa',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSGlobalSecurityMeshMatrixBoard() {
  const t = useTranslations('iwooos.globalSecurityMeshMatrix')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      id="iwooos-global-security-mesh-matrix-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
      data-testid="iwooos-global-security-mesh-matrix-board"
    >
      <div style={{ ...band, padding: 16, background: '#f7fbfa', borderColor: '#cfe2d8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))',
            gap: 14,
            alignItems: 'start',
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#405f4f', fontSize: 12, fontWeight: 700 }}>
              <Radar size={17} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#405f4f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))', gap: 8 }}>
            {globalSecurityMeshMatrixSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #cfe2d8', borderRadius: 8, padding: 11, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#607466' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={15} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], marginTop: 8, lineHeight: 1.1 }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#405f4f', margin: '7px 0 0', lineHeight: 1.45, ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 250px), 1fr))',
            gap: 10,
          }}
        >
          {globalSecurityMeshMatrixItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: '0.5px solid #cfe2d8',
                  borderRadius: 8,
                  background: '#fff',
                  padding: 12,
                  minHeight: 184,
                  display: 'grid',
                  alignContent: 'space-between',
                  gap: 9,
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, color: '#607466', fontWeight: 700 }}>{item.code}</div>
                    <h3 style={{ fontSize: 14, margin: '5px 0 0', color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#607466', margin: '5px 0 0', lineHeight: 1.4, ...textWrap }}>
                      {t(`items.${item.key}.layer` as never)}
                    </p>
                  </div>
                  <Icon size={18} color={toneColors[item.coverageTone]} />
                </div>

                <div style={{ display: 'grid', gap: 6 }}>
                  {[
                    { label: t('coverageLabel'), value: t(`items.${item.key}.coverage` as never), tone: item.coverageTone },
                    { label: t('evidenceLabel'), value: t(`items.${item.key}.evidence` as never), tone: item.evidenceTone },
                    { label: t('runtimeLabel'), value: t(`items.${item.key}.runtime` as never), tone: item.runtimeTone },
                  ].map(row => (
                    <div
                      key={row.label}
                      style={{
                        display: 'grid',
                        gridTemplateColumns: '66px minmax(0, 1fr)',
                        gap: 8,
                        alignItems: 'center',
                      }}
                    >
                      <span style={{ fontSize: 10, color: '#7c847c' }}>{row.label}</span>
                      <span
                        style={{
                          border: `0.5px solid ${row.tone === 'steady' ? '#cfe2d8' : row.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                          borderRadius: 999,
                          padding: '4px 8px',
                          color: toneColors[row.tone],
                          background: row.tone === 'steady' ? '#f7fbfa' : row.tone === 'warn' ? '#fffaf7' : '#f8f7f3',
                          fontSize: 11,
                          lineHeight: 1.2,
                          ...textWrap,
                        }}
                      >
                        {row.value}
                      </span>
                    </div>
                  ))}
                </div>

                <p style={{ fontSize: 11, color: '#405f4f', margin: 0, lineHeight: 1.45, ...textWrap }}>
                  <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-global-security-mesh-matrix-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #cfe2d8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#405f4f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {globalSecurityMeshMatrixBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #d9eadf',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#405f4f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7fbfa',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSHostToolEvidenceChainBoard() {
  const t = useTranslations('iwooos.hostToolEvidenceChain')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      id="iwooos-host-tool-evidence-chain-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
      data-testid="iwooos-host-tool-evidence-chain-board"
    >
      <div style={{ ...band, padding: 16, background: '#fbfbf7', borderColor: '#ded8c8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 360px), 1fr))',
            gap: 14,
            alignItems: 'stretch',
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#5c543f', fontSize: 12, fontWeight: 700 }}>
              <Activity size={17} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#5c543f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>

            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))',
                gap: 8,
                marginTop: 12,
              }}
            >
              {hostToolEvidenceChainSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #ded8c8', borderRadius: 8, padding: 10, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#756b55' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={15} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: toneColors[item.tone], marginTop: 7, lineHeight: 1.1 }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#5c543f', margin: '6px 0 0', lineHeight: 1.45, ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>

          <div
            style={{
              border: '0.5px solid #ded8c8',
              borderRadius: 8,
              padding: 12,
              background: '#fff',
              minWidth: 0,
              display: 'grid',
              alignContent: 'start',
              gap: 10,
            }}
          >
            <h3 style={{ fontSize: 13, margin: 0, color: '#141413' }}>{t('flowTitle')}</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(86px, 1fr))', gap: 7 }}>
              {hostToolEvidenceChainSteps.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                      borderRadius: 8,
                      padding: '8px 7px',
                      background: item.tone === 'steady' ? '#f7fbfa' : item.tone === 'warn' ? '#fffaf7' : '#f8f7f3',
                      minWidth: 0,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
                      <span style={{ fontSize: 10, color: '#7b7465', fontWeight: 700 }}>{item.step}</span>
                      <Icon size={14} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 11, color: '#2f322f', fontWeight: 700, lineHeight: 1.3, marginTop: 6, ...textWrap }}>
                      {t(`steps.${item.key}.title` as never)}
                    </div>
                    <p style={{ fontSize: 10, color: '#6f6d66', lineHeight: 1.35, margin: '5px 0 0', ...textWrap }}>
                      {t(`steps.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))',
            gap: 10,
            marginTop: 14,
          }}
        >
          {hostToolEvidenceChainItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: '0.5px solid #ded8c8',
                  borderRadius: 8,
                  padding: 12,
                  background: '#fff',
                  minWidth: 0,
                  minHeight: 170,
                  display: 'grid',
                  gap: 8,
                  alignContent: 'space-between',
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, color: '#7b7465', fontWeight: 700 }}>{item.lane}</div>
                    <h3 style={{ fontSize: 14, margin: '5px 0 0', color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                  </div>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <p style={{ fontSize: 11, color: '#5c543f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.scope` as never)}
                </p>
                <div style={{ display: 'grid', gap: 6 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '62px minmax(0, 1fr)', gap: 8 }}>
                    <span style={{ fontSize: 10, color: '#7b7465' }}>{t('evidenceLabel')}</span>
                    <span style={{ fontSize: 11, color: '#2f322f', lineHeight: 1.35, ...textWrap }}>
                      {t(`items.${item.key}.evidence` as never)}
                    </span>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '62px minmax(0, 1fr)', gap: 8 }}>
                    <span style={{ fontSize: 10, color: '#7b7465' }}>{t('nextLabel')}</span>
                    <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.35, ...textWrap }}>
                      {t(`items.${item.key}.next` as never)}
                    </span>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-host-tool-evidence-chain-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #ded8c8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#5c543f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#5c543f', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {hostToolEvidenceChainBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e6deca',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#5c543f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfbf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSVibeWorkSecurityOnboardingBoard() {
  const t = useTranslations('iwooos.vibeWorkSecurityOnboarding')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-vibework-security-onboarding-board">
      <div style={{ ...band, padding: 16, background: '#fffaf7', borderColor: '#e6c8b8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6f4f37', fontSize: 12, fontWeight: 700 }}>
              <FileText size={17} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#6f4f37', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {vibeWorkSecurityOnboardingSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #e6c8b8', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#7f6a58' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8 }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {vibeWorkSecurityOnboardingItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: `0.5px solid ${item.tone === 'locked' ? '#dad7ce' : '#e6c8b8'}`,
                  borderRadius: 8,
                  background: item.tone === 'locked' ? '#f8f7f3' : '#fff',
                  padding: 13,
                  minHeight: 176,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {t('checkLabel')} {item.check}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('stateLabel')}：{item.state}
                  </div>
                </div>
                <div style={{ display: 'grid', gap: 5 }}>
                  <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: 0, ...textWrap }}>
                    <strong>{t('missingLabel')}</strong>：{t(`items.${item.key}.missing` as never)}
                  </p>
                  <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                    <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                  </p>
                </div>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-vibework-security-onboarding-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #e6c8b8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#6f4f37' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {vibeWorkSecurityOnboardingBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #efd8ca',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#6f4f37',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fffaf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSAgentBountySecurityOnboardingBoard() {
  const t = useTranslations('iwooos.agentBountySecurityOnboarding')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-agent-bounty-security-onboarding-board">
      <div style={{ ...band, padding: 16, background: '#f7fbff', borderColor: '#b9d3e7' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#2f5570', fontSize: 12, fontWeight: 700 }}>
              <Workflow size={17} color="#35789c" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#365d72', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {agentBountySecurityOnboardingSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #b9d3e7', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#5e7280' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8 }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#365d72', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {agentBountySecurityOnboardingItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: `0.5px solid ${item.tone === 'locked' ? '#dad7ce' : '#b9d3e7'}`,
                  borderRadius: 8,
                  background: item.tone === 'locked' ? '#f8f7f3' : '#fff',
                  padding: 13,
                  minHeight: 188,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {t('checkLabel')} {item.check}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('stateLabel')}：{item.state}
                  </div>
                </div>
                <div style={{ display: 'grid', gap: 5 }}>
                  <p style={{ fontSize: 11, color: '#365d72', lineHeight: 1.45, margin: 0, ...textWrap }}>
                    <strong>{t('missingLabel')}</strong>：{t(`items.${item.key}.missing` as never)}
                  </p>
                  <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                    <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                  </p>
                </div>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-agent-bounty-security-onboarding-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #b9d3e7',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#2f5570' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#365d72', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {agentBountySecurityOnboardingBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #d4e6f2',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#2f5570',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7fbff',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSRolloutRiskReadOnlyBoard() {
  const t = useTranslations('iwooos.rolloutRiskReadOnly')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-rollout-risk-read-only-board">
      <div style={{ ...band, padding: 16, background: '#fffaf7', borderColor: '#e6c8b8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#8c4c1f', fontSize: 12, fontWeight: 700 }}>
              <AlertTriangle size={17} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#6f4f37', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {rolloutRiskReadOnlySummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #efd8ca', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#8c7768' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8, ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {rolloutRiskReadOnlyItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: `0.5px solid ${item.tone === 'steady' ? '#c8dfcf' : '#efd8ca'}`,
                  borderRadius: 8,
                  background: item.tone === 'locked' ? '#f8f7f3' : '#fff',
                  padding: 13,
                  minHeight: 166,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {t('signalLabel')} {item.signal}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('stateLabel')}：{item.state}
                  </div>
                </div>
                <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-rollout-risk-read-only-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #efd8ca',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#8c4c1f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {rolloutRiskReadOnlyBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #efd8ca',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#6f4f37',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fffaf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSHighValueConfigOwnerPacketBoard() {
  const t = useTranslations('iwooos.highValueConfigOwnerPacket')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-high-value-config-owner-packet-board">
      <div style={{ ...band, padding: 16, background: '#f8fbf7', borderColor: '#c8dfcf' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#315c41', fontSize: 12, fontWeight: 700 }}>
              <ListChecks size={17} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#405f4f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {highValueConfigOwnerPacketSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #c8dfcf', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#617165' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8, ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {highValueConfigOwnerPacketItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: `0.5px solid ${item.tone === 'locked' ? '#dad7ce' : '#c8dfcf'}`,
                  borderRadius: 8,
                  background: item.tone === 'locked' ? '#f8f7f3' : '#fff',
                  padding: 13,
                  minHeight: 174,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {t('gateLabel')} {item.gate}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('stateLabel')}：{item.state}
                  </div>
                </div>
                <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-high-value-config-owner-packet-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #c8dfcf',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#315c41' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {highValueConfigOwnerPacketBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #d9e8dc',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#315c41',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f8fbf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSHighValueConfigControlCoverageBoard() {
  const t = useTranslations('iwooos.highValueConfigControlCoverage')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-high-value-config-control-coverage-board">
      <div style={{ ...band, padding: 16, background: '#fbfaf4', borderColor: '#e7d9b6' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6f4f1f', fontSize: 12, fontWeight: 700 }}>
              <ShieldCheck size={17} color="#8f631e" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#66583d', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {highValueConfigControlCoverageSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #e7d9b6', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#766845' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8, ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#66583d', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {highValueConfigControlCoverageItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: '0.5px solid #e7d9b6',
                  borderRadius: 8,
                  background: '#fff',
                  padding: 13,
                  minHeight: 154,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {item.rank}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('coverageLabel')}：{item.value}
                  </div>
                </div>
                <p style={{ fontSize: 11, color: '#66583d', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-high-value-config-control-coverage-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #e7d9b6',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#6f4f1f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#66583d', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {highValueConfigControlCoverageBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e7d9b6',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#6f4f1f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfaf4',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSPublicGatewayPreflightBoard() {
  const t = useTranslations('iwooos.publicGatewayPreflight')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-public-gateway-preflight-board">
      <div style={{ ...band, padding: 16, background: '#fff8f4', borderColor: '#e7c8b7' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#874426', fontSize: 12, fontWeight: 700 }}>
              <Server size={17} color="#a34c24" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#6d4d3d', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {publicGatewayPreflightSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #e7c8b7', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#7b5a49' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8, ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6d4d3d', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {publicGatewayPreflightItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: `0.5px solid ${item.tone === 'locked' ? '#dad7ce' : '#e7c8b7'}`,
                  borderRadius: 8,
                  background: item.tone === 'locked' ? '#f8f7f3' : '#fff',
                  padding: 13,
                  minHeight: 164,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {item.gate}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('stateLabel')}：{item.state}
                  </div>
                </div>
                <p style={{ fontSize: 11, color: '#6d4d3d', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-public-gateway-preflight-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #e7c8b7',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#874426' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#6d4d3d', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {publicGatewayPreflightBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #efd8cb',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#874426',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fff8f4',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSDomainTlsCertbotInventoryBoard() {
  const t = useTranslations('iwooos.domainTlsCertbotInventory')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }} data-testid="iwooos-domain-tls-certbot-inventory-board">
      <div style={{ ...band, padding: 16, background: '#f7fbfb', borderColor: '#c7dfe0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#285b5f', fontSize: 12, fontWeight: 700 }}>
              <Route size={17} color="#2f777d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#3d6264', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8 }}>
            {domainTlsCertbotInventorySummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #c7dfe0', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#5e7375' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 8, ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#3d6264', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 14,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 10,
          }}
        >
          {domainTlsCertbotInventoryItems.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  border: `0.5px solid ${item.tone === 'locked' ? '#dad7ce' : '#c7dfe0'}`,
                  borderRadius: 8,
                  background: item.tone === 'locked' ? '#f8f7f3' : '#fff',
                  padding: 13,
                  minHeight: 174,
                  display: 'grid',
                  alignContent: 'space-between',
                  minWidth: 0,
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {t('checkLabel')} {item.check}
                  </span>
                  <Icon size={18} color={toneColors[item.tone]} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', lineHeight: 1.25 }}>
                    {t(`items.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700, marginTop: 5 }}>
                    {t('stateLabel')}：{item.state}
                  </div>
                </div>
                <p style={{ fontSize: 11, color: '#3d6264', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-domain-tls-certbot-inventory-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #c7dfe0',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#285b5f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#3d6264', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {domainTlsCertbotInventoryBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #d8e9ea',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#285b5f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7fbfb',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function ProgressAccelerationLaneCard({ item }: { item: ProgressAccelerationLane }) {
  const t = useTranslations('iwooos.progressAcceleration')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 202, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('unlockLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.unlock` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function ProgressHoldMovementGateCard({ item }: { item: ProgressHoldMovementGate }) {
  const t = useTranslations('iwooos.progressHoldMovementGates')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('gateLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.gate}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('moveLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.move` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HeadlineMovementAcceptanceGateCard({ item }: { item: HeadlineMovementAcceptanceGate }) {
  const t = useTranslations('iwooos.headlineMovementAcceptanceGate')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 198, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('gateLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.gate}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('acceptanceLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.acceptance` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function HeadlineMovementAcceptanceGateBoard() {
  const t = useTranslations('iwooos.headlineMovementAcceptanceGate')
  const summaryItems = [
    { key: 'headline', value: '64%', tone: 'warn' as const },
    { key: 'signals', value: '2 / 6', tone: 'warn' as const },
    { key: 's49Accepted', value: '0 / 5', tone: 'warn' as const },
    { key: 'review', value: '已記錄', tone: 'steady' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-headline-movement-acceptance-gate-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {headlineMovementAcceptanceGates.map(item => (
          <HeadlineMovementAcceptanceGateCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {headlineMovementAcceptanceGateBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function AwoooPReadOnlyLandingReadinessCard({ item }: { item: AwoooPReadOnlyLandingReadinessItem }) {
  const t = useTranslations('iwooos.awooopReadOnlyLandingReadiness')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 190, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('readinessLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.item}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('requirementLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.requirement` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function AwoooPCrossSessionHandoffPacketCard({ item }: { item: AwoooPCrossSessionHandoffPacket }) {
  const t = useTranslations('iwooos.awooopCrossSessionHandoff')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 204, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('handoffLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.handoff` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function OwnerResponseNextActionFocusCard({ item }: { item: OwnerResponseNextActionFocusItem }) {
  const t = useTranslations('iwooos.ownerResponseNextActionFocus')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('focusLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.focus}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function SourceControlReadinessCard({ item }: { item: SourceControlReadinessItem }) {
  const t = useTranslations('iwooos.sourceControlReadiness')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('gateLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.gate}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: '#141413', marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function S49OwnerResponsePreflightCard({ item }: { item: S49OwnerResponsePreflightCheck }) {
  const t = useTranslations('iwooos.s49OwnerResponsePreflight')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 178, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('failureLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.failure` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function S49OwnerResponseRequestTemplateCard({ item }: { item: S49OwnerResponseRequestTemplate }) {
  const t = useTranslations('iwooos.s49OwnerResponseRequestTemplates')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 188, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('templateLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.template}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('ownerActionLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.ownerAction` as never)}
        </div>
        <div style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function S49OwnerResponseWorkOrderCard({ item }: { item: S49OwnerResponseWorkOrderItem }) {
  const t = useTranslations('iwooos.s49OwnerResponseWorkOrder')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 218, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('itemLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.item}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('requiredFieldsLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.requiredFields` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('acceptanceLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.acceptance` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function S49OwnerResponseWorkOrderBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseWorkOrder')
  const summaryItems = [
    { key: 'items', value: '5', tone: 'warn' as const },
    { key: 'fields', value: '6', tone: 'steady' as const },
    { key: 'received', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-s49-owner-response-work-order-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {s49OwnerResponseWorkOrderItems.map(item => (
          <S49OwnerResponseWorkOrderCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {s49OwnerResponseWorkOrderBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function S49OwnerResponseEnvelopeFieldCard({ item }: { item: S49OwnerResponseEnvelopeField }) {
  const t = useTranslations('iwooos.s49OwnerResponseEnvelope')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 204, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('fieldLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.field}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('formatLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.format` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function S49OwnerResponseEnvelopeBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseEnvelope')
  const summaryItems = [
    { key: 'fields', value: '6', tone: 'warn' as const },
    { key: 'filled', value: '0', tone: 'locked' as const },
    { key: 'submitted', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-s49-owner-response-envelope-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {s49OwnerResponseEnvelopeFields.map(item => (
          <S49OwnerResponseEnvelopeFieldCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {s49OwnerResponseEnvelopeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function S49OwnerResponseEnvelopePreflightCard({ item }: { item: S49OwnerResponseEnvelopePreflightCheck }) {
  const t = useTranslations('iwooos.s49OwnerResponseEnvelopePreflight')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 188, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('failureLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.failure` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function S49OwnerResponseEnvelopePreflightBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseEnvelopePreflight')
  const summaryItems = [
    { key: 'checks', value: '6', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'locked' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'submitted', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-s49-owner-response-envelope-preflight-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {s49OwnerResponseEnvelopePreflightChecks.map(item => (
          <S49OwnerResponseEnvelopePreflightCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {s49OwnerResponseEnvelopePreflightBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function S49OwnerResponseEnvelopePreflightOutcomeCard({
  item,
}: {
  item: S49OwnerResponseEnvelopePreflightOutcomeLane
}) {
  const t = useTranslations('iwooos.s49OwnerResponseEnvelopePreflightOutcome')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 190, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.next` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function S49OwnerResponseEnvelopePreflightOutcomeBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseEnvelopePreflightOutcome')
  const summaryItems = [
    { key: 'lanes', value: '7', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'quarantined', value: '0', tone: 'locked' as const },
    { key: 'rejected', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-s49-owner-response-envelope-preflight-outcome-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {s49OwnerResponseEnvelopePreflightOutcomeLanes.map(item => (
          <S49OwnerResponseEnvelopePreflightOutcomeCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {s49OwnerResponseEnvelopePreflightOutcomeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function S49OwnerResponseRequestDraftCard({ item }: { item: S49OwnerResponseRequestDraftItem }) {
  const t = useTranslations('iwooos.s49OwnerResponseRequestDraft')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 196, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('draftLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.draft}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('gapLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.gap` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function S49OwnerResponseRequestDraftBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseRequestDraft')
  const summaryItems = [
    { key: 'drafts', value: '6', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'sent', value: '0', tone: 'locked' as const },
    { key: 'emitted', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-s49-owner-response-request-draft-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {s49OwnerResponseRequestDraftItems.map(item => (
          <S49OwnerResponseRequestDraftCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {s49OwnerResponseRequestDraftBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function S49OwnerResponseDispatchFlowBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseDispatchFlow')
  const summaryItems = [
    { key: 'steps', value: '6', tone: 'warn' as const },
    { key: 'current', value: '05', tone: 'warn' as const },
    { key: 'sent', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-s49-owner-response-dispatch-flow-board">
      <div style={{ ...band, padding: 16, background: '#fffdf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))',
                gap: 8,
                marginBottom: 14,
              }}
            >
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #eee9dd', borderRadius: 8, padding: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 23, fontWeight: 700, lineHeight: 1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 9 }}>
              {s49OwnerResponseDispatchFlowSteps.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      border: '0.5px solid #e7e1d3',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 12,
                      minHeight: 142,
                      display: 'grid',
                      alignContent: 'start',
                      gap: 7,
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#87867f' }}>{t('stepLabel')} {item.step}</span>
                      <Icon size={17} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.15 }}>
                      {item.status}
                    </div>
                    <h3 style={{ fontSize: 13, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f7f5ee', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ShieldCheck size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {s49OwnerResponseDispatchFlowBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e0ddd4',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4f4c45',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function SecurityComplianceFrontStageBoard() {
  const t = useTranslations('iwooos.securityComplianceFrontStage')
  const summaryItems = [
    { key: 'route', value: '/security-compliance', tone: 'steady' as const },
    { key: 'decision', value: '整合', tone: 'warn' as const },
    { key: 'removed', value: '否', tone: 'steady' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-security-compliance-frontstage-board">
      <div style={{ ...band, padding: 16, background: '#fffdf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))',
                gap: 8,
                marginBottom: 14,
              }}
            >
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #eee9dd', borderRadius: 8, padding: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413', ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 9 }}>
              {securityComplianceFrontStageDecisions.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      border: '0.5px solid #e7e1d3',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 12,
                      minHeight: 118,
                      display: 'grid',
                      alignContent: 'start',
                      gap: 7,
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#87867f' }}>{t('decisionLabel')}</span>
                      <Icon size={17} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.15 }}>
                      {item.value}
                    </div>
                    <h3 style={{ fontSize: 13, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f7f5ee', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ShieldCheck size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {securityComplianceFrontStageBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e0ddd4',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4f4c45',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function FrontstageSecurityEntryRolesBoard({ locale }: { locale: string }) {
  const t = useTranslations('iwooos.frontstageEntryRoles')
  const summaryItems = [
    { key: 'entries', value: '5', tone: 'warn' as const },
    { key: 'primary', value: 'IwoooS', tone: 'steady' as const },
    { key: 'familiar', value: '安全合規', tone: 'warn' as const },
    { key: 'execution', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-frontstage-security-entry-roles-board">
      <div style={{ ...band, padding: 16, background: '#fffdf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))',
                gap: 8,
                marginBottom: 14,
              }}
            >
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #eee9dd', borderRadius: 8, padding: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413', ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(168px, 1fr))', gap: 9 }}>
              {frontstageSecurityEntryRoles.map(item => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.key}
                    href={`/${locale}${item.href}`}
                    aria-label={t(`items.${item.key}.title` as never)}
                    style={{
                      display: 'grid',
                      alignContent: 'start',
                      gap: 7,
                      minHeight: 136,
                      border: '0.5px solid #e7e1d3',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 12,
                      color: '#141413',
                      textDecoration: 'none',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#87867f' }}>{t('routeLabel')} {item.route}</span>
                      <Icon size={17} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.15 }}>
                        {item.mode}
                      </span>
                      <span style={{ fontSize: 11, color: '#87867f' }}>{item.href}</span>
                    </div>
                    <h3 style={{ fontSize: 13, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </Link>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f7f5ee', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <Lock size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {frontstageSecurityEntryRoleBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e0ddd4',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4f4c45',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSLowFrictionRolloutLadderBoard() {
  const t = useTranslations('iwooos.lowFrictionRollout')
  const summaryItems = [
    { key: 'phases', value: '5', tone: 'warn' as const },
    { key: 'current', value: '觀測優先', tone: 'warn' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
    { key: 'enforcement', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-low-friction-rollout-ladder-board">
      <div style={{ ...band, padding: 16, background: '#fffdf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #eee9dd', borderRadius: 8, padding: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413', ...textWrap }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(152px, 1fr))', gap: 9 }}>
              {iwooosLowFrictionRolloutPhases.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      alignContent: 'start',
                      gap: 7,
                      minHeight: 136,
                      border: '0.5px solid #e7e1d3',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 12,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#87867f' }}>{t('phaseLabel')} {item.phase}</span>
                      <Icon size={17} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 19, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.15 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 13, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f7f5ee', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <Lock size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosLowFrictionRolloutBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e0ddd4',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4f4c45',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSLowFrictionNextActionsBoard() {
  const t = useTranslations('iwooos.lowFrictionNextActions')
  const summaryItems = [
    { key: 'allowed', value: '2', tone: 'warn' as const },
    { key: 'prep', value: '1', tone: 'steady' as const },
    { key: 'blocked', value: '4', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-low-friction-next-actions-board">
      <div style={{ ...band, padding: 16, background: '#f9fbf7' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5f6860', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #e1e9dd', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#7c847c' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#5f6860', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(176px, 1fr))', gap: 10 }}>
              {iwooosLowFrictionNextActionItems.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 150,
                      border: '0.5px solid #dce7da',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.label}</span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5f6860', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                    <span style={{ color: '#7c847c', fontSize: 11, lineHeight: 1.35, ...textWrap }}>
                      {t(`items.${item.key}.gate` as never)}
                    </span>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eef4ec', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <AlertTriangle size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5f6860', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosLowFrictionNextActionBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d5dfd2',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#455044',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProgressMovementSignalsBoard() {
  const t = useTranslations('iwooos.progressMovementSignals')
  const summaryItems = [
    { key: 'headline', value: '64%', tone: 'warn' as const },
    { key: 'signals', value: '6', tone: 'warn' as const },
    { key: 'passed', value: '2', tone: 'steady' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-progress-movement-signals-board">
      <div style={{ ...band, padding: 16, background: '#fffaf4' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6a6258', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #ece0d1', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#867b6e' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6a6258', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(172px, 1fr))', gap: 10 }}>
              {iwooosProgressMovementSignals.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 150,
                      border: '0.5px solid #eadcc8',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.state}</span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 19, fontWeight: 700, color: '#141413', lineHeight: 1.1 }}>
                      {item.value}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6a6258', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f8efe5', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <Activity size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6a6258', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProgressMovementSignalBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e6d7c6',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#50483e',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSConcreteSecurityWorkMapBoard() {
  const t = useTranslations('iwooos.concreteSecurityWorkMap')
  const summaryItems = [
    { key: 'streams', value: '6', tone: 'warn' as const },
    { key: 'visible', value: '6', tone: 'steady' as const },
    { key: 'realGate', value: 'S4.9', tone: 'warn' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-concrete-security-work-map-board">
      <div style={{ ...band, padding: 16, background: '#f6faf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 312px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#596761', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #d8e5df', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#687872' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#596761', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(196px, 1fr))', gap: 10 }}>
              {iwooosConcreteSecurityWorkStreams.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 168,
                      border: '0.5px solid #d8e5df',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('workLabel')} {item.work}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#596761', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                    <span style={{ color: '#6b786f', fontSize: 11, lineHeight: 1.4, ...textWrap }}>
                      {t(`items.${item.key}.evidence` as never)}
                    </span>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#edf5f1', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ClipboardCheck size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#596761', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosConcreteSecurityWorkMapBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d2e1db',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#43544c',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSConcreteSecurityDeliveryChecklistBoard() {
  const t = useTranslations('iwooos.concreteSecurityDeliveryChecklist')
  const summaryItems = [
    { key: 'items', value: '6', tone: 'warn' as const },
    { key: 'framework', value: '只讀', tone: 'steady' as const },
    { key: 'blocked', value: 'S4.9', tone: 'warn' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-concrete-security-delivery-checklist-board">
      <div style={{ ...band, padding: 16, background: '#f7f8f3' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 312px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#63695a', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #dfe4d6', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#737968' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#63695a', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              {iwooosConcreteSecurityDeliveryChecklist.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gridTemplateColumns: 'minmax(74px, 0.26fr) minmax(0, 1fr)',
                      gap: 12,
                      border: '0.5px solid #dfe4d6',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'grid', alignContent: 'start', gap: 8 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                        <Icon size={17} color={toneColors[item.tone]} />
                        <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                          {t('deliverableLabel')} {item.deliverable}
                        </span>
                      </div>
                      <span style={{ color: toneColors[item.tone], fontSize: 13, fontWeight: 700, lineHeight: 1.25 }}>
                        {item.state}
                      </span>
                    </div>
                    <div style={{ display: 'grid', gap: 8 }}>
                      <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                        {t(`items.${item.key}.title` as never)}
                      </h3>
                      <p style={{ fontSize: 11, color: '#596052', lineHeight: 1.45, margin: 0, ...textWrap }}>
                        <strong>{t('deliveredLabel')}</strong>：{t(`items.${item.key}.delivered` as never)}
                      </p>
                      <p style={{ fontSize: 11, color: '#596052', lineHeight: 1.45, margin: 0, ...textWrap }}>
                        <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                      </p>
                      <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: 0, ...textWrap }}>
                        <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                      </p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eff2e9', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <CheckCircle2 size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#63695a', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosConcreteSecurityDeliveryChecklistBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d7decd',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4d5545',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSConcreteSecurityBlockerResolutionBoard() {
  const t = useTranslations('iwooos.concreteSecurityBlockerResolution')
  const summaryItems = [
    { key: 'blockers', value: '6', tone: 'warn' as const },
    { key: 'resolved', value: '0', tone: 'locked' as const },
    { key: 'first', value: 'S4.9', tone: 'warn' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-concrete-security-blocker-resolution-board">
      <div style={{ ...band, padding: 16, background: '#fbf7f0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 312px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6d6255', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #e7dacb', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#7a6f63' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6d6255', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(218px, 1fr))', gap: 10 }}>
              {iwooosConcreteSecurityBlockerResolutionItems.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 178,
                      border: '0.5px solid #e7dacb',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('blockerLabel')} {item.blocker}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#62584d', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('whyLabel')}</strong>：{t(`items.${item.key}.why` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('unlockLabel')}</strong>：{t(`items.${item.key}.unlock` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f1eadf', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <AlertTriangle size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6d6255', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosConcreteSecurityBlockerResolutionBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e1d2c0',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#584c40',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSThreeAxisProductProgressBoard() {
  const t = useTranslations('iwooos.threeAxisProductProgress')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-three-axis-product-progress-board">
      <div style={{ ...band, padding: 16, background: '#f4fbf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#53645b', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosThreeAxisProductProgressSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #cfe2d8', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#65766d' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#53645b', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(226px, 1fr))', gap: 10 }}>
              {iwooosThreeAxisProductProgressItems.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 210,
                      border: '0.5px solid #cfe2d8',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('scopeLabel')} {item.scope}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#53645b', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('currentLabel')}</strong>：{t(`items.${item.key}.current` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#6a5849', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('boundaryLabel')}</strong>：{t(`items.${item.key}.boundary` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#e9f4ee', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ShieldCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#53645b', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosThreeAxisProductProgressBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #cfe2d8',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#3d584a',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductRolloutWaveLedgerBoard() {
  const t = useTranslations('iwooos.productRolloutWaveLedger')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-rollout-wave-ledger-board">
      <div style={{ ...band, padding: 16, background: '#f7f8fc' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#566173', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductRolloutWaveLedgerSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #dbe2ef', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#667086' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#566173', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(236px, 1fr))', gap: 10 }}>
              {iwooosProductRolloutWaveLedgerItems.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 236,
                      border: '0.5px solid #dbe2ef',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('waveLabel')} {item.wave}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#566173', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('allowedLabel')}</strong>：{t(`items.${item.key}.allowed` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#3f5f53', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('beforeRuntimeLabel')}</strong>：{t(`items.${item.key}.beforeRuntime` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('forbiddenLabel')}</strong>：{t(`items.${item.key}.forbidden` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eef2f8', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#566173', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductRolloutWaveLedgerBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #dbe2ef',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#435066',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductRolloutAcceptanceGatesBoard() {
  const t = useTranslations('iwooos.productRolloutAcceptanceGates')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-rollout-acceptance-gates-board">
      <div style={{ ...band, padding: 16, background: '#f5f8f4' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5d6a5b', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductRolloutAcceptanceGatesSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #dbe7d7', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#6a7766' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#5d6a5b', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(236px, 1fr))', gap: 10 }}>
              {iwooosProductRolloutAcceptanceGates.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 232,
                      border: '0.5px solid #dbe7d7',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('gateLabel')} {item.gate}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5d6a5b', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('requiredEvidenceLabel')}</strong>：{t(`items.${item.key}.requiredEvidence` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#3f5f53', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('acceptanceSignalLabel')}</strong>：{t(`items.${item.key}.acceptanceSignal` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('stillClosedLabel')}</strong>：{t(`items.${item.key}.stillClosed` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#edf5eb', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ClipboardCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5d6a5b', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductRolloutAcceptanceGateBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #dbe7d7',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#455842',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductRolloutAcceptanceOutcomesBoard() {
  const t = useTranslations('iwooos.productRolloutAcceptanceOutcomes')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-rollout-acceptance-outcomes-board">
      <div style={{ ...band, padding: 16, background: '#fbf7f2' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6b6259', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductRolloutAcceptanceOutcomeSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #eadbcf', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#796d63' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#6b6259', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(226px, 1fr))', gap: 10 }}>
              {iwooosProductRolloutAcceptanceOutcomes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #eadbcf',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('laneLabel')} {item.lane}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6b6259', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('whyLabel')}</strong>：{t(`items.${item.key}.why` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f4ede7', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6b6259', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductRolloutAcceptanceOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #eadbcf',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#5b4f46',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringMapBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringMap')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-map-board">
      <div style={{ ...band, padding: 16, background: '#f1f6f8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#54656f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #d7e3e8', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#62737c' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#54656f', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(236px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringChannels.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 232,
                      border: '0.5px solid #d7e3e8',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('channelLabel')} {item.channel}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#54656f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('evidenceLabel')}</strong>：{t(`items.${item.key}.evidence` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#3f5f53', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('handoffLabel')}</strong>：{t(`items.${item.key}.handoff` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#e7f0f3', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <SearchCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#54656f', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d7e3e8',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#485d67',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflight')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-board">
      <div style={{ ...band, padding: 16, background: '#f6f4fb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#605b6e', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #e0dcea', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#726b80' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#605b6e', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(236px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightChecks.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 236,
                      border: '0.5px solid #e0dcea',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('checkLabel')} {item.check}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#605b6e', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('checkPointLabel')}</strong>：{t(`items.${item.key}.checkPoint` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#3f5f53', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('passSignalLabel')}</strong>：{t(`items.${item.key}.passSignal` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#6b5945', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('failRouteLabel')}</strong>：{t(`items.${item.key}.failRoute` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('stillClosedLabel')}</strong>：{t(`items.${item.key}.stillClosed` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eeeaf6', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <SearchCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#605b6e', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #e0dcea',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#514b60',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightOutcomesBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightOutcomes')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-outcomes-board">
      <div style={{ ...band, padding: 16, background: '#f8f3ef' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#6b5f57', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightOutcomeSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #eadbd1', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#7a6e65' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#6b5f57', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(226px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightOutcomes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 230,
                      border: '0.5px solid #eadbd1',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('outcomeLabel')} {item.lane}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#6b5f57', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('whyLabel')}</strong>：{t(`items.${item.key}.why` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f1e9e2', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#6b5f57', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #eadbd1',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#5e5148',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRecoveryLedgerBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRecoveryLedger')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-recovery-ledger-board">
      <div style={{ ...band, padding: 16, background: '#f6f8f1' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5d6658', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRecoverySummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #dde8d4', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#66705f' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#5d6658', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(242px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRecoveryQueues.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 238,
                      border: '0.5px solid #dde8d4',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('queueLabel')} {item.queue}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5d6658', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('ownerLabel')}</strong>：{t(`items.${item.key}.owner` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('requiredLabel')}</strong>：{t(`items.${item.key}.required` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#52606d', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('handoffLabel')}</strong>：{t(`items.${item.key}.handoff` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eef5e8', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ClipboardCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5d6658', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRecoveryBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #dde8d4',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4f5f52',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryGatesBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryGates')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-gates-board">
      <div style={{ ...band, padding: 16, background: '#f4f7fb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5b6572', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryGateSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #d8e3ef', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#647185' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#5b6572', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryGates.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #d8e3ef',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('gateLabel')} {item.gate}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5b6572', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('readyLabel')}</strong>：{t(`items.${item.key}.ready` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('retryLabel')}</strong>：{t(`items.${item.key}.retry` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eaf1f8', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <SearchCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5b6572', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryGateBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d8e3ef',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#52606d',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryOutcomesBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryOutcomes')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-outcomes-board">
      <div style={{ ...band, padding: 16, background: '#f6f4ef' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#665f55', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryOutcomeSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #e4ddd1', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#71685d' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#665f55', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryOutcomes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #e4ddd1',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('outcomeLabel')} {item.lane}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#665f55', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('decisionLabel')}</strong>：{t(`items.${item.key}.decision` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#ede7dc', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ClipboardCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#665f55', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #ddd3c6',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#625a50',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryReviewCandidateBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryReviewCandidate')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-review-candidate-board">
      <div style={{ ...band, padding: 16, background: '#f1f7f5' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#58675f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewCandidateSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #d7e7df', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#64736b' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#58675f', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewCandidatePackets.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #d7e7df',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('packetLabel')} {item.packet}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#58675f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('requiredLabel')}</strong>：{t(`items.${item.key}.required` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('handoffLabel')}</strong>：{t(`items.${item.key}.handoff` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#e5f0eb', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#58675f', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewCandidateBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d5e4dc',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#52615a',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryReviewCandidatePreflight')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-review-candidate-preflight-board">
      <div style={{ ...band, padding: 16, background: '#f5f7f2' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#626a5b', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #dfe7d7', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#6d7566' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#626a5b', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightChecks.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #dfe7d7',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('checkLabel')} {item.check}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#626a5b', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('requirementLabel')}</strong>：{t(`items.${item.key}.requirement` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('passLabel')}</strong>：{t(`items.${item.key}.pass` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#805b4d', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('failLabel')}</strong>：{t(`items.${item.key}.fail` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eaf0e4', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <SearchCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#626a5b', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #dce6d2',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#5b6354',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightOutcomesBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryReviewCandidatePreflightOutcomes')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-review-candidate-preflight-outcomes-board">
      <div style={{ ...band, padding: 16, background: '#f7f5f1' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#665f58', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightOutcomeSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #e5ddd2', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#746b60' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#665f58', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightOutcomes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #e5ddd2',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('outcomeLabel')} {item.lane}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#665f58', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('decisionLabel')}</strong>：{t(`items.${item.key}.decision` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('nextLabel')}</strong>：{t(`items.${item.key}.next` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#ede7dd', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#665f58', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #ded3c6',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#625a51',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightRecoveryLedgerBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryReviewCandidatePreflightRecoveryLedger')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-review-candidate-preflight-recovery-ledger-board">
      <div style={{ ...band, padding: 16, background: '#f5f7f4' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5f675c', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoverySummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #dde6da', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#697363' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#5f675c', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryQueues.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 238,
                      border: '0.5px solid #dde6da',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('queueLabel')} {item.queue}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5f675c', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('ownerLabel')}</strong>：{t(`items.${item.key}.owner` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#665f58', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('requiredLabel')}</strong>：{t(`items.${item.key}.required` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('recoveryLabel')}</strong>：{t(`items.${item.key}.recovery` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#e8efe4', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <FileWarning size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5f675c', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d9e4d4',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#596457',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightRecoveryRetryGatesBoard() {
  const t = useTranslations('iwooos.productEvidenceWiringPreflightRetryReviewCandidatePreflightRecoveryRetryGates')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-product-evidence-wiring-preflight-retry-review-candidate-preflight-recovery-retry-gates-board">
      <div style={{ ...band, padding: 16, background: '#f4f7fb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 318px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5d6570', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))', gap: 8, marginBottom: 14 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryRetryGateSummary.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #d7e3ee', borderRadius: 8, padding: 12, background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#657282' }}>{t(`summary.${item.key}.label` as never)}</span>
                      <Icon size={16} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                      {item.value}
                    </div>
                    <p style={{ fontSize: 11, color: '#5d6570', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                      {t(`summary.${item.key}.detail` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(248px, 1fr))', gap: 10 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryRetryGates.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 226,
                      border: '0.5px solid #d7e3ee',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('gateLabel')} {item.gate}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5d6570', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('readyLabel')}</strong>：{t(`items.${item.key}.ready` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#4f5f52', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('retryLabel')}</strong>：{t(`items.${item.key}.retry` as never)}
                    </p>
                    <p style={{ fontSize: 11, color: '#694f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                      <strong>{t('blockedLabel')}</strong>：{t(`items.${item.key}.blocked` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#e8f0f7', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <SearchCheck size={16} color={toneColors.steady} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5d6570', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosProductEvidenceWiringPreflightRetryReviewPreflightRecoveryRetryGateBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d5e2ed',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#566270',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstProgressUnlockPathBoard() {
  const t = useTranslations('iwooos.firstProgressUnlockPath')
  const summaryItems = [
    { key: 'focus', value: 'S4.9', tone: 'warn' as const },
    { key: 'steps', value: '5', tone: 'warn' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
    { key: 'headline', value: '未開', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      id="iwooos-first-progress-unlock-path-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
      data-testid="iwooos-first-progress-unlock-path-board"
    >
      <div style={{ ...band, padding: 16, background: '#f7fbfa', borderColor: '#cfe2d8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
            gap: 14,
            alignItems: 'start',
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#405f4f', fontSize: 12, fontWeight: 700 }}>
              <ListChecks size={17} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#405f4f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))', gap: 8 }}>
            {summaryItems.map(item => (
              <div key={item.key} style={{ border: '0.5px solid #cfe2d8', borderRadius: 8, padding: 11, background: '#fff' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ fontSize: 11, color: '#607466' }}>{t(`summary.${item.key}.label` as never)}</span>
                  <ToneDot tone={item.tone} />
                </div>
                <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: toneColors[item.tone] }}>
                  {item.value}
                </div>
                <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: '7px 0 0', ...textWrap }}>
                  {t(`summary.${item.key}.detail` as never)}
                </p>
              </div>
            ))}
          </div>
        </div>

        <div aria-hidden style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, margin: '14px 0 10px' }}>
          {iwooosFirstProgressUnlockPathSteps.map(item => (
            <span
              key={item.key}
              style={{
                height: 5,
                borderRadius: 999,
                background: toneColors[item.tone],
                opacity: item.tone === 'locked' ? 0.38 : 0.86,
              }}
            />
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 154px), 1fr))', gap: 9 }}>
          {iwooosFirstProgressUnlockPathSteps.map(item => {
            const Icon = item.icon
            return (
              <div
                key={item.key}
                style={{
                  display: 'grid',
                  gap: 7,
                  minHeight: 136,
                  border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                  borderRadius: 8,
                  background: '#fff',
                  padding: 12,
                  color: '#141413',
                  ...textWrap,
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                    {t('stepLabel')} {item.step}
                  </span>
                  <Icon size={17} color={toneColors[item.tone]} />
                </div>
                <div style={{ fontSize: 14, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                  {item.state}
                </div>
                <h3 style={{ fontSize: 13, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                  {t(`items.${item.key}.title` as never)}
                </h3>
                <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: 0, ...textWrap }}>
                  {t(`items.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-first-progress-unlock-path-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #cfe2d8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#405f4f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {iwooosFirstProgressUnlockPathBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #d9eadf',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#405f4f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7fbfa',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSProgressIntegrityRibbon() {
  const t = useTranslations('iwooos.progressIntegrityRibbon')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const ribbonBodyRef = useRef<HTMLDivElement>(null)
  const [isCompactRibbon, setIsCompactRibbon] = useState(false)

  useEffect(() => {
    const node = ribbonBodyRef.current
    if (!node) return

    const updateLayout = () => setIsCompactRibbon(node.getBoundingClientRect().width < 520)
    updateLayout()

    const observer = new ResizeObserver(updateLayout)
    observer.observe(node)
    return () => observer.disconnect()
  }, [])
  const ringSize = isCompactRibbon ? 40 : 50
  const ringInnerSize = isCompactRibbon ? 30 : 38

  return (
    <section
      data-testid="iwooos-progress-integrity-ribbon"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: isCompactRibbon ? 10 : 14, background: '#f8fbfc', borderColor: '#cedbe4' }}>
        <div
          ref={ribbonBodyRef}
          style={{
            display: 'grid',
            gridTemplateColumns: isCompactRibbon ? 'minmax(0, 1fr)' : 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))',
            gap: isCompactRibbon ? 8 : 10,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              border: '0.5px solid #d8e3ea',
              borderRadius: 8,
              background: '#fff',
              padding: isCompactRibbon ? 10 : 13,
              display: 'grid',
              alignContent: 'center',
              gap: 7,
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#405a6f', fontSize: 12, fontWeight: 700 }}>
              <Activity size={16} color="#527f9f" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: isCompactRibbon ? 15 : 17, lineHeight: 1.25, margin: 0, color: '#141413', ...textWrap }}>
              {t('title')}
            </h2>
            <p style={{ fontSize: isCompactRibbon ? 11 : 12, lineHeight: 1.55, color: '#5f6f79', margin: 0, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            data-testid="iwooos-progress-integrity-ribbon-signals"
            style={{
              display: 'grid',
              gridTemplateColumns: isCompactRibbon ? 'minmax(0, 1fr)' : 'repeat(auto-fit, minmax(min(100%, 142px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {progressIntegritySignals.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  data-testid={`iwooos-progress-integrity-ribbon-signal-${item.key}`}
                  style={{
                    border: `0.5px solid ${item.tone === 'steady' ? '#cddfd5' : item.tone === 'warn' ? '#e2cbb4' : '#d9d6ce'}`,
                    borderRadius: 8,
                    background: '#fff',
                    padding: isCompactRibbon ? 9 : 11,
                    minHeight: isCompactRibbon ? 118 : 132,
                    display: 'grid',
                    alignContent: 'start',
                    gap: isCompactRibbon ? 6 : 8,
                    minWidth: 0,
                  }}
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: isCompactRibbon ? 'flex-start' : 'space-between',
                      gap: 8,
                    }}
                  >
                    <Icon size={16} color={toneColors[item.tone]} />
                    <div
                      aria-hidden
                      style={{
                        width: ringSize,
                        height: ringSize,
                        borderRadius: 999,
                        background: `conic-gradient(${toneColors[item.tone]} ${item.percent * 3.6}deg, #ece8df 0deg)`,
                        display: 'grid',
                        placeItems: 'center',
                        flexShrink: 0,
                      }}
                    >
                      <div
                        style={{
                          width: ringInnerSize,
                          height: ringInnerSize,
                          borderRadius: 999,
                          background: '#fff',
                          display: 'grid',
                          placeItems: 'center',
                          color: toneColors[item.tone],
                          fontSize: isCompactRibbon ? 10 : 12,
                          fontWeight: 800,
                          lineHeight: 1,
                        }}
                      >
                        {item.value}
                      </div>
                    </div>
                  </div>
                  <h3 style={{ fontSize: 13, lineHeight: 1.25, margin: 0, color: '#141413', ...textWrap }}>
                    {t(`signals.${item.key}.title` as never)}
                  </h3>
                  <p style={{ fontSize: 11, lineHeight: 1.45, margin: 0, color: '#5f6f79', ...textWrap }}>
                    {t(`signals.${item.key}.body` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-progress-integrity-ribbon-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #d8e3ea',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#405a6f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#405a6f', lineHeight: 1.45, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {progressIntegrityRibbonBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e2e9ef',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#405a6f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f8fbfc',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSExecutiveSnapshotBoard() {
  const t = useTranslations('iwooos.executiveSnapshot')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-executive-snapshot-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#f8fbfc', borderColor: '#cedbe4' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            data-testid="iwooos-executive-snapshot-overview"
            style={{
              border: '0.5px solid #182431',
              borderRadius: 8,
              background: 'linear-gradient(135deg, #101720 0%, #172331 55%, #213343 100%)',
              color: '#fff',
              padding: 13,
              minWidth: 0,
              display: 'grid',
              gap: 10,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#c6d4df', fontSize: 12, fontWeight: 700 }}>
              <Activity size={16} color="#73a5c8" />
              {t('eyebrow')}
            </div>
            <div style={{ display: 'grid', gap: 5 }}>
              <h2 style={{ fontSize: 18, lineHeight: 1.2, margin: 0, color: '#fff' }}>{t('title')}</h2>
              <p style={{ fontSize: 12, lineHeight: 1.55, color: '#c6d4df', margin: 0, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>

            <div
              data-testid="iwooos-executive-snapshot-axes-grid"
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 116px), 1fr))',
                gap: 7,
              }}
            >
              {iwooosExecutiveSnapshotAxes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    data-testid={`iwooos-executive-snapshot-axis-${item.key}`}
                    style={{ border: '0.5px solid rgba(255,255,255,0.18)', borderRadius: 8, padding: 9, background: 'rgba(255,255,255,0.08)', minWidth: 0 }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                      <Icon size={14} color={toneColors[item.tone]} />
                      <span style={{ color: item.tone === 'locked' ? '#d7d2c5' : toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.value}</span>
                    </div>
                    <div style={{ marginTop: 7, fontSize: 10.5, lineHeight: 1.25, color: '#e8f0f4', fontWeight: 700, ...textWrap }}>
                      {t(`axes.${item.key}.label` as never)}
                    </div>
                    <div style={{ marginTop: 7, height: 6, borderRadius: 8, background: 'rgba(255,255,255,0.18)', overflow: 'hidden' }}>
                      <div style={{ width: `${item.percent}%`, height: '100%', borderRadius: 8, background: toneColors[item.tone] }} />
                    </div>
                  </div>
                )
              })}
            </div>
          </div>

          <div
            data-testid="iwooos-executive-snapshot-cards-grid"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 146px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {iwooosExecutiveSnapshotCards.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  data-testid={`iwooos-executive-snapshot-card-${item.key}`}
                  style={{
                    border: `0.5px solid ${item.tone === 'steady' ? '#cddfd5' : item.tone === 'warn' ? '#e2cbb4' : '#d9d6ce'}`,
                    borderRadius: 8,
                    background: '#fff',
                    padding: 11,
                    minWidth: 0,
                    minHeight: 126,
                    display: 'grid',
                    alignContent: 'start',
                    gap: 7,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <Icon size={16} color={toneColors[item.tone]} />
                    <span style={{ fontSize: 15, color: toneColors[item.tone], fontWeight: 700 }}>{item.metric}</span>
                  </div>
                  <div style={{ fontSize: 13, lineHeight: 1.25, color: '#141413', fontWeight: 700, ...textWrap }}>
                    {t(`cards.${item.key}.title` as never)}
                  </div>
                  <div style={{ fontSize: 11, lineHeight: 1.45, color: '#5f6f79', ...textWrap }}>
                    {t(`cards.${item.key}.body` as never)}
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-executive-snapshot-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #d8e3ea',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#405a6f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#405a6f', lineHeight: 1.45, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {iwooosExecutiveSnapshotBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e2e9ef',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#405a6f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f8fbfc',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSFocusDeckBoard() {
  const t = useTranslations('iwooos.focusDeck')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const deckBodyRef = useRef<HTMLDivElement>(null)
  const [isCompactDeck, setIsCompactDeck] = useState(false)

  useEffect(() => {
    const node = deckBodyRef.current
    if (!node) return

    const updateLayout = () => setIsCompactDeck(node.getBoundingClientRect().width < 700)
    updateLayout()

    const observer = new ResizeObserver(updateLayout)
    observer.observe(node)
    return () => observer.disconnect()
  }, [])

  return (
    <section
      data-testid="iwooos-focus-deck-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#fffdf8', borderColor: '#ded8c8' }}>
        <div
          ref={deckBodyRef}
          style={{
            display: 'grid',
            gridTemplateColumns: isCompactDeck ? 'minmax(0, 1fr)' : 'minmax(0, 0.88fr) minmax(0, 1.9fr)',
            gap: 12,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              border: '0.5px solid #e7e1d3',
              borderRadius: 8,
              padding: 13,
              background: '#141413',
              color: '#fffdf8',
              display: 'grid',
              alignContent: 'start',
              gap: 7,
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#d7d2c5', fontSize: 12, fontWeight: 700 }}>
              <SearchCheck size={16} color="#d97757" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.2, margin: 0, color: '#fffdf8' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#d7d2c5', margin: 0, ...textWrap }}>
              {t('subtitle')}
            </p>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: isCompactDeck ? 'repeat(auto-fit, minmax(min(100%, 86px), 1fr))' : 'repeat(3, minmax(0, 1fr))',
                gap: 7,
                marginTop: 4,
              }}
            >
              {['items', 'runtime', 'mode'].map(key => (
                <div
                  key={key}
                  style={{
                    border: '0.5px solid rgba(255,253,248,0.16)',
                    borderRadius: 8,
                    padding: 8,
                    minHeight: 58,
                    background: 'rgba(255,253,248,0.06)',
                    ...textWrap,
                  }}
                >
                  <div style={{ fontSize: 10, color: '#c8c1b3' }}>{t(`summary.${key}.label` as never)}</div>
                  <div style={{ fontSize: 15, fontWeight: 700, marginTop: 5, color: key === 'runtime' ? '#d7d2c5' : '#fffdf8' }}>
                    {t(`summary.${key}.value` as never)}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 158px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {iwooosFocusDeckItems.map(item => {
              const Icon = item.icon
              return (
                <a
                  key={item.key}
                  href={item.href}
                  data-testid={`iwooos-focus-deck-link-${item.key}`}
                  style={{
                    border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                    borderRadius: 8,
                    background: '#fff',
                    minHeight: 128,
                    padding: 11,
                    color: '#141413',
                    textDecoration: 'none',
                    display: 'grid',
                    alignContent: 'start',
                    gap: 7,
                    ...textWrap,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 10, color: '#87867f' }}>{t(`items.${item.key}.label` as never)}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 18, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1 }}>
                    {item.metric}
                  </div>
                  <h3 style={{ fontSize: 13, lineHeight: 1.25, margin: 0, color: '#141413' }}>
                    {t(`items.${item.key}.title` as never)}
                  </h3>
                  <p style={{ fontSize: 11, lineHeight: 1.45, margin: 0, color: '#6f6d66', ...textWrap }}>
                    {t(`items.${item.key}.body` as never)}
                  </p>
                </a>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-focus-deck-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #e7e1d3',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#5c543f' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {iwooosFocusDeckBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #ede4d4',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#5c543f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfbf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSFirstScreenDepthMapBoard() {
  const t = useTranslations('iwooos.firstScreenDepthMap')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-first-screen-depth-map-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#fbfbf7', borderColor: '#ded8c8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 250px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              border: '0.5px solid #d9d2c4',
              borderRadius: 8,
              background: '#fff',
              padding: 13,
              display: 'grid',
              alignContent: 'start',
              gap: 7,
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#5c543f', fontSize: 12, fontWeight: 700 }}>
              <Route size={16} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: 0, color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            data-testid="iwooos-first-screen-depth-map-layers"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 150px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {firstScreenDepthLayers.map((item, index) => {
              const Icon = item.icon
              const content = (
                <>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <Icon size={16} color={toneColors[item.tone]} />
                    <span style={{ color: toneColors[item.tone], fontSize: 17, fontWeight: 700 }}>{item.value}</span>
                  </div>
                  <div style={{ marginTop: 8, fontSize: 10.5, color: '#8a867c', fontWeight: 700 }}>
                    {String(index + 1).padStart(2, '0')}
                  </div>
                  <h3 style={{ margin: '4px 0 0', fontSize: 13, lineHeight: 1.25, color: '#141413', ...textWrap }}>
                    {t(`layers.${item.key}.title` as never)}
                  </h3>
                  <p style={{ margin: '6px 0 0', fontSize: 11, lineHeight: 1.45, color: '#6f6d66', ...textWrap }}>
                    {t(`layers.${item.key}.body` as never)}
                  </p>
                </>
              )
              const style = {
                border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                borderRadius: 8,
                background: '#fff',
                padding: 11,
                minHeight: 126,
                minWidth: 0,
                color: '#141413',
                textDecoration: 'none',
                display: 'block',
              }

              return item.href ? (
                <a key={item.key} href={item.href} data-testid={`iwooos-first-screen-depth-map-layer-${item.key}`} style={style}>
                  {content}
                </a>
              ) : (
                <div key={item.key} data-testid={`iwooos-first-screen-depth-map-layer-${item.key}`} style={style}>
                  {content}
                </div>
              )
            })}
          </div>
        </div>

        <div
          data-testid="iwooos-first-screen-depth-map-flow"
          style={{
            marginTop: 10,
            display: 'grid',
            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            gap: 6,
          }}
        >
          {firstScreenDepthLayers.map(item => (
            <div
              key={item.key}
              style={{
                height: 7,
                borderRadius: 8,
                background: toneColors[item.tone],
                opacity: item.key === 'runtime' ? 0.38 : 0.86,
              }}
            />
          ))}
        </div>

        <details
          data-testid="iwooos-first-screen-depth-map-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #e7e1d3',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#5c543f' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {firstScreenDepthBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #ede4d4',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#5c543f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfbf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSProgressEvidenceRailBoard() {
  const t = useTranslations('iwooos.progressEvidenceRail')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-progress-evidence-rail-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#fffaf2', borderColor: '#e6d6bd' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              display: 'grid',
              alignContent: 'center',
              gap: 7,
              minWidth: 0,
              border: '0.5px solid #eadcc5',
              borderRadius: 8,
              background: '#fff',
              padding: 12,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#75512f', fontSize: 12, fontWeight: 700 }}>
              <Activity size={16} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: 0, color: '#141413', ...textWrap }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f624c', margin: 0, ...textWrap }}>{t('subtitle')}</p>
          </div>

          <div
            data-testid="iwooos-progress-evidence-rail-items"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 132px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {progressEvidenceRailItems.map((item, index) => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  data-testid={`iwooos-progress-evidence-rail-item-${item.key}`}
                  style={{
                    border: `0.5px solid ${item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                    borderRadius: 8,
                    background: '#fff',
                    padding: 10,
                    minHeight: 112,
                    display: 'grid',
                    alignContent: 'space-between',
                    gap: 7,
                    minWidth: 0,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <Icon size={16} color={toneColors[item.tone]} />
                    <span style={{ color: toneColors[item.tone], fontSize: 18, fontWeight: 800 }}>{item.value}</span>
                  </div>
                  <div style={{ fontSize: 10.5, color: '#8a806f', fontWeight: 700 }}>
                    {String(index + 1).padStart(2, '0')}
                  </div>
                  <h3 style={{ margin: 0, fontSize: 12.5, lineHeight: 1.25, color: '#141413', ...textWrap }}>
                    {t(`items.${item.key}.title` as never)}
                  </h3>
                  <p style={{ margin: 0, fontSize: 10.5, lineHeight: 1.45, color: '#6f6d66', ...textWrap }}>
                    {t(`items.${item.key}.body` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-progress-evidence-rail-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #eadcc5',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#75512f' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {progressEvidenceRailBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #ede4d4',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#5c543f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfbf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSEvidenceUnlockQueueBoard() {
  const t = useTranslations('iwooos.evidenceUnlockQueue')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-evidence-unlock-queue-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#f8fbf8', borderColor: '#cfe2d8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 270px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              border: '0.5px solid #cfe2d8',
              borderRadius: 8,
              background: '#fff',
              padding: 12,
              display: 'grid',
              alignContent: 'center',
              gap: 7,
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#405f4f', fontSize: 12, fontWeight: 700 }}>
              <ListChecks size={16} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ margin: 0, fontSize: 17, lineHeight: 1.25, color: '#141413', ...textWrap }}>{t('title')}</h2>
            <p style={{ margin: 0, fontSize: 12, lineHeight: 1.55, color: '#405f4f', ...textWrap }}>{t('subtitle')}</p>
          </div>

          <div
            data-testid="iwooos-evidence-unlock-queue-items"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 170px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {evidenceUnlockQueueItems.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  data-testid={`iwooos-evidence-unlock-queue-item-${item.key}`}
                  style={{
                    border: `0.5px solid ${item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                    borderRadius: 8,
                    background: '#fff',
                    padding: 11,
                    minHeight: 124,
                    display: 'grid',
                    gap: 7,
                    minWidth: 0,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 800 }}>{item.gate}</span>
                    <Icon size={16} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ color: toneColors[item.tone], fontSize: 19, fontWeight: 800 }}>{item.value}</div>
                  <h3 style={{ margin: 0, fontSize: 13, lineHeight: 1.25, color: '#141413', ...textWrap }}>
                    {t(`items.${item.key}.title` as never)}
                  </h3>
                  <p style={{ margin: 0, fontSize: 10.8, lineHeight: 1.45, color: '#6f6d66', ...textWrap }}>
                    {t(`items.${item.key}.body` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-evidence-unlock-queue-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #dbe8df',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#405f4f' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {evidenceUnlockQueueBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e4ece5',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#405f4f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f8fbf8',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSS49RequestDraftPackageBoard() {
  const t = useTranslations('iwooos.s49RequestDraftPackage')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-s49-request-draft-package-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#fffdf8', borderColor: '#ead9bf' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))',
            gap: 10,
          }}
        >
          <div
            style={{
              border: '0.5px solid #ead9bf',
              borderRadius: 8,
              background: '#fff',
              padding: 13,
              minWidth: 0,
              display: 'grid',
              alignContent: 'center',
              alignSelf: 'start',
              gap: 8,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#8a4f1c', fontSize: 12, fontWeight: 800 }}>
              <ClipboardCheck size={16} color="#b65f1b" />
              {t('eyebrow')}
            </div>
            <h2 style={{ margin: 0, fontSize: 18, lineHeight: 1.25, color: '#141413', ...textWrap }}>{t('title')}</h2>
            <p style={{ margin: 0, fontSize: 12, lineHeight: 1.55, color: '#6f4f32', ...textWrap }}>{t('subtitle')}</p>
          </div>

          <div
            data-testid="iwooos-s49-request-draft-package-items"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 150px), 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {s49RequestDraftPackageItems.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  data-testid={`iwooos-s49-request-draft-package-item-${item.key}`}
                  style={{
                    border: '0.5px solid #e8c9ad',
                    borderRadius: 8,
                    background: '#fff',
                    padding: 10,
                    minHeight: 128,
                    display: 'grid',
                    gap: 7,
                    minWidth: 0,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 800 }}>{item.template}</span>
                    <Icon size={15} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 16, lineHeight: 1, fontWeight: 800, color: toneColors[item.tone] }}>{item.status}</div>
                  <h3 style={{ margin: 0, fontSize: 12.5, lineHeight: 1.25, color: '#141413', ...textWrap }}>
                    {t(`items.${item.key}.title` as never)}
                  </h3>
                  <p style={{ margin: 0, fontSize: 10.6, lineHeight: 1.45, color: '#6f6d66', ...textWrap }}>
                    {t(`items.${item.key}.body` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-s49-request-draft-package-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #ead9bf',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#6f4f32' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {s49RequestDraftPackageBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #f1e5d6',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#6f4f32',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fffdf8',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSS49RequestDraftDetailBoard() {
  const t = useTranslations('iwooos.s49RequestDraftDetail')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-s49-request-draft-detail-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#fbfbf6', borderColor: '#e4dfc8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
            gap: 10,
          }}
        >
          <div
            style={{
              border: '0.5px solid #e4dfc8',
              borderRadius: 8,
              background: '#fff',
              padding: 13,
              minWidth: 0,
              alignSelf: 'start',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#5b6f24', fontSize: 12, fontWeight: 800 }}>
              <ListChecks size={16} color="#788a25" />
              {t('eyebrow')}
            </div>
            <h2 style={{ margin: '8px 0 0', fontSize: 18, lineHeight: 1.25, color: '#141413', ...textWrap }}>{t('title')}</h2>
            <p style={{ margin: '8px 0 0', fontSize: 12, lineHeight: 1.55, color: '#5c6043', ...textWrap }}>{t('subtitle')}</p>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
                gap: 8,
                marginTop: 12,
              }}
            >
              {['rows', 'fields', 'gate'].map(metric => (
                <div
                  key={metric}
                  style={{
                    border: '0.5px solid #e4dfc8',
                    borderRadius: 8,
                    padding: 8,
                    minWidth: 0,
                    background: '#fbfbf6',
                  }}
                >
                  <div style={{ color: '#787b64', fontSize: 10, fontWeight: 700 }}>{t(`metrics.${metric}.label` as never)}</div>
                  <div style={{ color: metric === 'gate' ? '#b65f1b' : '#4f6f21', fontSize: 16, fontWeight: 900, marginTop: 3 }}>
                    {t(`metrics.${metric}.value` as never)}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div
            data-testid="iwooos-s49-request-draft-detail-items"
            style={{ display: 'grid', gap: 8, minWidth: 0 }}
          >
            {s49RequestDraftDetailItems.map(item => {
              const Icon = item.icon
              return (
                <article
                  key={item.key}
                  data-testid={`iwooos-s49-request-draft-detail-item-${item.key}`}
                  style={{
                    border: '0.5px solid #e4dfc8',
                    borderRadius: 8,
                    background: '#fff',
                    padding: 10,
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
                    gap: 10,
                    minWidth: 0,
                  }}
                >
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: toneColors[item.tone], fontSize: 11, fontWeight: 800 }}>
                      <Icon size={15} color={toneColors[item.tone]} />
                      <span>{item.template}</span>
                      <span>{t('draftStatus')}</span>
                    </div>
                    <h3 style={{ margin: '6px 0 0', fontSize: 13.5, lineHeight: 1.3, color: '#141413', ...textWrap }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ margin: '5px 0 0', fontSize: 11, lineHeight: 1.45, color: '#6f6d66', ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>

                  <div
                    style={{
                      display: 'grid',
                      gridTemplateColumns: 'repeat(auto-fit, minmax(64px, 1fr))',
                      gap: 6,
                      minWidth: 0,
                    }}
                  >
                    <div style={{ ...miniMetricStyle, background: '#fbfbf6' }}>
                      <span style={miniMetricLabelStyle}>{t('labels.required')}</span>
                      <strong style={miniMetricValueStyle}>{item.requiredCount}</strong>
                    </div>
                    <div style={{ ...miniMetricStyle, background: '#fff8f0' }}>
                      <span style={miniMetricLabelStyle}>{t('labels.forbidden')}</span>
                      <strong style={{ ...miniMetricValueStyle, color: '#b65f1b' }}>{item.forbiddenCount}</strong>
                    </div>
                    <div style={{ ...miniMetricStyle, background: '#f8fbf8' }}>
                      <span style={miniMetricLabelStyle}>{t('labels.evidence')}</span>
                      <strong style={{ ...miniMetricValueStyle, color: '#158047' }}>{t('labels.redactedRefs')}</strong>
                    </div>
                  </div>
                </article>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-s49-request-draft-detail-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #e4dfc8',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#5c6043' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {s49RequestDraftDetailBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #edf0db',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#5c6043',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfbf6',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSS49OwnerResponseIntakeBoard() {
  const t = useTranslations('iwooos.s49OwnerResponseIntake')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const BlockerIcon = s49OwnerResponseIntakeBlockerFocus.icon
  const metrics = [
    { key: 'received', value: '0 / 5', tone: 'warn' as const },
    { key: 'preflight', value: '0 / 6', tone: 'locked' as const },
    { key: 'accepted', value: '0 / 5', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]

  return (
    <section
      data-testid="iwooos-s49-owner-response-intake-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#f7faf7', borderColor: '#d9e5d8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
            gap: 12,
            alignItems: 'start',
          }}
        >
          <div
            style={{
              border: '0.5px solid #d9e5d8',
              borderRadius: 8,
              background: '#fff',
              padding: 13,
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#316850', fontSize: 12, fontWeight: 800 }}>
              <ClipboardCheck size={16} color="#316850" />
              {t('eyebrow')}
            </div>
            <h2 style={{ margin: '8px 0 0', fontSize: 18, lineHeight: 1.25, color: '#141413', ...textWrap }}>{t('title')}</h2>
            <p style={{ margin: '8px 0 0', fontSize: 12, lineHeight: 1.55, color: '#54645a', ...textWrap }}>{t('subtitle')}</p>
            <div
              data-testid="iwooos-s49-owner-response-intake-metrics"
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(96px, 1fr))',
                gap: 8,
                marginTop: 12,
              }}
            >
              {metrics.map(metric => (
                <div
                  key={metric.key}
                  style={{
                    border: '0.5px solid #d9e5d8',
                    borderRadius: 8,
                    padding: 9,
                    minWidth: 0,
                    background: metric.tone === 'warn' ? '#fffdf8' : '#f7faf7',
                  }}
                >
                  <div style={{ color: '#6f766d', fontSize: 10, fontWeight: 800, lineHeight: 1.25, ...textWrap }}>
                    {t(`metrics.${metric.key}.label` as never)}
                  </div>
                  <div style={{ color: toneColors[metric.tone], fontSize: 17, fontWeight: 900, lineHeight: 1, marginTop: 6 }}>
                    {metric.value}
                  </div>
                </div>
              ))}
            </div>
            <div
              data-testid="iwooos-s49-owner-response-intake-blocker-focus"
              style={{
                marginTop: 10,
                border: '0.5px solid #e0d7bd',
                borderRadius: 8,
                background: '#fffaf0',
                padding: 10,
                display: 'grid',
                gap: 8,
                minWidth: 0,
              }}
            >
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'auto minmax(0, 1fr) auto',
                  alignItems: 'center',
                  gap: 8,
                  minWidth: 0,
                }}
              >
                <BlockerIcon size={15} color={toneColors[s49OwnerResponseIntakeBlockerFocus.tone]} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ color: '#141413', fontSize: 12, fontWeight: 900, lineHeight: 1.25, ...textWrap }}>
                    {t('blockerFocus.title')}
                  </div>
                  <div style={{ color: '#667269', fontSize: 10.5, lineHeight: 1.35, marginTop: 2, ...textWrap }}>
                    {t('blockerFocus.body')}
                  </div>
                </div>
                <div style={{ color: '#9d6d15', fontSize: 11, fontWeight: 900, textAlign: 'right', lineHeight: 1.15 }}>
                  <div>{s49OwnerResponseIntakeBlockerFocus.gate}</div>
                  <div style={{ marginTop: 3 }}>{s49OwnerResponseIntakeBlockerFocus.value}</div>
                </div>
              </div>
              <div
                data-testid="iwooos-s49-owner-response-intake-completion-rail"
                style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 5 }}
              >
                {s49OwnerResponseIntakeNextGates.map(item => (
                  <div
                    key={item.key}
                    aria-label={item.gate}
                    style={{
                      height: 5,
                      borderRadius: 999,
                      background: item.key === 'redactedOwnerResponse' ? '#d69b28' : '#dfe8de',
                    }}
                  />
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, color: '#7b6b40', fontSize: 10.5, fontWeight: 800, minWidth: 0 }}>
                <span style={{ minWidth: 0, ...textWrap }}>{t('blockerFocus.state')}</span>
                <span style={{ flex: '0 0 auto' }}>{t('blockerFocus.progress')}</span>
              </div>
            </div>
            <div
              data-testid="iwooos-s49-owner-response-intake-delivery-cards"
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))',
                gap: 7,
                marginTop: 10,
              }}
            >
              {s49OwnerResponseIntakeDeliveryItems.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    data-testid={`iwooos-s49-owner-response-intake-delivery-card-${item.key}`}
                    style={{
                      border: '0.5px solid #d9e5d8',
                      borderRadius: 8,
                      padding: 8,
                      background: item.tone === 'warn' ? '#fffdf8' : '#f7faf7',
                      minWidth: 0,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                      <Icon size={13} color={toneColors[item.tone]} />
                      <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 900 }}>{item.value}</span>
                    </div>
                    <div style={{ color: '#141413', fontSize: 11.5, fontWeight: 900, lineHeight: 1.25, marginTop: 6, ...textWrap }}>
                      {t(`deliveryItems.${item.key}.title` as never)}
                    </div>
                    <div style={{ color: '#667269', fontSize: 10.5, lineHeight: 1.35, marginTop: 3, ...textWrap }}>
                      {t(`deliveryItems.${item.key}.body` as never)}
                    </div>
                  </div>
                )
              })}
            </div>
            <div
              data-testid="iwooos-s49-owner-response-metadata-intake-fields"
              style={{ marginTop: 10, display: 'grid', gap: 7 }}
            >
              <div style={{ color: '#316850', fontSize: 11, fontWeight: 900 }}>
                {t('metadataFieldsTitle')}
              </div>
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))',
                  gap: 7,
                }}
              >
                {s49OwnerResponseMetadataIntakeFields.map(item => {
                  const Icon = item.icon
                  return (
                    <div
                      key={item.key}
                      data-testid={`iwooos-s49-owner-response-metadata-intake-field-${item.key}`}
                      style={{
                        border: '0.5px solid #d9e5d8',
                        borderRadius: 8,
                        padding: 8,
                        background: item.tone === 'warn' ? '#fffdf8' : '#f7faf7',
                        minWidth: 0,
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                        <Icon size={13} color={toneColors[item.tone]} />
                        <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 900 }}>{item.code}</span>
                      </div>
                      <div style={{ color: '#141413', fontSize: 11.5, fontWeight: 900, lineHeight: 1.25, marginTop: 6, ...textWrap }}>
                        {t(`metadataFields.${item.key}.title` as never)}
                      </div>
                      <div style={{ color: '#667269', fontSize: 10.5, lineHeight: 1.35, marginTop: 3, ...textWrap }}>
                        {t(`metadataFields.${item.key}.body` as never)}
                      </div>
                      <div style={{ color: toneColors[item.tone], fontSize: 10.5, fontWeight: 900, marginTop: 6 }}>
                        {t('metadataFieldsState')}: {item.state}
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
            <div
              data-testid="iwooos-s49-owner-response-intake-next-gates"
              style={{ marginTop: 10, display: 'grid', gap: 7 }}
            >
              <div style={{ color: '#316850', fontSize: 11, fontWeight: 900 }}>
                {t('nextGatesTitle')}
              </div>
              {s49OwnerResponseIntakeNextGates.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    data-testid={`iwooos-s49-owner-response-intake-next-gate-${item.key}`}
                    style={{
                      border: '0.5px solid #d9e5d8',
                      borderRadius: 8,
                      background: '#f7faf7',
                      padding: '8px 9px',
                      display: 'grid',
                      gridTemplateColumns: 'auto minmax(0, 1fr) auto',
                      alignItems: 'center',
                      gap: 8,
                      minWidth: 0,
                    }}
                  >
                    <Icon size={14} color={toneColors[item.tone]} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ color: '#141413', fontSize: 12, fontWeight: 900, lineHeight: 1.25, ...textWrap }}>
                        {t(`nextGates.${item.key}.title` as never)}
                      </div>
                      <div style={{ color: '#667269', fontSize: 10.5, lineHeight: 1.35, marginTop: 2, ...textWrap }}>
                        {t(`nextGates.${item.key}.body` as never)}
                      </div>
                    </div>
                    <div style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 900, textAlign: 'right' }}>
                      <div>{item.gate}</div>
                      <div style={{ marginTop: 2 }}>{item.value}</div>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>

          <div
            data-testid="iwooos-s49-owner-response-intake-lanes"
            style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))', gap: 8, minWidth: 0 }}
          >
            {s49OwnerResponseIntakeLanes.map(item => {
              const Icon = item.icon
              return (
                <article
                  key={item.key}
                  data-testid={`iwooos-s49-owner-response-intake-lane-${item.key}`}
                  style={{
                    border: '0.5px solid #d9e5d8',
                    borderRadius: 8,
                    background: '#fff',
                    padding: 10,
                    minWidth: 0,
                    display: 'grid',
                    gap: 8,
                    alignContent: 'start',
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                      <Icon size={15} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
                      <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 900 }}>{item.template}</span>
                    </div>
                    <span style={{ color: '#6f766d', fontSize: 10, fontWeight: 800 }}>{t('laneStatus')}</span>
                  </div>
                  <h3 style={{ margin: 0, fontSize: 13.5, lineHeight: 1.3, color: '#141413', ...textWrap }}>
                    {t(`items.${item.key}.title` as never)}
                  </h3>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 5 }}>
                    {(['received', 'preflight', 'acceptance'] as const).map(stateKey => (
                      <div
                        key={stateKey}
                        style={{
                          border: '0.5px solid #e3eadf',
                          borderRadius: 8,
                          padding: '6px 5px',
                          background: stateKey === 'received' ? '#fffdf8' : '#f7faf7',
                          minWidth: 0,
                        }}
                      >
                        <div style={{ color: '#7b8378', fontSize: 9.5, fontWeight: 800, lineHeight: 1.2, ...textWrap }}>
                          {t(`statusLabels.${stateKey}` as never)}
                        </div>
                        <div style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 900, marginTop: 4, lineHeight: 1.15, ...textWrap }}>
                          {item[stateKey]}
                        </div>
                      </div>
                    ))}
                  </div>
                  <p style={{ margin: 0, color: '#667269', fontSize: 11, lineHeight: 1.45, ...textWrap }}>
                    {t(`items.${item.key}.body` as never)}
                  </p>
                </article>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-s49-owner-response-intake-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #d9e5d8',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 800, color: '#316850' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 9 }}>
            {s49OwnerResponseIntakeBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e3eadf',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#53655a',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7faf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSImmediateVisualMeshBoard() {
  const t = useTranslations('iwooos.immediateVisualMesh')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const meshBodyRef = useRef<HTMLDivElement>(null)
  const [isCompactMesh, setIsCompactMesh] = useState(false)

  useEffect(() => {
    const node = meshBodyRef.current
    if (!node) return

    const updateLayout = () => setIsCompactMesh(node.getBoundingClientRect().width < 760)
    updateLayout()

    const observer = new ResizeObserver(updateLayout)
    observer.observe(node)
    return () => observer.disconnect()
  }, [])

  return (
    <section
      data-testid="iwooos-immediate-visual-mesh-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#f7fbfa', borderColor: '#cfe2d8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))',
            gap: 10,
            alignItems: 'end',
            marginBottom: 12,
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#405f4f', fontSize: 12, fontWeight: 700 }}>
              <Radar size={17} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: '7px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#405f4f', margin: '6px 0 0', ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 104px), 1fr))',
              gap: 7,
              minWidth: 0,
            }}
          >
            {iwooosImmediateVisualMeshStats.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #cfe2d8', borderRadius: 8, padding: 9, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 10, color: '#607466' }}>{t(`stats.${item.key}.label` as never)}</span>
                    <Icon size={14} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 17, fontWeight: 700, color: toneColors[item.tone], marginTop: 7, lineHeight: 1 }}>
                    {item.value}
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <div
          ref={meshBodyRef}
          data-testid="iwooos-immediate-visual-mesh-canvas"
          style={{
            display: 'grid',
            gridTemplateColumns: isCompactMesh ? 'minmax(0, 1fr)' : 'minmax(0, 0.9fr) minmax(0, 1.5fr)',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              border: '0.5px solid #1f2d25',
              borderRadius: 8,
              padding: 13,
              background: '#101613',
              color: '#f7fbfa',
              display: 'grid',
              alignContent: 'center',
              gap: 11,
              minHeight: isCompactMesh ? 174 : 252,
              minWidth: 0,
            }}
          >
            <div
              style={{
                width: 70,
                height: 70,
                borderRadius: 70,
                border: '1px solid rgba(255,255,255,0.2)',
                display: 'grid',
                placeItems: 'center',
                background: 'conic-gradient(#1f7a4d 0 220deg, #d97757 220deg 300deg, #6f6d66 300deg 360deg)',
              }}
            >
              <div
                style={{
                  width: 48,
                  height: 48,
                  borderRadius: 48,
                  background: '#101613',
                  display: 'grid',
                  placeItems: 'center',
                }}
              >
                <ShieldCheck size={23} color="#fffdf8" />
              </div>
            </div>
            <div>
              <div style={{ color: '#b9c8bf', fontSize: 11, fontWeight: 700 }}>{t('center.label')}</div>
              <h3 style={{ color: '#fffdf8', fontSize: 20, lineHeight: 1.15, margin: '6px 0 0' }}>
                {t('center.title')}
              </h3>
              <p style={{ color: '#d2ddd6', fontSize: 12, lineHeight: 1.55, margin: '8px 0 0', ...textWrap }}>
                {t('center.body')}
              </p>
            </div>
          </div>

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: isCompactMesh ? 'minmax(0, 1fr)' : 'repeat(3, minmax(0, 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {iwooosImmediateVisualMeshNodes.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  data-testid={`iwooos-immediate-visual-mesh-node-${item.key}`}
                  style={{
                    minHeight: 118,
                    border: `0.5px solid ${item.tone === 'steady' ? '#cfe2d8' : item.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                    borderRadius: 8,
                    background: '#fff',
                    padding: 11,
                    display: 'grid',
                    alignContent: 'space-between',
                    gap: 8,
                    minWidth: 0,
                    ...textWrap,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <Icon size={17} color={toneColors[item.tone]} />
                    <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.metric}</span>
                  </div>
                  <div>
                    <h3 style={{ fontSize: 13, lineHeight: 1.25, margin: 0, color: '#141413' }}>
                      {t(`nodes.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, lineHeight: 1.45, color: '#607466', margin: '6px 0 0', ...textWrap }}>
                      {t(`nodes.${item.key}.body` as never)}
                    </p>
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <details
          data-testid="iwooos-immediate-visual-mesh-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #cfe2d8',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#405f4f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#405f4f', lineHeight: 1.45, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {iwooosImmediateVisualMeshBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #d9eadf',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#405f4f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7fbfa',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSTopologyAtlasBoard() {
  const t = useTranslations('iwooos.topologyAtlas')
  const [activeKey, setActiveKey] = useState<IwoooSTopologyAtlasMode>('architecture')
  const [activeNodeKey, setActiveNodeKey] = useState<IwoooSTopologyNodeKey>('productSurface')
  const [activePathKey, setActivePathKey] = useState<IwoooSTopologyPathKey>('externalToGate')
  const [activeInsightKey, setActiveInsightKey] = useState<IwoooSTopologyInsightKey>('assetContext')
  const activeLens = iwooosTopologyAtlasLenses.find(item => item.key === activeKey) ?? iwooosTopologyAtlasLenses[0]
  const activeNode = iwooosTopologyDrilldownNodes.find(item => item.key === activeNodeKey) ?? iwooosTopologyDrilldownNodes[0]
  const activePath = iwooosTopologyPathExplorerPaths.find(item => item.key === activePathKey) ?? iwooosTopologyPathExplorerPaths[0]
  const activeInsight = iwooosTopologyInsightDeck.find(item => item.key === activeInsightKey) ?? iwooosTopologyInsightDeck[0]
  const ActiveIcon = activeLens.icon
  const ActiveNodeIcon = activeNode.icon
  const ActivePathIcon = activePath.icon
  const ActiveInsightIcon = activeInsight.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const atlasCanvasRef = useRef<HTMLDivElement>(null)
  const [isCompactAtlas, setIsCompactAtlas] = useState(false)
  const topologyAtlasNodes = iwooosTopologyAtlasNodes.map(item => {
    if (!isCompactAtlas) return item
    const compactPosition = iwooosTopologyAtlasCompactPositions[item.key]
    return compactPosition ? { ...item, ...compactPosition } : item
  })
  const nodeByKey = new Map(topologyAtlasNodes.map(item => [item.key, item]))
  const connectedNodeKeys = new Set<IwoooSTopologyNodeKey>()
  iwooosTopologyAtlasEdges.forEach(([fromKey, toKey]) => {
    if (fromKey === activeNodeKey) connectedNodeKeys.add(toKey)
    if (toKey === activeNodeKey) connectedNodeKeys.add(fromKey)
  })
  const activePathNodeKeys = new Set<IwoooSTopologyNodeKey>(activePath.nodes)
  const activeInsightNodeKeys = new Set<IwoooSTopologyNodeKey>(activeInsight.nodes)
  const activePathEdgeKeys = new Set(
    activePath.nodes.slice(0, -1).map((fromKey, index) => {
      const toKey = activePath.nodes[index + 1]
      return `${fromKey}-${toKey}`
    }),
  )
  const activeInsightEdgeKeys = new Set(
    activeInsight.nodes.slice(0, -1).map((fromKey, index) => {
      const toKey = activeInsight.nodes[index + 1]
      return `${fromKey}-${toKey}`
    }),
  )

  useEffect(() => {
    const node = atlasCanvasRef.current
    if (!node) return

    const updateLayout = () => setIsCompactAtlas(node.getBoundingClientRect().width < 520)
    updateLayout()

    const observer = new ResizeObserver(updateLayout)
    observer.observe(node)
    return () => observer.disconnect()
  }, [])

  return (
    <section
      data-testid="iwooos-topology-atlas-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#f7f8fb', borderColor: '#cfd8e3' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))',
            gap: 10,
            alignItems: 'end',
            marginBottom: 12,
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#2f4f67', fontSize: 12, fontWeight: 700 }}>
              <Network size={17} color="#315f7d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: '7px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#3f5b6f', margin: '6px 0 0', ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            role="tablist"
            aria-label={t('tabsLabel')}
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 128px), 1fr))',
              gap: 7,
              minWidth: 0,
            }}
          >
            {iwooosTopologyAtlasLenses.map(item => {
              const Icon = item.icon
              const selected = activeKey === item.key
              return (
                <button
                  key={item.key}
                  type="button"
                  role="tab"
                  aria-selected={selected}
                  data-testid={`iwooos-topology-atlas-mode-${item.key}`}
                  onClick={() => setActiveKey(item.key)}
                  style={{
                    border: selected ? `1px solid ${toneColors[item.tone]}` : '0.5px solid #d9e0e7',
                    borderRadius: 8,
                    padding: 10,
                    background: selected ? '#fff' : '#fbfcfd',
                    color: '#141413',
                    cursor: 'pointer',
                    textAlign: 'left',
                    minWidth: 0,
                    boxShadow: selected ? '0 8px 22px rgba(30, 58, 79, 0.08)' : 'none',
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <Icon size={15} color={toneColors[item.tone]} />
                    <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.metric}</span>
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.25, marginTop: 8, fontWeight: 700, ...textWrap }}>
                    {t(`lenses.${item.key}.title` as never)}
                  </div>
                </button>
              )
            })}
          </div>
        </div>

        <div
          data-testid="iwooos-topology-atlas-canvas"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            ref={atlasCanvasRef}
            style={{
              position: 'relative',
              minHeight: isCompactAtlas ? 430 : 342,
              border: '0.5px solid #172331',
              borderRadius: 8,
              overflow: 'hidden',
              background:
                'linear-gradient(135deg, #0d141b 0%, #111b23 52%, #18232d 100%)',
              color: '#f8fbfd',
            }}
          >
            <svg
              aria-hidden
              viewBox="0 0 100 86"
              preserveAspectRatio="none"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.95 }}
            >
              <defs>
                <pattern id="iwooos-topology-grid" width="10" height="10" patternUnits="userSpaceOnUse">
                  <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
                </pattern>
                <linearGradient id="iwooos-topology-path" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#58a27d" />
                  <stop offset="55%" stopColor="#d19455" />
                  <stop offset="100%" stopColor="#a7a6a0" />
                </linearGradient>
              </defs>
              <rect width="100" height="86" fill="url(#iwooos-topology-grid)" />
              <circle cx="58" cy="43" r="31" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
              <circle cx="58" cy="43" r="20" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="0.8" />
              {iwooosTopologyAtlasEdges.map(([fromKey, toKey]) => {
                const from = nodeByKey.get(fromKey)
                const to = nodeByKey.get(toKey)
                if (!from || !to) return null
                const selectedPath = fromKey === activeNodeKey || toKey === activeNodeKey
                const exploredPath = activePathEdgeKeys.has(`${fromKey}-${toKey}`)
                const insightPath = activeInsightEdgeKeys.has(`${fromKey}-${toKey}`)
                return (
                  <line
                    key={`${fromKey}-${toKey}`}
                    x1={from.x}
                    y1={from.y}
                    x2={to.x}
                    y2={to.y}
                    stroke="url(#iwooos-topology-path)"
                    strokeWidth={insightPath ? '1.15' : exploredPath ? '1.05' : selectedPath ? '0.95' : '0.68'}
                    strokeDasharray={to.tone === 'locked' ? '3 3' : undefined}
                    strokeLinecap="round"
                    opacity={insightPath || exploredPath || selectedPath ? 1 : to.tone === 'locked' ? 0.42 : 0.58}
                  />
                )
              })}
            </svg>

            <div style={{ position: 'absolute', left: 16, top: 14, right: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 11, color: '#b8c7d3', fontWeight: 700 }}>{t('mapLabel')}</div>
                <div style={{ fontSize: 18, lineHeight: 1.15, color: '#fff', marginTop: 4, fontWeight: 700, ...textWrap }}>
                  {t(`lenses.${activeLens.key}.mapTitle` as never)}
                </div>
              </div>
              <div
                style={{
                  width: 58,
                  height: 58,
                  borderRadius: 58,
                  border: '1px solid rgba(255,255,255,0.22)',
                  display: 'grid',
                  placeItems: 'center',
                  background: `conic-gradient(${toneColors[activeLens.tone]} 0 245deg, rgba(255,255,255,0.16) 245deg 360deg)`,
                  boxShadow: 'inset 0 0 0 13px rgba(13,20,27,0.72)',
                  flex: '0 0 auto',
                }}
              >
                <ActiveIcon size={20} color="#fffdf8" />
              </div>
            </div>

            {topologyAtlasNodes.map(node => {
              const Icon = node.icon
              const active = activeKey === 'architecture' || (activeKey === 'topology' && ['kali', 'devHosts', 'monitoring'].includes(node.key)) || (activeKey === 'attackSurface' && ['productSurface', 'sourceControl', 'runtimeGate'].includes(node.key)) || (activeKey === 'evidenceFlow' && ['monitoring', 'awooopTruth', 'runtimeGate'].includes(node.key))
              const selectedNode = node.key === activeNodeKey
              const connectedNode = connectedNodeKeys.has(node.key)
              const exploredNode = activePathNodeKeys.has(node.key)
              const insightNode = activeInsightNodeKeys.has(node.key)
              return (
                <button
                  key={node.key}
                  type="button"
                  aria-pressed={selectedNode}
                  data-testid={`iwooos-topology-atlas-node-${node.key}`}
                  onClick={() => setActiveNodeKey(node.key)}
                  style={{
                    position: 'absolute',
                    left: `${node.x}%`,
                    top: `${node.y}%`,
                    transform: 'translate(-50%, -50%)',
                    minWidth: 86,
                    maxWidth: 116,
                    border: `1px solid ${selectedNode ? '#ffffff' : active || connectedNode || exploredNode || insightNode ? toneColors[node.tone] : 'rgba(255,255,255,0.2)'}`,
                    borderRadius: 8,
                    padding: 8,
                    background: selectedNode ? '#fffdf8' : active || connectedNode || exploredNode || insightNode ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.72)',
                    color: '#141413',
                    boxShadow: selectedNode ? `0 0 0 3px ${toneColors[node.tone]}66, 0 14px 26px rgba(0,0,0,0.22)` : active || connectedNode || exploredNode || insightNode ? '0 12px 24px rgba(0,0,0,0.18)' : 'none',
                    cursor: 'pointer',
                    textAlign: 'left',
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                    <Icon size={15} color={toneColors[node.tone]} />
                    <span style={{ color: toneColors[node.tone], fontSize: 11, fontWeight: 700 }}>{node.metric}</span>
                  </div>
                  <div style={{ fontSize: 10.5, lineHeight: 1.25, marginTop: 6, color: '#2f3a40', fontWeight: 700, ...textWrap }}>
                    {t(`nodes.${node.key}.title` as never)}
                  </div>
                </button>
              )
            })}
          </div>

          <div style={{ display: 'grid', gap: 8, minWidth: 0 }}>
            <div
              data-testid="iwooos-topology-atlas-active-panel"
              style={{
                border: '0.5px solid #d9e0e7',
                borderRadius: 8,
                background: '#fff',
                padding: 12,
                minWidth: 0,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: toneColors[activeLens.tone], fontSize: 12, fontWeight: 700 }}>
                <ActiveIcon size={16} />
                {activeLens.metric}
              </div>
              <h3 style={{ margin: '7px 0 0', fontSize: 15, lineHeight: 1.25, color: '#141413' }}>
                {t(`lenses.${activeLens.key}.title` as never)}
              </h3>
              <p style={{ margin: '7px 0 0', fontSize: 12, lineHeight: 1.55, color: '#41576a', ...textWrap }}>
                {t(`lenses.${activeLens.key}.detail` as never)}
              </p>
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 130px), 1fr))',
                  gap: 7,
                  marginTop: 10,
                }}
              >
                {(['evidence', 'next', 'locked'] as const).map(key => (
                  <div key={key} style={{ border: '0.5px solid #e4e9ee', borderRadius: 8, background: '#fbfcfd', padding: 9, minWidth: 0 }}>
                    <div style={{ fontSize: 10, color: '#6b7a86', fontWeight: 700 }}>{t(`panelLabels.${key}`)}</div>
                    <div style={{ marginTop: 5, fontSize: 11, lineHeight: 1.45, color: '#263640', ...textWrap }}>
                      {t(`lenses.${activeLens.key}.${key}` as never)}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div
              data-testid="iwooos-topology-atlas-path-explorer"
              style={{
                border: '0.5px solid #d6e2dc',
                borderRadius: 8,
                background: '#fbfffc',
                padding: 12,
                minWidth: 0,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: toneColors[activePath.tone], fontSize: 12, fontWeight: 700, minWidth: 0 }}>
                  <ActivePathIcon size={16} />
                  <span style={textWrap}>{t('pathExplorer.eyebrow')}</span>
                </div>
                <span style={{ color: toneColors[activePath.tone], fontSize: 11, fontWeight: 700, flex: '0 0 auto' }}>
                  {activePath.metric}
                </span>
              </div>

              <div
                role="tablist"
                aria-label={t('pathExplorer.selectorLabel')}
                data-testid="iwooos-topology-atlas-path-explorer-selector"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 120px), 1fr))',
                  gap: 6,
                  marginTop: 10,
                }}
              >
                {iwooosTopologyPathExplorerPaths.map(item => {
                  const Icon = item.icon
                  const selected = item.key === activePathKey
                  return (
                    <button
                      key={item.key}
                      type="button"
                      role="tab"
                      aria-selected={selected}
                      data-testid={`iwooos-topology-atlas-path-${item.key}`}
                      onClick={() => {
                        setActivePathKey(item.key)
                        setActiveNodeKey(item.nodes[0])
                      }}
                      style={{
                        border: selected ? `1px solid ${toneColors[item.tone]}` : '0.5px solid #dce8e1',
                        borderRadius: 8,
                        background: selected ? '#fff' : '#f6fbf8',
                        padding: 9,
                        cursor: 'pointer',
                        textAlign: 'left',
                        minWidth: 0,
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
                        <Icon size={14} color={toneColors[item.tone]} />
                        <span style={{ color: toneColors[item.tone], fontSize: 10.5, fontWeight: 700 }}>{item.metric}</span>
                      </div>
                      <div style={{ marginTop: 6, fontSize: 11, lineHeight: 1.25, color: '#253a32', fontWeight: 700, ...textWrap }}>
                        {t(`pathExplorer.paths.${item.key}.title` as never)}
                      </div>
                    </button>
                  )
                })}
              </div>

              <div
                data-testid="iwooos-topology-atlas-path-explorer-sequence"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 82px), 1fr))',
                  gap: 6,
                  marginTop: 10,
                }}
              >
                {activePath.nodes.map((nodeKey, index) => {
                  const pathNode = iwooosTopologyDrilldownNodes.find(item => item.key === nodeKey) ?? iwooosTopologyDrilldownNodes[0]
                  const Icon = pathNode.icon
                  return (
                    <button
                      key={`${activePath.key}-${nodeKey}`}
                      type="button"
                      data-testid={`iwooos-topology-atlas-path-step-${nodeKey}`}
                      onClick={() => setActiveNodeKey(nodeKey)}
                      style={{
                        border: activeNodeKey === nodeKey ? `1px solid ${toneColors[pathNode.tone]}` : '0.5px solid #e4eee8',
                        borderRadius: 8,
                        background: activeNodeKey === nodeKey ? '#fff' : '#f8fbf9',
                        padding: '8px 7px',
                        cursor: 'pointer',
                        textAlign: 'left',
                        minWidth: 0,
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
                        <Icon size={13} color={toneColors[pathNode.tone]} />
                        <span style={{ color: toneColors[pathNode.tone], fontSize: 10, fontWeight: 700 }}>{String(index + 1).padStart(2, '0')}</span>
                      </div>
                      <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.25, color: '#273640', fontWeight: 700, ...textWrap }}>
                        {t(`nodes.${nodeKey}.title` as never)}
                      </div>
                    </button>
                  )
                })}
              </div>

              <div
                data-testid="iwooos-topology-atlas-path-explorer-summary"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 138px), 1fr))',
                  gap: 7,
                  marginTop: 10,
                }}
              >
                {(['evidence', 'risk', 'next', 'locked'] as const).map(key => (
                  <div key={key} style={{ border: '0.5px solid #dce8e1', borderRadius: 8, background: '#fff', padding: 8, minWidth: 0 }}>
                    <div style={{ fontSize: 9.5, lineHeight: 1.2, color: '#61756a', fontWeight: 700, ...textWrap }}>
                      {t(`pathExplorer.fields.${key}`)}
                    </div>
                    <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.35, color: '#263640', fontWeight: 700, ...textWrap }}>
                      {t(`pathExplorer.paths.${activePath.key}.${key}` as never)}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div
              data-testid="iwooos-topology-atlas-intelligence-deck"
              style={{
                border: '0.5px solid #d7e0ec',
                borderRadius: 8,
                background: '#f8fbff',
                padding: 12,
                minWidth: 0,
              }}
            >
              <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: 10, alignItems: 'start' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: toneColors[activeInsight.tone], fontSize: 12, fontWeight: 700 }}>
                    <ActiveInsightIcon size={16} />
                    {t('intelligenceDeck.eyebrow')}
                  </div>
                  <h3 style={{ margin: '7px 0 0', fontSize: 15, lineHeight: 1.25, color: '#141413', ...textWrap }}>
                    {t('intelligenceDeck.title')}
                  </h3>
                  <p style={{ margin: '6px 0 0', fontSize: 11.5, lineHeight: 1.45, color: '#456174', ...textWrap }}>
                    {t('intelligenceDeck.subtitle')}
                  </p>
                </div>
                <div
                  style={{
                    width: 62,
                    height: 62,
                    borderRadius: 62,
                    border: '1px solid #d3e0ea',
                    display: 'grid',
                    placeItems: 'center',
                    background: `conic-gradient(${toneColors[activeInsight.tone]} 0 ${Math.max(activeInsight.percent, 2) * 3.6}deg, #e8eef3 ${Math.max(activeInsight.percent, 2) * 3.6}deg 360deg)`,
                    boxShadow: 'inset 0 0 0 14px #f8fbff',
                    flex: '0 0 auto',
                  }}
                >
                  <span style={{ color: toneColors[activeInsight.tone], fontSize: 12, fontWeight: 700 }}>
                    {activeInsight.metric}
                  </span>
                </div>
              </div>

              <div
                role="tablist"
                aria-label={t('intelligenceDeck.selectorLabel')}
                data-testid="iwooos-topology-atlas-intelligence-selector"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 128px), 1fr))',
                  gap: 7,
                  marginTop: 10,
                }}
              >
                {iwooosTopologyInsightDeck.map(item => {
                  const Icon = item.icon
                  const selected = item.key === activeInsightKey
                  return (
                    <button
                      key={item.key}
                      type="button"
                      role="tab"
                      aria-selected={selected}
                      data-testid={`iwooos-topology-atlas-intelligence-${item.key}`}
                      onClick={() => {
                        setActiveInsightKey(item.key)
                        setActiveKey(item.lensKey)
                        setActivePathKey(item.pathKey)
                        setActiveNodeKey(item.nodes[0])
                      }}
                      style={{
                        border: selected ? `1px solid ${toneColors[item.tone]}` : '0.5px solid #dce6f0',
                        borderRadius: 8,
                        background: selected ? '#fff' : '#f4f8fc',
                        padding: 9,
                        cursor: 'pointer',
                        textAlign: 'left',
                        minWidth: 0,
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                        <Icon size={14} color={toneColors[item.tone]} />
                        <span style={{ color: toneColors[item.tone], fontSize: 10.5, fontWeight: 700 }}>{item.metric}</span>
                      </div>
                      <div style={{ marginTop: 6, fontSize: 11, lineHeight: 1.25, color: '#25323c', fontWeight: 700, ...textWrap }}>
                        {t(`intelligenceDeck.items.${item.key}.title` as never)}
                      </div>
                    </button>
                  )
                })}
              </div>

              <div
                data-testid="iwooos-topology-atlas-intelligence-trail"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 94px), 1fr))',
                  gap: 7,
                  marginTop: 10,
                }}
              >
                {activeInsight.nodes.map((nodeKey, index) => {
                  const insightNode = iwooosTopologyDrilldownNodes.find(item => item.key === nodeKey) ?? iwooosTopologyDrilldownNodes[0]
                  const Icon = insightNode.icon
                  return (
                    <button
                      key={`${activeInsight.key}-${nodeKey}`}
                      type="button"
                      data-testid={`iwooos-topology-atlas-intelligence-node-${nodeKey}`}
                      onClick={() => setActiveNodeKey(nodeKey)}
                      style={{
                        border: activeNodeKey === nodeKey ? `1px solid ${toneColors[insightNode.tone]}` : '0.5px solid #dde8f0',
                        borderRadius: 8,
                        background: activeNodeKey === nodeKey ? '#fff' : '#f9fbfd',
                        padding: '8px 7px',
                        cursor: 'pointer',
                        textAlign: 'left',
                        minWidth: 0,
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
                        <Icon size={13} color={toneColors[insightNode.tone]} />
                        <span style={{ color: toneColors[insightNode.tone], fontSize: 10, fontWeight: 700 }}>{String(index + 1).padStart(2, '0')}</span>
                      </div>
                      <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.25, color: '#263640', fontWeight: 700, ...textWrap }}>
                        {t(`nodes.${nodeKey}.title` as never)}
                      </div>
                    </button>
                  )
                })}
              </div>

              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)',
                  gap: 8,
                  marginTop: 10,
                }}
              >
                <div
                  style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 120px), 1fr))',
                    gap: 7,
                    minWidth: 0,
                  }}
                >
                  {(['signal', 'interpretation', 'next'] as const).map(key => (
                    <div key={key} style={{ border: '0.5px solid #dde8f0', borderRadius: 8, background: '#fff', padding: 8, minWidth: 0 }}>
                      <div style={{ fontSize: 9.5, lineHeight: 1.2, color: '#5c7080', fontWeight: 700, ...textWrap }}>
                        {t(`intelligenceDeck.fields.${key}`)}
                      </div>
                      <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.35, color: '#263640', fontWeight: 700, ...textWrap }}>
                        {t(`intelligenceDeck.items.${activeInsight.key}.${key}` as never)}
                      </div>
                    </div>
                  ))}
                </div>

                <div
                  data-testid="iwooos-topology-atlas-blast-rings"
                  style={{
                    minHeight: 136,
                    border: '0.5px solid #dde8f0',
                    borderRadius: 8,
                    background: '#fff',
                    position: 'relative',
                    overflow: 'hidden',
                  }}
                >
                  {[0, 1, 2].map(index => (
                    <div
                      key={index}
                      style={{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        width: `${112 - index * 28}px`,
                        height: `${112 - index * 28}px`,
                        borderRadius: 999,
                        border: `1px ${index === 0 ? 'dashed' : 'solid'} ${toneColors[activeInsight.tone]}${index === 0 ? '66' : '44'}`,
                        transform: 'translate(-50%, -50%)',
                      }}
                    />
                  ))}
                  <div
                    style={{
                      position: 'absolute',
                      inset: 0,
                      display: 'grid',
                      placeItems: 'center',
                      padding: 14,
                      textAlign: 'center',
                    }}
                  >
                    <div>
                      <div style={{ fontSize: 10, lineHeight: 1.2, color: '#627688', fontWeight: 700 }}>
                        {t('intelligenceDeck.ringLabel')}
                      </div>
                      <div style={{ marginTop: 5, fontSize: 17, lineHeight: 1, color: toneColors[activeInsight.tone], fontWeight: 700 }}>
                        {activeInsight.percent}%
                      </div>
                      <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.25, color: '#3f5565', fontWeight: 700, ...textWrap }}>
                        {t(`intelligenceDeck.items.${activeInsight.key}.ring` as never)}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div
              data-testid="iwooos-topology-atlas-node-drilldown"
              style={{
                border: '0.5px solid #cfd8e3',
                borderRadius: 8,
                background: '#fffdf8',
                padding: 12,
                minWidth: 0,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 9, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: toneColors[activeNode.tone], fontSize: 12, fontWeight: 700, minWidth: 0 }}>
                  <ActiveNodeIcon size={16} />
                  <span style={textWrap}>{t('nodeDrilldown.eyebrow')}</span>
                </div>
                <span style={{ color: toneColors[activeNode.tone], fontSize: 11, fontWeight: 700, flex: '0 0 auto' }}>
                  {activeNode.relationCode}
                </span>
              </div>
              <h3 style={{ margin: '8px 0 0', fontSize: 15, lineHeight: 1.25, color: '#141413', ...textWrap }}>
                {t(`nodes.${activeNode.key}.title` as never)}
              </h3>
              <div
                data-testid="iwooos-topology-atlas-node-drilldown-metrics"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
                  gap: 7,
                  marginTop: 10,
                }}
              >
                {(['relation', 'evidence', 'next', 'boundary'] as const).map(key => (
                  <div key={key} style={{ border: '0.5px solid #e7dfd4', borderRadius: 8, background: '#fff', padding: 8, minWidth: 0 }}>
                    <div style={{ fontSize: 9.5, lineHeight: 1.2, color: '#73685b', fontWeight: 700, ...textWrap }}>
                      {t(`nodeDrilldown.fields.${key}`)}
                    </div>
                    <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.35, color: '#263640', fontWeight: 700, ...textWrap }}>
                      {key === 'relation' ? activeNode.relationCode : key === 'evidence' ? activeNode.evidenceCode : key === 'next' ? activeNode.nextCode : activeNode.boundaryCode}
                    </div>
                  </div>
                ))}
              </div>
              <p style={{ margin: '9px 0 0', fontSize: 11.5, lineHeight: 1.5, color: '#4b5f69', ...textWrap }}>
                {t(`nodeDrilldown.nodes.${activeNode.key}.body` as never)}
              </p>
              <div
                data-testid="iwooos-topology-atlas-node-drilldown-selector"
                aria-label={t('nodeDrilldown.selectorLabel')}
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 92px), 1fr))',
                  gap: 6,
                  marginTop: 10,
                }}
              >
                {iwooosTopologyDrilldownNodes.map(item => {
                  const Icon = item.icon
                  const selected = item.key === activeNodeKey
                  return (
                    <button
                      key={item.key}
                      type="button"
                      aria-pressed={selected}
                      data-testid={`iwooos-topology-atlas-drilldown-node-${item.key}`}
                      onClick={() => setActiveNodeKey(item.key)}
                      style={{
                        border: selected ? `1px solid ${toneColors[item.tone]}` : '0.5px solid #e3ded5',
                        borderRadius: 8,
                        background: selected ? '#fff' : '#faf8f4',
                        padding: '7px 8px',
                        cursor: 'pointer',
                        textAlign: 'left',
                        minWidth: 0,
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
                        <Icon size={13} color={toneColors[item.tone]} />
                        <span style={{ fontSize: 9.5, color: toneColors[item.tone], fontWeight: 700 }}>{item.boundaryCode}</span>
                      </div>
                      <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.25, color: '#273640', fontWeight: 700, ...textWrap }}>
                        {t(`nodes.${item.key}.title` as never)}
                      </div>
                    </button>
                  )
                })}
              </div>
            </div>

            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 138px), 1fr))',
                gap: 8,
              }}
            >
              {iwooosTopologyAtlasLayers.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #d9e0e7', borderRadius: 8, background: '#fff', padding: 10, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <Icon size={15} color={toneColors[item.tone]} />
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.metric}</span>
                    </div>
                    <div style={{ fontSize: 11.5, lineHeight: 1.3, marginTop: 8, color: '#1f2d35', fontWeight: 700, ...textWrap }}>
                      {t(`layers.${item.key}.title` as never)}
                    </div>
                    <div style={{ fontSize: 10.5, lineHeight: 1.35, color: '#64737d', marginTop: 5, ...textWrap }}>
                      {t(`layers.${item.key}.body` as never)}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>

        <div
          data-testid="iwooos-topology-atlas-technical-charts"
          style={{
            marginTop: 10,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))',
            gap: 8,
          }}
        >
          {iwooosTopologyAtlasCharts.map(item => {
            const Icon = item.icon
            return (
              <div key={item.key} style={{ border: '0.5px solid #d9e0e7', borderRadius: 8, background: '#fff', padding: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                    <Icon size={15} color={toneColors[item.tone]} />
                    <span style={{ fontSize: 11, color: '#536674', fontWeight: 700, ...textWrap }}>
                      {t(`charts.${item.key}.label` as never)}
                    </span>
                  </div>
                  <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.value}</span>
                </div>
                <div style={{ marginTop: 8, height: 8, borderRadius: 8, background: '#edf1f4', overflow: 'hidden' }}>
                  <div
                    style={{
                      width: `${item.percent}%`,
                      height: '100%',
                      borderRadius: 8,
                      background: toneColors[item.tone],
                    }}
                  />
                </div>
                <p style={{ margin: '7px 0 0', fontSize: 10.5, lineHeight: 1.4, color: '#63727c', ...textWrap }}>
                  {t(`charts.${item.key}.body` as never)}
                </p>
              </div>
            )
          })}
        </div>

        <details
          data-testid="iwooos-topology-atlas-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #d9e0e7',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#3f5b6f' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#3f5b6f', lineHeight: 1.45, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {iwooosTopologyAtlasBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e4e9ee',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#41576a',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#f7f8fb',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSDecisionRunwayBoard() {
  const t = useTranslations('iwooos.decisionRunway')
  const [activeKey, setActiveKey] = useState<IwoooSDecisionRunwayStepKey>('ownerEvidence')
  const activeStep = iwooosDecisionRunwaySteps.find(item => item.key === activeKey) ?? iwooosDecisionRunwaySteps[0]
  const ActiveIcon = activeStep.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  const railPoints = iwooosDecisionRunwaySteps
    .map((item, index) => {
      const x = 10 + index * 20
      const y = 54 - Math.max(item.progress, 2) * 0.42
      return `${x},${y}`
    })
    .join(' ')

  return (
    <section
      data-testid="iwooos-decision-runway-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#f6fbf8', borderColor: '#cde1d3' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))',
            gap: 10,
            alignItems: 'end',
            marginBottom: 12,
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#285b43', fontSize: 12, fontWeight: 700 }}>
              <Route size={17} color="#1f7a4d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: '7px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#3f5f4e', margin: '6px 0 0', ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            data-testid="iwooos-decision-runway-boundary-strip"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 112px), 1fr))',
              gap: 7,
              minWidth: 0,
            }}
          >
            {iwooosDecisionRunwayBoundarySignals.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #d5e4da', borderRadius: 8, background: '#fff', padding: 9, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                    <Icon size={14} color={toneColors[item.tone]} />
                    <span style={{ color: toneColors[item.tone], fontSize: 10.5, fontWeight: 700 }}>{item.value}</span>
                  </div>
                  <div style={{ marginTop: 6, fontSize: 10.5, lineHeight: 1.25, color: '#385447', fontWeight: 700, ...textWrap }}>
                    {t(`boundarySignals.${item.key}.label` as never)}
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div style={{ display: 'grid', gap: 9, minWidth: 0 }}>
            <div
              data-testid="iwooos-decision-runway-progress-rail"
              style={{
                minHeight: 212,
                border: '0.5px solid #183428',
                borderRadius: 8,
                background: 'linear-gradient(135deg, #101c17 0%, #162920 50%, #24342d 100%)',
                color: '#fff',
                position: 'relative',
                overflow: 'hidden',
                padding: 12,
              }}
            >
              <svg
                aria-hidden
                viewBox="0 0 100 62"
                preserveAspectRatio="none"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.92 }}
              >
                <defs>
                  <pattern id="iwooos-decision-runway-grid" width="8" height="8" patternUnits="userSpaceOnUse">
                    <path d="M 8 0 L 0 0 0 8" fill="none" stroke="rgba(255,255,255,0.055)" strokeWidth="0.45" />
                  </pattern>
                  <linearGradient id="iwooos-decision-runway-line" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stopColor="#5fb083" />
                    <stop offset="58%" stopColor="#d19455" />
                    <stop offset="100%" stopColor="#a7a6a0" />
                  </linearGradient>
                </defs>
                <rect width="100" height="62" fill="url(#iwooos-decision-runway-grid)" />
                <line x1="8" y1="54" x2="94" y2="54" stroke="rgba(255,255,255,0.2)" strokeWidth="0.6" />
                <polyline points={railPoints} fill="none" stroke="url(#iwooos-decision-runway-line)" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
                {iwooosDecisionRunwaySteps.map((item, index) => {
                  const x = 10 + index * 20
                  const y = 54 - Math.max(item.progress, 2) * 0.42
                  const selected = item.key === activeKey
                  return (
                    <g key={item.key}>
                      <line x1={x} y1={y} x2={x} y2="54" stroke="rgba(255,255,255,0.16)" strokeDasharray="2 2" strokeWidth="0.6" />
                      <circle cx={x} cy={y} r={selected ? 2.7 : 2} fill={toneColors[item.tone]} stroke={selected ? '#fff' : 'rgba(255,255,255,0.62)'} strokeWidth={selected ? 0.8 : 0.45} />
                    </g>
                  )
                })}
              </svg>

              <div style={{ position: 'relative', zIndex: 1, display: 'grid', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, color: '#b7d4c2', fontWeight: 700 }}>{t('railLabel')}</div>
                    <div style={{ marginTop: 4, fontSize: 18, lineHeight: 1.15, color: '#fff', fontWeight: 700, ...textWrap }}>
                      {t(`steps.${activeStep.key}.title` as never)}
                    </div>
                  </div>
                  <div
                    style={{
                      width: 62,
                      height: 62,
                      borderRadius: 62,
                      border: '1px solid rgba(255,255,255,0.24)',
                      display: 'grid',
                      placeItems: 'center',
                      background: `conic-gradient(${toneColors[activeStep.tone]} 0 ${Math.max(activeStep.progress, 2) * 3.6}deg, rgba(255,255,255,0.16) ${Math.max(activeStep.progress, 2) * 3.6}deg 360deg)`,
                      boxShadow: 'inset 0 0 0 14px rgba(16,28,23,0.78)',
                      flex: '0 0 auto',
                    }}
                  >
                    <span style={{ fontSize: 12, lineHeight: 1, color: '#fff', fontWeight: 700 }}>{activeStep.metric}</span>
                  </div>
                </div>

                <div
                  role="tablist"
                  aria-label={t('selectorLabel')}
                  data-testid="iwooos-decision-runway-selector"
                  style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 118px), 1fr))',
                    gap: 7,
                    marginTop: 74,
                  }}
                >
                  {iwooosDecisionRunwaySteps.map(item => {
                    const Icon = item.icon
                    const selected = item.key === activeKey
                    return (
                      <button
                        key={item.key}
                        type="button"
                        role="tab"
                        aria-selected={selected}
                        data-testid={`iwooos-decision-runway-step-${item.key}`}
                        onClick={() => setActiveKey(item.key)}
                        style={{
                          border: selected ? `1px solid ${toneColors[item.tone]}` : '0.5px solid #5b7166',
                          borderRadius: 8,
                          background: selected ? '#fffdf8' : '#263a31',
                          color: selected ? '#141413' : '#fff',
                          padding: 9,
                          cursor: 'pointer',
                          textAlign: 'left',
                          minWidth: 0,
                          boxShadow: selected ? '0 12px 24px rgba(0,0,0,0.22)' : 'none',
                        }}
                      >
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                          <Icon size={14} color={toneColors[item.tone]} />
                          <span style={{ color: selected ? toneColors[item.tone] : '#dbe8df', fontSize: 10.5, fontWeight: 700 }}>
                            {item.metric}
                          </span>
                        </div>
                        <div style={{ marginTop: 6, fontSize: 11, lineHeight: 1.25, fontWeight: 700, ...textWrap }}>
                          {t(`steps.${item.key}.short` as never)}
                        </div>
                      </button>
                    )
                  })}
                </div>
              </div>
            </div>

            <div
              data-testid="iwooos-decision-runway-dependency-grid"
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 126px), 1fr))',
                gap: 8,
              }}
            >
              {iwooosDecisionRunwayDependencies.map(item => {
                const Icon = item.icon
                return (
                  <div key={item.key} style={{ border: '0.5px solid #d5e4da', borderRadius: 8, background: '#fff', padding: 10, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 7 }}>
                      <Icon size={15} color={toneColors[item.tone]} />
                      <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 700 }}>{item.value}</span>
                    </div>
                    <div style={{ marginTop: 7, fontSize: 11, lineHeight: 1.28, color: '#263b31', fontWeight: 700, ...textWrap }}>
                      {t(`dependencies.${item.key}.title` as never)}
                    </div>
                    <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.35, color: '#63756a', ...textWrap }}>
                      {t(`dependencies.${item.key}.body` as never)}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>

          <div
            data-testid="iwooos-decision-runway-active-panel"
            style={{
              border: '0.5px solid #d5e4da',
              borderRadius: 8,
              background: '#fff',
              padding: 12,
              display: 'flex',
              flexDirection: 'column',
              minWidth: 0,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: toneColors[activeStep.tone], fontSize: 12, fontWeight: 700 }}>
              <ActiveIcon size={16} />
              {activeStep.metric}
            </div>
            <h3 style={{ margin: '8px 0 0', fontSize: 16, lineHeight: 1.25, color: '#141413', ...textWrap }}>
              {t(`steps.${activeStep.key}.title` as never)}
            </h3>
            <p style={{ margin: '7px 0 0', fontSize: 12, lineHeight: 1.55, color: '#4d6458', ...textWrap }}>
              {t(`steps.${activeStep.key}.body` as never)}
            </p>
            <div style={{ marginTop: 10, height: 8, borderRadius: 8, background: '#ecf2ee', overflow: 'hidden' }}>
              <div style={{ width: `${activeStep.progress}%`, height: '100%', borderRadius: 8, background: toneColors[activeStep.tone] }} />
            </div>
            <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 118px), 1fr))', gap: 7 }}>
              {(['evidence', 'next', 'blocked'] as const).map(key => (
                <div key={key} style={{ border: '0.5px solid #e3ebe6', borderRadius: 8, background: '#fbfdfb', padding: 8, minWidth: 0 }}>
                  <div style={{ fontSize: 9.5, lineHeight: 1.2, color: '#667a6e', fontWeight: 700, ...textWrap }}>{t(`fields.${key}`)}</div>
                  <div style={{ marginTop: 5, fontSize: 10.5, lineHeight: 1.35, color: '#263b31', fontWeight: 700, ...textWrap }}>
                    {t(`steps.${activeStep.key}.${key}` as never)}
                  </div>
                </div>
              ))}
            </div>

            <details
              data-testid="iwooos-decision-runway-boundaries"
              style={{
                marginTop: 'auto',
                border: '0.5px solid #e3ebe6',
                borderRadius: 8,
                background: '#fbfdfb',
                padding: '7px 9px',
              }}
            >
              <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#3f5f4e' }}>
                {t('boundaryTitle')}
              </summary>
              <p style={{ fontSize: 11, color: '#536a5d', lineHeight: 1.45, margin: '8px 0', ...textWrap }}>
                {t('boundaryIntro')}
              </p>
              <div style={{ display: 'grid', gap: 5 }}>
                {iwooosDecisionRunwayBoundaries.map(item => (
                  <code
                    key={item}
                    style={{
                      border: '0.5px solid #e5eee8',
                      borderRadius: 8,
                      padding: '6px 8px',
                      color: '#42594d',
                      fontSize: 11,
                      lineHeight: 1.4,
                      background: '#fff',
                      overflowWrap: 'anywhere',
                    }}
                  >
                    {item}
                  </code>
                ))}
              </div>
            </details>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSGateRadarBoard() {
  const t = useTranslations('iwooos.gateRadar')
  const [activeKey, setActiveKey] = useState<IwoooSGateRadarMode>('visible')
  const activeLane = iwooosGateRadarLanes.find(item => item.key === activeKey) ?? iwooosGateRadarLanes[0]
  const ActiveIcon = activeLane.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      data-testid="iwooos-gate-radar-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
    >
      <div style={{ ...band, padding: 14, background: '#fffaf7', borderColor: '#e6d6c8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))',
            gap: 10,
            alignItems: 'end',
            marginBottom: 12,
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6f4f37', fontSize: 12, fontWeight: 700 }}>
              <Radar size={17} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: '7px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f4f37', margin: '6px 0 0', ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 108px), 1fr))',
              gap: 7,
              minWidth: 0,
            }}
          >
            {iwooosGateRadarSummary.map(item => {
              const Icon = item.icon
              return (
                <div key={item.key} style={{ border: '0.5px solid #e6d6c8', borderRadius: 8, padding: 9, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 10, color: '#8a6f5c' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <Icon size={14} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 17, fontWeight: 700, color: toneColors[item.tone], marginTop: 7, lineHeight: 1 }}>
                    {item.value}
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <div
          data-testid="iwooos-gate-radar-canvas"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))',
            gap: 10,
            alignItems: 'stretch',
          }}
        >
          <div
            style={{
              border: '0.5px solid #1f2d25',
              borderRadius: 8,
              padding: 13,
              background: '#111714',
              color: '#fffdf8',
              minHeight: 248,
              display: 'grid',
              gridTemplateColumns: 'auto minmax(0, 1fr)',
              gap: 12,
              alignItems: 'center',
              minWidth: 0,
            }}
          >
            <div
              aria-hidden
              style={{
                width: 108,
                height: 108,
                borderRadius: 108,
                background: `conic-gradient(${toneColors[activeLane.tone]} 0 ${Math.max(activeLane.score, 4) * 3.6}deg, rgba(255,255,255,0.12) ${Math.max(activeLane.score, 4) * 3.6}deg 360deg)`,
                border: '1px solid rgba(255,255,255,0.18)',
                display: 'grid',
                placeItems: 'center',
                boxShadow: 'inset 0 0 0 16px rgba(17,23,20,0.82)',
              }}
            >
              <div style={{ display: 'grid', placeItems: 'center', gap: 3 }}>
                <ActiveIcon size={22} color="#fffdf8" />
                <span style={{ fontSize: 13, fontWeight: 700 }}>{activeLane.metric}</span>
              </div>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 11, color: '#c8d4cd', fontWeight: 700 }}>{t('activeLabel')}</div>
              <h3 style={{ fontSize: 20, lineHeight: 1.15, margin: '6px 0 0', color: '#fffdf8' }}>
                {t(`lanes.${activeLane.key}.title` as never)}
              </h3>
              <p style={{ fontSize: 12, lineHeight: 1.55, color: '#d2ddd6', margin: '8px 0 0', ...textWrap }}>
                {t(`lanes.${activeLane.key}.detail` as never)}
              </p>
            </div>
          </div>

          <div style={{ display: 'grid', gap: 8, minWidth: 0 }}>
            <div
              role="tablist"
              aria-label={t('tabsLabel')}
              style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 142px), 1fr))', gap: 8 }}
            >
              {iwooosGateRadarLanes.map(item => {
                const Icon = item.icon
                const selected = activeKey === item.key
                return (
                  <button
                    key={item.key}
                    type="button"
                    role="tab"
                    aria-selected={selected}
                    title={t(`lanes.${item.key}.title` as never)}
                    data-testid={`iwooos-gate-radar-lane-${item.key}`}
                    onClick={() => setActiveKey(item.key)}
                    style={{
                      border: `0.5px solid ${selected ? toneColors[item.tone] : '#e6d6c8'}`,
                      borderRadius: 8,
                      background: selected ? '#fff' : '#fffdf8',
                      color: '#141413',
                      cursor: 'pointer',
                      padding: 10,
                      minHeight: 98,
                      display: 'grid',
                      alignContent: 'space-between',
                      gap: 7,
                      textAlign: 'left',
                      minWidth: 0,
                      boxShadow: selected ? `inset 0 3px 0 ${toneColors[item.tone]}` : 'none',
                      ...textWrap,
                    }}
                  >
                    <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <Icon size={16} color={toneColors[item.tone]} />
                      <span style={{ fontSize: 12, color: toneColors[item.tone], fontWeight: 700 }}>{item.metric}</span>
                    </span>
                    <span style={{ fontSize: 12, lineHeight: 1.25, fontWeight: 700 }}>{t(`lanes.${item.key}.title` as never)}</span>
                    <span style={{ fontSize: 11, lineHeight: 1.35, color: '#6f6d66' }}>{t(`lanes.${item.key}.state` as never)}</span>
                  </button>
                )
              })}
            </div>

            <div
              data-testid="iwooos-gate-radar-active-panel"
              style={{
                border: '0.5px solid #e6d6c8',
                borderRadius: 8,
                background: '#fff',
                padding: 10,
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 150px), 1fr))',
                gap: 8,
              }}
            >
              {['evidence', 'next', 'locked'].map(key => (
                <div key={key} style={{ border: '0.5px solid #f0e5da', borderRadius: 8, padding: 9, background: '#fffaf7', minWidth: 0 }}>
                  <div style={{ fontSize: 10, color: '#8a6f5c', marginBottom: 5 }}>{t(`panelLabels.${key}` as never)}</div>
                  <div style={{ fontSize: 11, color: key === 'locked' ? toneColors.locked : '#3f463f', lineHeight: 1.4, ...textWrap }}>
                    {t(`lanes.${activeLane.key}.${key}` as never)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <details
          data-testid="iwooos-gate-radar-boundaries"
          style={{
            marginTop: 10,
            border: '0.5px solid #e6d6c8',
            borderRadius: 8,
            background: '#fff',
            padding: '7px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#6f4f37' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6 }}>
            {iwooosGateRadarBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #f0e5da',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#6f4f37',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fffaf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSCommandMapBoard() {
  const t = useTranslations('iwooos.commandMap')
  const [activeKey, setActiveKey] = useState<IwoooSCommandMapMode>('unlock')
  const activeItem = iwooosCommandMapItems.find(item => item.key === activeKey) ?? iwooosCommandMapItems[0]
  const ActiveIcon = activeItem.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      id="iwooos-command-map-board"
      style={{ marginBottom: 14, maxWidth: '100%', overflow: 'hidden' }}
      data-testid="iwooos-command-map-board"
    >
      <div style={{ ...band, padding: 16, background: '#fbfbf7', borderColor: '#ded8c8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 14 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#5c543f', fontSize: 12, fontWeight: 700 }}>
              <Radar size={17} color="#b66a2d" />
              {t('eyebrow')}
            </div>
            <h2 style={{ fontSize: 17, margin: '8px 0 0', color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#5c543f', lineHeight: 1.55, margin: '6px 0 0', ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            role="tablist"
            aria-label={t('tabsLabel')}
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {iwooosCommandMapItems.map(item => {
              const Icon = item.icon
              const selected = activeKey === item.key
              return (
                <button
                  key={item.key}
                  id={item.key === 'sourceControl' ? 'iwooos-command-map-source-control' : undefined}
                  type="button"
                  role="tab"
                  aria-selected={selected}
                  title={t(`items.${item.key}.title` as never)}
                  onClick={() => setActiveKey(item.key)}
                  style={{
                    border: `0.5px solid ${selected ? toneColors[item.tone] : '#ded8c8'}`,
                    borderRadius: 8,
                    background: selected ? '#fffaf7' : '#fff',
                    padding: 10,
                    textAlign: 'left',
                    cursor: 'pointer',
                    color: '#141413',
                    display: 'grid',
                    gap: 7,
                    minHeight: 104,
                    minWidth: 0,
                    boxShadow: selected ? 'inset 0 3px 0 rgba(182, 106, 45, 0.75)' : 'none',
                    ...textWrap,
                  }}
                >
                  <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <Icon size={16} color={toneColors[item.tone]} />
                    <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>{item.metric}</span>
                  </span>
                  <span style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.3 }}>
                    {t(`items.${item.key}.title` as never)}
                  </span>
                  <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.35 }}>
                    {t(`items.${item.key}.state` as never)}
                  </span>
                </button>
              )
            })}
          </div>
        </div>

        <div
          data-testid="iwooos-command-map-active-panel"
          style={{
            marginTop: 14,
            border: '0.5px solid #ded8c8',
            borderRadius: 8,
            background: '#fff',
            padding: 14,
            display: 'grid',
            gridTemplateColumns: 'auto minmax(0, 1fr)',
            gap: 12,
            alignItems: 'start',
          }}
        >
          <div
            aria-hidden
            style={{
              width: 42,
              height: 42,
              borderRadius: 42,
              background: activeItem.tone === 'steady' ? '#f0faf4' : activeItem.tone === 'warn' ? '#fff4ec' : '#f4f3ef',
              border: `0.5px solid ${activeItem.tone === 'steady' ? '#cfe2d8' : activeItem.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
              display: 'grid',
              placeItems: 'center',
              flex: '0 0 auto',
            }}
          >
            <ActiveIcon size={20} color={toneColors[activeItem.tone]} />
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <h3 style={{ fontSize: 15, margin: 0, color: '#141413' }}>
                {t(`items.${activeItem.key}.title` as never)}
              </h3>
              <span
                style={{
                  border: `0.5px solid ${activeItem.tone === 'steady' ? '#cfe2d8' : activeItem.tone === 'warn' ? '#e6c8b8' : '#dad7ce'}`,
                  borderRadius: 999,
                  color: toneColors[activeItem.tone],
                  padding: '3px 8px',
                  fontSize: 11,
                  lineHeight: 1.2,
                }}
              >
                {activeItem.metric}
              </span>
            </div>
            <p style={{ fontSize: 12, color: '#5c543f', lineHeight: 1.55, margin: '7px 0 0', ...textWrap }}>
              {t(`items.${activeItem.key}.detail` as never)}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(148px, 1fr))', gap: 8, marginTop: 10 }}>
              {['evidence', 'next', 'locked'].map(key => (
                <div key={key} style={{ border: '0.5px solid #ede4d4', borderRadius: 8, padding: 10, background: '#fbfbf7' }}>
                  <div style={{ fontSize: 10, color: '#7b7465', marginBottom: 5 }}>{t(`panelLabels.${key}` as never)}</div>
                  <div style={{ fontSize: 11, color: key === 'locked' ? toneColors.locked : '#3f463f', lineHeight: 1.4, ...textWrap }}>
                    {t(`items.${activeItem.key}.${key}` as never)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <details
          data-testid="iwooos-command-map-boundaries"
          style={{
            marginTop: 12,
            border: '0.5px solid #ded8c8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#5c543f' }}>
            {t('boundaryTitle')}
          </summary>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 6, marginTop: 8 }}>
            {iwooosCommandMapBoundaries.map(item => (
              <code
                key={item}
                style={{
                  border: '0.5px solid #e6deca',
                  borderRadius: 8,
                  padding: '6px 8px',
                  color: '#5c543f',
                  fontSize: 11,
                  lineHeight: 1.4,
                  background: '#fbfbf7',
                  overflowWrap: 'anywhere',
                }}
              >
                {item}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacket')
  const summaryItems = [
    { key: 'slots', value: '5', tone: 'warn' as const },
    { key: 'filled', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
    { key: 'payload', value: '禁收', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-board">
      <div style={{ ...band, padding: 16, background: '#f6fbf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#586962', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #d8e8df', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#72827a' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#586962', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(168px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketSlots.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 158,
                      border: '0.5px solid #d4e6dc',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('slotLabel')} {item.slot}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#586962', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eaf5ef', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <FileWarning size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#586962', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d0e2d8',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#445149',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketPreflightOutcomeBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketPreflightOutcomes')
  const summaryItems = [
    { key: 'lanes', value: '6', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'quarantine', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-preflight-outcome-board">
      <div style={{ ...band, padding: 16, background: '#fbfaf4' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#686355', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #e6e1d4', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#817b6d' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#686355', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(172px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketPreflightOutcomes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #e2ddcf',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('laneLabel')} {item.lane}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#686355', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f1eddf', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <AlertTriangle size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#686355', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketPreflightOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #ddd7c7',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4d493f',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketSupplementPathBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketSupplementPath')
  const summaryItems = [
    { key: 'steps', value: '5', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'submitted', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-supplement-path-board">
      <div style={{ ...band, padding: 16, background: '#f6fbf8' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5f6b64', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #d8e8df', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#6d7b72' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#5f6b64', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(178px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketSupplementPathSteps.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #d5e6dc',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('stepLabel')} {item.step}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5f6b64', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#e7f3ec', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5f6b64', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketSupplementPathBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #cfe1d7',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#405149',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketSupplementPreReviewBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketSupplementPreReview')
  const summaryItems = [
    { key: 'checks', value: '6', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'locked' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'queue', value: 'false', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-supplement-pre-review-board">
      <div style={{ ...band, padding: 16, background: '#f8faf7' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#606a5f', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #dce6d7', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#737e6e' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#606a5f', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(178px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketSupplementPreReviewChecks.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #d8e4d4',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('checkLabel')} {item.check}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#606a5f', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#edf4e9', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ShieldCheck size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#606a5f', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketSupplementPreReviewBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d5e3d1',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#445241',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketSupplementPreReviewOutcomeBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketSupplementPreReviewOutcomes')
  const summaryItems = [
    { key: 'lanes', value: '6', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'returned', value: '0', tone: 'locked' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-supplement-pre-review-outcome-board">
      <div style={{ ...band, padding: 16, background: '#fbfaf4' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#665f50', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #e5dfcf', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#827965' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#665f50', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(178px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketSupplementPreReviewOutcomeLanes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #e1dccd',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('outcomeLabel')} {item.lane}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#665f50', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f1eddf', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <AlertTriangle size={16} color={toneColors.warn} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#665f50', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketSupplementPreReviewOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #ddd6c6',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#514b3e',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketReviewerAssignmentPreparationBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketReviewerAssignmentPreparation')
  const summaryItems = [
    { key: 'packets', value: '6', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'candidates', value: '0', tone: 'locked' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-reviewer-assignment-preparation-board">
      <div style={{ ...band, padding: 16, background: '#f7f9fb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#5f6670', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #dce3ec', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#737b86' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#5f6670', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(178px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketReviewerAssignmentPreparationPackets.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #d9e1ec',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('packetLabel')} {item.packet}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#5f6670', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#edf1f6', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ClipboardCheck size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#5f6670', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketReviewerAssignmentPreparationBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d5dde8',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#48515b',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketReviewerAssignmentPreflightBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketReviewerAssignmentPreflight')
  const summaryItems = [
    { key: 'checks', value: '6', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'locked' as const },
    { key: 'ready', value: '0', tone: 'locked' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-reviewer-assignment-preflight-board">
      <div style={{ ...band, padding: 16, background: '#faf8fb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#68616e', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #e4ddea', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#7d7385' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#68616e', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(178px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightChecks.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #e1d9e8',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('checkLabel')} {item.check}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#68616e', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#f0ecf3', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ListChecks size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#68616e', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #ded6e6',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#504858',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function IwoooSFirstUnlockEvidencePacketReviewerAssignmentPreflightOutcomeBoard() {
  const t = useTranslations('iwooos.firstUnlockEvidencePacketReviewerAssignmentPreflightOutcome')
  const summaryItems = [
    { key: 'outcomes', value: '6', tone: 'warn' as const },
    { key: 'candidates', value: '0', tone: 'locked' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'audit', value: '0', tone: 'locked' as const },
  ]
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-first-unlock-evidence-packet-reviewer-assignment-preflight-outcome-board">
      <div style={{ ...band, padding: 16, background: '#f8f9f5' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 16 }}>
          <div>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 17, margin: 0 }}>{t('title')}</h2>
              <p style={{ fontSize: 12, color: '#60665e', margin: '6px 0 0', lineHeight: 1.55, ...textWrap }}>
                {t('subtitle')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(126px, 1fr))', gap: 8, marginBottom: 14 }}>
              {summaryItems.map(item => (
                <div key={item.key} style={{ border: '0.5px solid #dfe6d9', borderRadius: 8, padding: 12, background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#71786f' }}>{t(`summary.${item.key}.label` as never)}</span>
                    <ToneDot tone={item.tone} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.1, marginTop: 8, color: '#141413' }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#60665e', lineHeight: 1.45, margin: '8px 0 0', ...textWrap }}>
                    {t(`summary.${item.key}.detail` as never)}
                  </p>
                </div>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(178px, 1fr))', gap: 10 }}>
              {iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightOutcomeLanes.map(item => {
                const Icon = item.icon
                return (
                  <div
                    key={item.key}
                    style={{
                      display: 'grid',
                      gap: 8,
                      minHeight: 154,
                      border: '0.5px solid #dfe6d9',
                      borderRadius: 8,
                      background: '#fff',
                      padding: 13,
                      color: '#141413',
                      ...textWrap,
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ color: toneColors[item.tone], fontSize: 12, fontWeight: 700 }}>
                        {t('outcomeLabel')} {item.outcome}
                      </span>
                      <Icon size={18} color={toneColors[item.tone]} />
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.2 }}>
                      {item.state}
                    </div>
                    <h3 style={{ fontSize: 14, margin: 0, color: '#141413', lineHeight: 1.3 }}>
                      {t(`items.${item.key}.title` as never)}
                    </h3>
                    <p style={{ fontSize: 11, color: '#60665e', lineHeight: 1.5, margin: 0, ...textWrap }}>
                      {t(`items.${item.key}.body` as never)}
                    </p>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ ...band, padding: 14, background: '#eef3e9', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <ClipboardCheck size={16} color={toneColors.locked} />
              <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
            </div>
            <p style={{ fontSize: 12, color: '#60665e', lineHeight: 1.55, margin: '0 0 10px', ...textWrap }}>
              {t('boundaryIntro')}
            </p>
            <div style={{ display: 'grid', gap: 7 }}>
              {iwooosFirstUnlockEvidencePacketReviewerAssignmentPreflightOutcomeBoundaries.map(item => (
                <span
                  key={item}
                  style={{
                    border: '0.5px solid #d6dfcf',
                    borderRadius: 8,
                    padding: '7px 9px',
                    color: '#4d5748',
                    fontSize: 11,
                    lineHeight: 1.4,
                    background: '#fff',
                    overflowWrap: 'anywhere',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function PillarCard({ item }: { item: Pillar }) {
  const t = useTranslations('iwooos.pillars')
  const Icon = item.icon
  return (
    <div style={{ ...band, padding: 16, minHeight: 154 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <Icon size={19} color={toneColors[item.tone]} />
        <span style={{ color: toneColors[item.tone], fontSize: 11, fontWeight: 700 }}>
          {t(`${item.key}.state` as never)}
        </span>
      </div>
      <h2 style={{ fontSize: 15, margin: '14px 0 6px', color: '#141413' }}>{t(`${item.key}.title` as never)}</h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>{t(`${item.key}.body` as never)}</p>
    </div>
  )
}

function LaneRow({ item, index }: { item: Lane; index: number }) {
  const t = useTranslations('iwooos.lanes')
  const tone = item.mode === 'observe' ? 'locked' : 'warn'
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '42px minmax(0, 1fr) 92px',
        alignItems: 'center',
        gap: 12,
        padding: '10px 12px',
        borderBottom: index === nonBlockingLanes.length - 1 ? 'none' : '0.5px solid #eee9dd',
      }}
    >
      <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
      <div>
        <div style={{ fontSize: 13, fontWeight: 700 }}>{t(`${item.key}.title` as never)}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', marginTop: 3 }}>{t(`${item.key}.body` as never)}</div>
      </div>
      <div
        style={{
          justifySelf: 'end',
          border: `0.5px solid ${toneColors[tone]}`,
          color: toneColors[tone],
          borderRadius: 8,
          padding: '4px 8px',
          fontSize: 11,
          fontWeight: 700,
          textTransform: 'uppercase',
        }}
      >
        {item.mode}
      </div>
    </div>
  )
}

function SurfaceCard({ item, locale }: { item: SecuritySurface; locale: string }) {
  const t = useTranslations('iwooos.existingSurfaces')
  const Icon = item.icon
  return (
    <Link
      href={`/${locale}${item.href}`}
      style={{
        ...band,
        minHeight: 170,
        minWidth: 0,
        padding: 16,
        color: 'inherit',
        textDecoration: 'none',
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <Icon size={18} color={toneColors[item.tone]} />
        <span style={{ minWidth: 0, fontSize: 11, color: '#87867f', overflowWrap: 'anywhere' }}>{item.href}</span>
      </div>
      <div style={{ minWidth: 0 }}>
        <h2 style={{ fontSize: 14, margin: 0, color: '#141413' }}>
          {t(`items.${item.key}.title` as never)}
        </h2>
        <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: '7px 0 0' }}>
          {t(`items.${item.key}.body` as never)}
        </p>
      </div>
      <div style={{ minWidth: 0, marginTop: 'auto', display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('sourceLabel')}</div>
        <div style={{ fontSize: 11, color: '#4f4c45', lineHeight: 1.45, overflowWrap: 'anywhere' }}>
          {t(`items.${item.key}.source` as never)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11, color: toneColors[item.tone] }}>
          <ToneDot tone={item.tone} />
          {t('mode')}
        </div>
      </div>
    </Link>
  )
}

function SurfaceConnectionCard({ item, locale }: { item: SurfaceConnectionStatus; locale: string }) {
  const t = useTranslations('iwooos.surfaceConnections')
  const Icon = item.icon
  return (
    <Link
      data-testid={item.key === 'codeReview' ? 'iwooos-code-review-handoff-surface-card' : undefined}
      href={`/${locale}${item.href}`}
      style={{
        ...band,
        minHeight: 150,
        minWidth: 0,
        padding: 14,
        color: 'inherit',
        textDecoration: 'none',
        display: 'grid',
        gap: 10,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <Icon size={17} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 12, fontWeight: 700, color: '#141413', minWidth: 0 }}>
            {t(`items.${item.key}.title` as never)}
          </span>
        </div>
        <span style={{ fontSize: 10, color: '#87867f', overflowWrap: 'anywhere', textAlign: 'right' }}>
          {item.href}
        </span>
      </div>
      <div
        style={{
          width: 'fit-content',
          maxWidth: '100%',
          border: `0.5px solid ${toneColors[item.tone]}`,
          borderRadius: 8,
          color: toneColors[item.tone],
          padding: '4px 8px',
          fontSize: 11,
          fontWeight: 700,
          overflowWrap: 'anywhere',
        }}
      >
        {t(`states.${item.state}` as never)}
      </div>
      <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7, fontSize: 11, color: '#4f4c45', lineHeight: 1.45 }}>
        <ToneDot tone={item.tone} />
        <span>{t(`items.${item.key}.boundary` as never)}</span>
      </div>
    </Link>
  )
}

function AwoooPCoverageStatusCard({ item, locale }: { item: AwoooPCoverageStatus; locale: string }) {
  const t = useTranslations('iwooos.awooopCoverage')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <Link
      href={`/${locale}${item.href}`}
      style={{
        ...band,
        minHeight: 196,
        minWidth: 0,
        padding: 16,
        color: 'inherit',
        textDecoration: 'none',
        display: 'grid',
        gap: 10,
        ...textWrap,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <Icon size={17} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 12, fontWeight: 700, color: '#141413', minWidth: 0 }}>
            {t(`items.${item.key}.title` as never)}
          </span>
        </div>
        <span style={{ fontSize: 10, color: toneColors[item.tone], textAlign: 'right' }}>
          {item.stage}
        </span>
      </div>
      <div style={{ display: 'grid', gap: 4 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('routeLabel')}</span>
        <span style={{ fontSize: 12, color: '#4f4c45', lineHeight: 1.45, ...textWrap }}>{item.route}</span>
      </div>
      <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ display: 'grid', gap: 4, alignSelf: 'end' }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('boundaryLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.boundary` as never)}
        </span>
      </div>
    </Link>
  )
}

function AwoooPCoverageBoard({ locale }: { locale: string }) {
  const t = useTranslations('iwooos.awooopCoverage')
  const summaryItems = [
    { key: 'routes', value: '8', tone: 'steady' as const },
    { key: 'covered', value: '8', tone: 'steady' as const },
    { key: 'runtimeGates', value: '0', tone: 'locked' as const },
    { key: 'actions', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-awooop-coverage-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 94 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, lineHeight: 1, marginTop: 8 }}>{item.value}</div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '7px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {awooopCoverageStatuses.map(item => (
          <AwoooPCoverageStatusCard key={item.key} item={item} locale={locale} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <Lock size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('guardTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {awooopCoverageBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function SecurityConvergenceStepCard({ item }: { item: SecurityConvergenceStep }) {
  const t = useTranslations('iwooos.securityConvergenceRoadmap')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 194, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{item.step}</span>
        </div>
        <span style={{ fontSize: 24, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1 }}>
          {item.value}
        </span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('movementLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.movement` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function SecurityConvergenceRoadmapBoard() {
  const t = useTranslations('iwooos.securityConvergenceRoadmap')
  const summaryItems = [
    { key: 'mode', value: t('summary.mode.value'), tone: 'steady' as const },
    { key: 'coverage', value: '8/8', tone: 'steady' as const },
    { key: 'accepted', value: '0', tone: 'warn' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-security-convergence-roadmap">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {securityConvergenceSteps.map(item => (
          <SecurityConvergenceStepCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {securityConvergenceBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseCollectionPacketCard({ item }: { item: OwnerResponseCollectionPacket }) {
  const t = useTranslations('iwooos.ownerResponseCollectionBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 194, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('movementLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.movement` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseCollectionBoard() {
  const t = useTranslations('iwooos.ownerResponseCollectionBoard')
  const summaryItems = [
    { key: 'packets', value: '4', tone: 'warn' as const },
    { key: 'templates', value: '22', tone: 'warn' as const },
    { key: 'received', value: '0', tone: 'locked' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-collection-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseCollectionPackets.map(item => (
          <OwnerResponseCollectionPacketCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseCollectionBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseIntakeSafetyRuleCard({ item }: { item: OwnerResponseIntakeSafetyRule }) {
  const t = useTranslations('iwooos.ownerResponseIntakeSafetyBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 190, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('ruleLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.rule` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseIntakeSafetyBoard() {
  const t = useTranslations('iwooos.ownerResponseIntakeSafetyBoard')
  const summaryItems = [
    { key: 'rules', value: '6', tone: 'warn' as const },
    { key: 'ingested', value: '0', tone: 'locked' as const },
    { key: 'quarantined', value: '0', tone: 'locked' as const },
    { key: 'rejected', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-intake-safety-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseIntakeSafetyRules.map(item => (
          <OwnerResponseIntakeSafetyRuleCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseIntakeSafetyBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseReviewOutcomeLaneCard({ item }: { item: OwnerResponseReviewOutcomeLane }) {
  const t = useTranslations('iwooos.ownerResponseReviewOutcomeBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 190, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('resultLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.result` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseReviewOutcomeBoard() {
  const t = useTranslations('iwooos.ownerResponseReviewOutcomeBoard')
  const summaryItems = [
    { key: 'lanes', value: '7', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'warn' as const },
    { key: 'accepted', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-review-outcome-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseReviewOutcomeLanes.map(item => (
          <OwnerResponseReviewOutcomeLaneCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseReviewOutcomeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseHumanDecisionQueueCard({ item }: { item: OwnerResponseHumanDecisionQueueItem }) {
  const t = useTranslations('iwooos.ownerResponseHumanDecisionQueueBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 190, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('queueLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.queue}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('prepLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.prep` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseHumanDecisionQueueBoard() {
  const t = useTranslations('iwooos.ownerResponseHumanDecisionQueueBoard')
  const summaryItems = [
    { key: 'queueItems', value: '6', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'warn' as const },
    { key: 'approved', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-human-decision-queue-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseHumanDecisionQueueItems.map(item => (
          <OwnerResponseHumanDecisionQueueCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseHumanDecisionQueueBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseDecisionRecordDraftGuardCard({ item }: { item: OwnerResponseDecisionRecordDraftGuardItem }) {
  const t = useTranslations('iwooos.ownerResponseDecisionRecordDraftGuardBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 190, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('guardItemLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.guard}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('draftLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.draft` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseDecisionRecordDraftGuardBoard() {
  const t = useTranslations('iwooos.ownerResponseDecisionRecordDraftGuardBoard')
  const summaryItems = [
    { key: 'guards', value: '6', tone: 'warn' as const },
    { key: 'drafts', value: '0', tone: 'warn' as const },
    { key: 'formalRecords', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-decision-record-draft-guard-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseDecisionRecordDraftGuardItems.map(item => (
          <OwnerResponseDecisionRecordDraftGuardCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseDecisionRecordDraftGuardBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordCandidatePreflightCard({
  item,
}: {
  item: OwnerResponseFormalRecordCandidatePreflightItem
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordCandidatePreflightBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 196, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkItemLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('preflightLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.preflight` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordCandidatePreflightBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordCandidatePreflightBoard')
  const summaryItems = [
    { key: 'checks', value: '7', tone: 'warn' as const },
    { key: 'candidates', value: '0', tone: 'warn' as const },
    { key: 'formalRecords', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-candidate-preflight-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordCandidatePreflightItems.map(item => (
          <OwnerResponseFormalRecordCandidatePreflightCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordCandidatePreflightBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordCandidateOutcomeCard({
  item,
}: {
  item: OwnerResponseFormalRecordCandidateOutcomeLane
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordCandidateOutcomeBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('resultLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.result` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordCandidateOutcomeBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordCandidateOutcomeBoard')
  const summaryItems = [
    { key: 'lanes', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'steady' as const },
    { key: 'promoted', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-candidate-outcome-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordCandidateOutcomeLanes.map(item => (
          <OwnerResponseFormalRecordCandidateOutcomeCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordCandidateOutcomeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerHandoffCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerHandoffPacket
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('handoffLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.handoff` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerHandoffBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffBoard')
  const summaryItems = [
    { key: 'packets', value: '7', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'warn' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-handoff-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerHandoffPackets.map(item => (
          <OwnerResponseFormalRecordOwnerHandoffCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerHandoffBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerHandoffReviewCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerHandoffReviewItem
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffReviewBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('reviewLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.review` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerHandoffReviewBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffReviewBoard')
  const summaryItems = [
    { key: 'checks', value: '7', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'warn' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-handoff-review-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerHandoffReviewItems.map(item => (
          <OwnerResponseFormalRecordOwnerHandoffReviewCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerHandoffReviewBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerHandoffReviewOutcomeCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerHandoffReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffReviewOutcomeBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('resultLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.result` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerHandoffReviewOutcomeBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerHandoffReviewOutcomeBoard')
  const summaryItems = [
    { key: 'lanes', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'steady' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-handoff-review-outcome-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerHandoffReviewOutcomeLanes.map(item => (
          <OwnerResponseFormalRecordOwnerHandoffReviewOutcomeCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerHandoffReviewOutcomeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerReviewPreparationCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerReviewPreparationPacket
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerReviewPreparationBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('prepareLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.prepare` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerReviewPreparationBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerReviewPreparationBoard')
  const summaryItems = [
    { key: 'packets', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'warn' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-review-preparation-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerReviewPreparationPackets.map(item => (
          <OwnerResponseFormalRecordOwnerReviewPreparationCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerReviewPreparationBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerReviewChecklistCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerReviewChecklistItem
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerReviewChecklistBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('reviewLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.review` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerReviewChecklistBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerReviewChecklistBoard')
  const summaryItems = [
    { key: 'checks', value: '8', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'warn' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-review-checklist-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerReviewChecklistItems.map(item => (
          <OwnerResponseFormalRecordOwnerReviewChecklistCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerReviewChecklistBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerReviewOutcomeCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerReviewOutcomeBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('resultLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.result` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerReviewOutcomeBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerReviewOutcomeBoard')
  const summaryItems = [
    { key: 'lanes', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'steady' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section style={{ marginBottom: 14 }} data-testid="iwooos-owner-response-formal-record-owner-review-outcome-board">
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerReviewOutcomeLanes.map(item => (
          <OwnerResponseFormalRecordOwnerReviewOutcomeCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerReviewOutcomeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentPreparationCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerAssignmentPreparationPacket
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentPreparationBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('preparationLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.preparation` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentPreparationBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentPreparationBoard')
  const summaryItems = [
    { key: 'packets', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'steady' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section
      style={{ marginBottom: 14 }}
      data-testid="iwooos-owner-response-formal-record-owner-assignment-preparation-board"
    >
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerAssignmentPreparationPackets.map(item => (
          <OwnerResponseFormalRecordOwnerAssignmentPreparationCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerAssignmentPreparationBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentChecklistCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerAssignmentChecklistItem
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentChecklistBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('confirmationLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.confirmation` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentChecklistBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentChecklistBoard')
  const summaryItems = [
    { key: 'checks', value: '8', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'steady' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section
      style={{ marginBottom: 14 }}
      data-testid="iwooos-owner-response-formal-record-owner-assignment-checklist-board"
    >
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerAssignmentChecklistItems.map(item => (
          <OwnerResponseFormalRecordOwnerAssignmentChecklistCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerAssignmentChecklistBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentOutcomeCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerAssignmentOutcomeLane
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentOutcomeBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.lane}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('resultLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.result` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentOutcomeBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentOutcomeBoard')
  const summaryItems = [
    { key: 'lanes', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'steady' as const },
    { key: 'assigned', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section
      style={{ marginBottom: 14 }}
      data-testid="iwooos-owner-response-formal-record-owner-assignment-outcome-board"
    >
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerAssignmentOutcomeLanes.map(item => (
          <OwnerResponseFormalRecordOwnerAssignmentOutcomeCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerAssignmentOutcomeBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationPacket
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentDecisionPreparationBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.packet}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('requirementLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.requirement` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentDecisionPreparationBoard')
  const summaryItems = [
    { key: 'packets', value: '8', tone: 'warn' as const },
    { key: 'ready', value: '0', tone: 'steady' as const },
    { key: 'decisions', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section
      style={{ marginBottom: 14 }}
      data-testid="iwooos-owner-response-formal-record-owner-assignment-decision-preparation-board"
    >
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerAssignmentDecisionPreparationPackets.map(item => (
          <OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerAssignmentDecisionPreparationBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistCard({
  item,
}: {
  item: OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistItem
}) {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentDecisionChecklistBoard')
  const Icon = item.icon
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
  return (
    <div style={{ ...band, minHeight: 184, padding: 16, ...textWrap }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
          <Icon size={18} color={toneColors[item.tone]} style={{ flex: '0 0 auto' }} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: toneColors[item.tone] }}>{item.check}</span>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: toneColors[item.tone], marginTop: 12, lineHeight: 1 }}>
        {item.value}
      </div>
      <h2 style={{ fontSize: 14, margin: '10px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0, ...textWrap }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>{t('confirmationLabel')}</span>
        <span style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.confirmation` as never)}
        </span>
        <span style={{ fontSize: 11, color: '#87867f', marginTop: 4 }}>{t('guardLabel')}</span>
        <span style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, ...textWrap }}>
          {t(`items.${item.key}.guard` as never)}
        </span>
      </div>
    </div>
  )
}

function OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistBoard() {
  const t = useTranslations('iwooos.ownerResponseFormalRecordOwnerAssignmentDecisionChecklistBoard')
  const summaryItems = [
    { key: 'checks', value: '8', tone: 'warn' as const },
    { key: 'passed', value: '0', tone: 'steady' as const },
    { key: 'decisions', value: '0', tone: 'locked' as const },
    { key: 'runtime', value: '0', tone: 'locked' as const },
  ]
  return (
    <section
      style={{ marginBottom: 14 }}
      data-testid="iwooos-owner-response-formal-record-owner-assignment-decision-checklist-board"
    >
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 16, margin: 0 }}>{t('title')}</h2>
        <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
          {t('subtitle')}
        </p>
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: 10,
          marginBottom: 12,
        }}
      >
        {summaryItems.map(item => (
          <div key={item.key} style={{ ...band, padding: 14, minHeight: 96 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontSize: 11, color: '#87867f' }}>{t(`summary.${item.key}.label` as never)}</span>
              <ToneDot tone={item.tone} />
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1, marginTop: 9, color: '#141413' }}>
              {item.value}
            </div>
            <p style={{ fontSize: 11, color: '#6f6d66', lineHeight: 1.45, margin: '8px 0 0' }}>
              {t(`summary.${item.key}.detail` as never)}
            </p>
          </div>
        ))}
      </div>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 12,
        }}
      >
        {ownerResponseFormalRecordOwnerAssignmentDecisionChecklistItems.map(item => (
          <OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistCard key={item.key} item={item} />
        ))}
      </div>
      <div style={{ ...band, marginTop: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <ShieldCheck size={16} color={toneColors.locked} />
          <h3 style={{ fontSize: 14, margin: 0 }}>{t('boundaryTitle')}</h3>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
            gap: 7,
          }}
        >
          {ownerResponseFormalRecordOwnerAssignmentDecisionChecklistBoundaries.map(item => (
            <span
              key={item}
              style={{
                border: '0.5px solid #eee9dd',
                borderRadius: 8,
                padding: '7px 9px',
                color: '#4f4c45',
                fontSize: 11,
                lineHeight: 1.4,
                overflowWrap: 'anywhere',
              }}
            >
              {item}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

function CoverageCard({ item }: { item: CoverageGroup }) {
  const t = useTranslations('iwooos.coverage')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 154, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <Icon size={18} color={toneColors[item.tone]} />
        <span style={{ fontSize: 24, fontWeight: 700, color: toneColors[item.tone] }}>{item.count}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>{t(`groups.${item.key}.title` as never)}</h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`groups.${item.key}.body` as never)}
      </p>
      <div style={{ fontSize: 11, color: '#87867f', marginTop: 10, lineHeight: 1.45, overflowWrap: 'anywhere' }}>
        {item.surfaces}
      </div>
    </div>
  )
}

function ConflictRow({ item, index }: { item: ConflictControl; index: number }) {
  const t = useTranslations('iwooos.coverage.conflicts')
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '34px minmax(0, 1fr)',
        gap: 10,
        alignItems: 'start',
        padding: '10px 0',
        borderBottom: index === conflictControls.length - 1 ? 'none' : '0.5px solid #eee9dd',
      }}
    >
      <ToneDot tone={item.tone} />
      <div>
        <div style={{ fontSize: 13, fontWeight: 700, color: '#141413' }}>{t(`${item.key}.title` as never)}</div>
        <div style={{ fontSize: 11, color: '#6f6d66', marginTop: 3, lineHeight: 1.45 }}>
          {t(`${item.key}.body` as never)}
        </div>
      </div>
    </div>
  )
}

function JourneyStepCard({ item, index }: { item: JourneyStep; index: number }) {
  const t = useTranslations('iwooos.journey')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 168, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <Icon size={18} color={toneColors[item.tone]} />
        <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>{t(`steps.${item.key}.title` as never)}</h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`steps.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('outputLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`steps.${item.key}.output` as never)}
        </div>
      </div>
    </div>
  )
}

function EvidenceReadinessCard({ item, index }: { item: EvidenceReadinessItem; index: number }) {
  const t = useTranslations('iwooos.evidenceReadiness')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 176, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{item.lane}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('unlockLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.unlock` as never)}
        </div>
      </div>
    </div>
  )
}

function HostCoverageCard({ item, index }: { item: HostCoverageItem; index: number }) {
  const t = useTranslations('iwooos.hostCoverage')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 176, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{item.address}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('stateLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.state` as never)}
        </div>
      </div>
    </div>
  )
}

function KaliMaintenanceReadinessBoard() {
  const t = useTranslations('iwooos.kaliMaintenanceReadiness')
  const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }

  return (
    <section
      style={{ marginBottom: 0, maxWidth: '100%', overflow: 'hidden' }}
      data-testid="iwooos-kali-maintenance-readiness-board"
    >
      <div style={{ ...band, padding: 16, background: '#fffaf7', borderColor: '#e6c8b8' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 290px), 1fr))',
            gap: 14,
            alignItems: 'start',
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <FileWarning size={18} color={toneColors.warn} />
              <span style={{ fontSize: 12, color: '#6f4f37', fontWeight: 700 }}>{t('eyebrow')}</span>
            </div>
            <h2 style={{ fontSize: 17, lineHeight: 1.25, margin: 0, color: '#141413' }}>{t('title')}</h2>
            <p style={{ fontSize: 12, color: '#6f4f37', lineHeight: 1.6, margin: '8px 0 0', ...textWrap }}>
              {t('subtitle')}
            </p>
          </div>

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(135px, 1fr))',
              gap: 8,
              minWidth: 0,
            }}
          >
            {kaliMaintenanceReadinessItems.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  style={{
                    border: '0.5px solid #e6c8b8',
                    borderRadius: 8,
                    background: '#fff',
                    padding: 11,
                    minWidth: 0,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 11, color: '#8a6f5c', ...textWrap }}>{t(`items.${item.key}.label` as never)}</span>
                    <Icon size={15} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: toneColors[item.tone], lineHeight: 1.1, marginTop: 7 }}>
                    {item.value}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: '7px 0 0', ...textWrap }}>
                    {t(`items.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <div
          style={{
            marginTop: 12,
            borderTop: '0.5px solid #e6c8b8',
            paddingTop: 12,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))',
            gap: 10,
          }}
        >
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 11, color: '#8a6f5c', marginBottom: 4 }}>{t('maintenanceGateLabel')}</div>
            <div style={{ fontSize: 12, color: '#6f4f37', lineHeight: 1.55, ...textWrap }}>
              {t('maintenanceGate')}
            </div>
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 11, color: '#8a6f5c', marginBottom: 4 }}>{t('nextEvidenceLabel')}</div>
            <div style={{ fontSize: 12, color: '#6f4f37', lineHeight: 1.55, ...textWrap }}>
              {t('nextEvidence')}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 12 }}>
          <div style={{ fontSize: 11, color: '#8a6f5c', marginBottom: 8 }}>{t('runwayLabel')}</div>
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 145px), 1fr))',
              gap: 8,
            }}
          >
            {kaliMaintenanceRunwaySteps.map(item => {
              const Icon = item.icon
              return (
                <div
                  key={item.key}
                  style={{
                    border: '0.5px solid #e6c8b8',
                    borderRadius: 8,
                    background: '#fff',
                    padding: 10,
                    minWidth: 0,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <span style={{ fontSize: 10, color: '#8a6f5c', fontWeight: 700 }}>{item.step}</span>
                    <Icon size={14} color={toneColors[item.tone]} />
                  </div>
                  <div style={{ fontSize: 12, color: '#141413', fontWeight: 700, marginTop: 7, ...textWrap }}>
                    {t(`runway.${item.key}.title` as never)}
                  </div>
                  <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.45, margin: '6px 0 0', ...textWrap }}>
                    {t(`runway.${item.key}.detail` as never)}
                  </p>
                </div>
              )
            })}
          </div>
        </div>

        <details
          style={{
            marginTop: 12,
            border: '0.5px solid #e6c8b8',
            borderRadius: 8,
            background: '#fff',
            padding: '8px 10px',
          }}
        >
          <summary style={{ cursor: 'pointer', fontSize: 12, fontWeight: 700, color: '#6f4f37' }}>
            {t('boundaryTitle')}
          </summary>
          <p style={{ fontSize: 11, color: '#6f4f37', lineHeight: 1.5, margin: '8px 0', ...textWrap }}>
            {t('boundaryIntro')}
          </p>
          <div style={{ display: 'grid', gap: 5 }}>
            {kaliMaintenanceReadinessBoundaries.map(boundary => (
              <code
                key={boundary}
                style={{
                  display: 'block',
                  fontSize: 10,
                  color: '#6f4f37',
                  background: '#fffaf7',
                  border: '0.5px solid #f0d8ca',
                  borderRadius: 6,
                  padding: '5px 7px',
                  ...textWrap,
                }}
              >
                {boundary}
              </code>
            ))}
          </div>
        </details>
      </div>
    </section>
  )
}

function HostActionGateCard({ item, index }: { item: HostActionGateItem; index: number }) {
  const t = useTranslations('iwooos.hostActionGates')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 180, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{item.gate}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('gateLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.gate` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceReadinessCard({ item, index }: { item: HostEvidenceReadinessItem; index: number }) {
  const t = useTranslations('iwooos.hostEvidenceReadiness')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 184, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{item.gate}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{String(index + 1).padStart(2, '0')}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('evidenceLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.evidence` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceCollectionCard({ item }: { item: HostEvidenceCollectionStep }) {
  const t = useTranslations('iwooos.hostEvidenceCollection')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('stepLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.step}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('dependencyLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.dependency` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceIntakeCard({ item }: { item: HostEvidenceIntakeCheck }) {
  const t = useTranslations('iwooos.hostEvidenceIntake')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('rejectLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.reject` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceReviewOutcomeCard({ item }: { item: HostEvidenceReviewOutcomeLane }) {
  const t = useTranslations('iwooos.hostEvidenceReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceReviewHandoffCard({ item }: { item: HostEvidenceReviewHandoffPacket }) {
  const t = useTranslations('iwooos.hostEvidenceReviewHandoff')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('requiredLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.required` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceReviewerChecklistCard({ item }: { item: HostEvidenceReviewerChecklistItem }) {
  const t = useTranslations('iwooos.hostEvidenceReviewerChecklist')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('verifyLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.verify` as never)}
        </div>
      </div>
    </div>
  )
}

function HostEvidenceReviewerOutcomeCard({ item }: { item: HostEvidenceReviewerOutcomeLane }) {
  const t = useTranslations('iwooos.hostEvidenceReviewerOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionCandidateCard({ item }: { item: HostOwnerDecisionCandidatePacket }) {
  const t = useTranslations('iwooos.hostOwnerDecisionCandidates')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('decisionLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.decision` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionReviewChecklistCard({ item }: { item: HostOwnerDecisionReviewChecklistItem }) {
  const t = useTranslations('iwooos.hostOwnerDecisionReviewChecklist')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionReviewOutcomeCard({ item }: { item: HostOwnerDecisionReviewOutcomeLane }) {
  const t = useTranslations('iwooos.hostOwnerDecisionReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordDraftCard({ item }: { item: HostOwnerDecisionRecordDraftPacket }) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordDrafts')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('metadataLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.metadata` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordDraftReviewCard({ item }: { item: HostOwnerDecisionRecordDraftReviewItem }) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordDraftReview')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordDraftReviewOutcomeCard({
  item,
}: {
  item: HostOwnerDecisionRecordDraftReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordDraftReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordWriteupCard({ item }: { item: HostOwnerDecisionRecordWriteupPacket }) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordWriteups')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('fieldLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.field` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordWriteupReviewCard({ item }: { item: HostOwnerDecisionRecordWriteupReviewItem }) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordWriteupReview')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordWriteupReviewOutcomeCard({
  item,
}: {
  item: HostOwnerDecisionRecordWriteupReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordWriteupReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordFormalCandidateCard({
  item,
}: {
  item: HostOwnerDecisionRecordFormalCandidatePacket
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordFormalCandidates')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('fieldLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.field` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordFormalCandidateReviewCard({
  item,
}: {
  item: HostOwnerDecisionRecordFormalCandidateReviewItem
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordFormalCandidateReview')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordFormalCandidateReviewOutcomeCard({
  item,
}: {
  item: HostOwnerDecisionRecordFormalCandidateReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordFormalCandidateReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordFormalRecordQueueCard({
  item,
}: {
  item: HostOwnerDecisionRecordFormalRecordQueuePacket
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordFormalRecordQueue')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('fieldLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.field` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordFormalRecordQueueReviewCard({
  item,
}: {
  item: HostOwnerDecisionRecordFormalRecordQueueReviewItem
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordFormalRecordQueueReview')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordFormalRecordQueueReviewOutcomeCard({
  item,
}: {
  item: HostOwnerDecisionRecordFormalRecordQueueReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordFormalRecordQueueReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanHandoffReadinessCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanHandoffReadinessPacket
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanHandoffReadiness')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanHandoffReadinessReviewCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanHandoffReadinessReviewItem
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanHandoffReadinessReview')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeLane
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePacketCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePacket
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePackets')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistItem
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklist')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeLane
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomes')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('laneLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.lane}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('nextLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.next` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPacketCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPacket
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPackets')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('packetLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.packet}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

function HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistCard({
  item,
}: {
  item: HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistItem
}) {
  const t = useTranslations('iwooos.hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklist')
  const Icon = item.icon
  return (
    <div style={{ ...band, minHeight: 190, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon size={18} color={toneColors[item.tone]} />
          <span style={{ fontSize: 11, color: '#87867f' }}>{t('checkLabel')}</span>
        </div>
        <span style={{ fontSize: 11, color: '#9b978b' }}>{item.check}</span>
      </div>
      <h2 style={{ fontSize: 14, margin: '12px 0 6px', color: '#141413' }}>
        {t(`items.${item.key}.title` as never)}
      </h2>
      <p style={{ fontSize: 12, lineHeight: 1.55, color: '#6f6d66', margin: 0 }}>
        {t(`items.${item.key}.body` as never)}
      </p>
      <div style={{ marginTop: 10, display: 'grid', gap: 5 }}>
        <div style={{ fontSize: 11, color: '#87867f' }}>{t('guardLabel')}</div>
        <div style={{ fontSize: 11, color: toneColors[item.tone], lineHeight: 1.45 }}>
          {t(`items.${item.key}.guard` as never)}
        </div>
      </div>
    </div>
  )
}

export default function IwoooSPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('iwooos')
  const ia = useTranslations('iwooos.informationArchitecture')

  return (
    <AppLayout locale={params.locale} fullBleed>
      <main style={page}>
        <section
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))',
            gap: 14,
            marginBottom: 14,
          }}
        >
          <div style={{ ...band, padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <ShieldCheck size={22} color="#1f7a4d" />
              <span style={{ fontSize: 12, color: '#6f6d66' }}>{t('eyebrow')}</span>
            </div>
            <h1 style={{ margin: 0, fontSize: 34, lineHeight: 1, color: '#141413' }}>{t('title')}</h1>
            <p style={{ margin: '10px 0 0', color: '#6f6d66', fontSize: 13, lineHeight: 1.6, maxWidth: 760 }}>
              {t('subtitle')}
            </p>
          </div>
          <div style={{ ...band, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6f6d66', fontSize: 12 }}>
              <Lock size={16} />
              {t('boundary.label')}
            </div>
            <div style={{ fontSize: 22, fontWeight: 700, color: '#141413', marginTop: 12 }}>{t('boundary.state')}</div>
            <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: '10px 0 0' }}>{t('boundary.detail')}</p>
          </div>
        </section>

        <IwoooSProgressIntegrityRibbon />
        <IwoooSExecutiveSnapshotBoard />
        <IwoooSAgentBountySecurityOnboardingBoard />
        <IwoooSRolloutRiskReadOnlyBoard />
        <IwoooSHighValueConfigControlCoverageBoard />
        <IwoooSPublicGatewayPreflightBoard />
        <IwoooSHighValueConfigOwnerPacketBoard />
        <IwoooSDomainTlsCertbotInventoryBoard />

        <IwoooSSectionGroup
          id="iwooos-first-layer-evidence"
          title={ia('firstLayerEvidence.title')}
          summary={ia('firstLayerEvidence.summary')}
        >
          <IwoooSFocusDeckBoard />
          <IwoooSFirstScreenDepthMapBoard />
          <IwoooSProgressEvidenceRailBoard />
          <IwoooSEvidenceUnlockQueueBoard />
          <IwoooSS49RequestDraftPackageBoard />
          <IwoooSS49RequestDraftDetailBoard />
          <IwoooSS49OwnerResponseIntakeBoard />
        </IwoooSSectionGroup>

        <IwoooSImmediateVisualMeshBoard />
        <IwoooSTopologyAtlasBoard />

        <IwoooSSectionGroup
          id="iwooos-decision-gate-visuals"
          title={ia('decisionGateVisuals.title')}
          summary={ia('decisionGateVisuals.summary')}
        >
          <IwoooSDecisionRunwayBoard />
          <IwoooSGateRadarBoard />
          <IwoooSCommandMapBoard />
          <IwoooSFirstProgressUnlockPathBoard />
        </IwoooSSectionGroup>
        <IwoooSVisualCommandDashboard />

        <IwoooSSectionGroup
          id="iwooos-scope-evidence-visuals"
          title={ia('scopeEvidenceVisuals.title')}
          summary={ia('scopeEvidenceVisuals.summary')}
        >
          <IwoooSProfessionalSecurityExperience />
          <IwoooSConcreteWorkSnapshot />
          <IwoooSGlobalSecurityMeshMatrixBoard />
          <IwoooSHostToolEvidenceChainBoard />
          <IwoooSVibeWorkSecurityOnboardingBoard />
        </IwoooSSectionGroup>

        <IwoooSSectionGroup
          title={ia('overview.title')}
          summary={ia('overview.summary')}
        >
          <IwoooSFastProgressSummary />

          <IwoooSAllProductCoverageSnapshotBoard />

          <section
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
              gap: 12,
            }}
          >
            {postureMetrics.map(item => <MetricCard key={item.key} item={item} />)}
          </section>

          <IwoooSStageCompletionReportBoard />

          <IwoooSOperatorNextTasksBoard />

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('progressHoldMovementGates.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('progressHoldMovementGates.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {progressHoldMovementGates.map(item => (
                <ProgressHoldMovementGateCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <HeadlineMovementAcceptanceGateBoard />

          <IwoooSProgressMovementSignalsBoard />

          <section
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
              gap: 14,
            }}
          >
            <div style={{ ...band, padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                <Clock3 size={16} color="#b66a2d" />
                <h2 style={{ fontSize: 15, margin: 0 }}>{t('nextGate.title')}</h2>
              </div>
              <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: 0 }}>{t('nextGate.body')}</p>
            </div>

            <div style={{ ...band, padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                <CheckCircle2 size={16} color="#1f7a4d" />
                <h2 style={{ fontSize: 15, margin: 0 }}>{t('evidence.title')}</h2>
              </div>
              <div style={{ display: 'grid', gap: 7 }}>
                {evidenceItems.map(item => (
                  <div key={item} style={{ fontSize: 11, color: '#6f6d66', wordBreak: 'break-word' }}>
                    {item}
                  </div>
                ))}
              </div>
            </div>

            <div style={{ ...band, padding: 16, borderColor: '#e6c8b8', background: '#fffaf7' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                <AlertTriangle size={16} color="#b66a2d" />
                <h2 style={{ fontSize: 15, margin: 0 }}>{t('blocked.title')}</h2>
              </div>
              <p style={{ fontSize: 12, color: '#6f6d66', lineHeight: 1.55, margin: 0 }}>{t('blocked.body')}</p>
            </div>
          </section>
        </IwoooSSectionGroup>

        <IwoooSSectionGroup title={ia('frontStage.title')} summary={ia('frontStage.summary')}>
          <SecurityComplianceFrontStageBoard />

          <FrontstageSecurityEntryRolesBoard locale={params.locale} />

          <section
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
              gap: 14,
            }}
          >
            <div>
              <div style={{ marginBottom: 14 }}>
                <h2 style={{ fontSize: 16, margin: 0 }}>{t('coverage.title')}</h2>
                <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                  {t('coverage.subtitle')}
                </p>
              </div>
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
                  gap: 12,
                }}
              >
                {coverageGroups.map(item => <CoverageCard key={item.key} item={item} />)}
              </div>
            </div>

            <div style={{ ...band, padding: 16 }}>
              <h2 style={{ fontSize: 15, margin: 0 }}>{t('coverage.conflicts.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 8px', lineHeight: 1.55 }}>
                {t('coverage.conflicts.subtitle')}
              </p>
              {conflictControls.map((item, index) => <ConflictRow key={item.key} item={item} index={index} />)}
            </div>
          </section>

          <section
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
              gap: 12,
            }}
          >
            {posturePillars.map(item => <PillarCard key={item.key} item={item} />)}
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('existingSurfaces.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('existingSurfaces.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {existingSecuritySurfaces.map(item => (
                <SurfaceCard key={item.key} item={item} locale={params.locale} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }} data-testid="iwooos-surface-connection-board">
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('surfaceConnections.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('surfaceConnections.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
                gap: 12,
              }}
            >
              {surfaceConnectionStatuses.map(item => (
                <SurfaceConnectionCard key={item.key} item={item} locale={params.locale} />
              ))}
            </div>
          </section>

          <AwoooPCoverageBoard locale={params.locale} />

          <SecurityConvergenceRoadmapBoard />
        </IwoooSSectionGroup>

        <IwoooSSectionGroup title={ia('progressPath.title')} summary={ia('progressPath.summary')}>
          <IwoooSLowFrictionRolloutLadderBoard />

          <IwoooSLowFrictionNextActionsBoard />

          <IwoooSConcreteSecurityWorkMapBoard />

          <IwoooSConcreteSecurityDeliveryChecklistBoard />

          <IwoooSConcreteSecurityBlockerResolutionBoard />

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('progressAcceleration.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('progressAcceleration.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {progressAccelerationLanes.map(item => (
                <ProgressAccelerationLaneCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
              gap: 14,
            }}
          >
            <div style={{ ...band, overflow: 'hidden' }}>
              <div style={{ padding: '14px 16px', borderBottom: '0.5px solid #e0ddd4' }}>
                <h2 style={{ fontSize: 15, margin: 0 }}>{t('lanes.title')}</h2>
                <p style={{ fontSize: 12, color: '#6f6d66', margin: '5px 0 0' }}>{t('lanes.subtitle')}</p>
              </div>
              {nonBlockingLanes.map((item, index) => <LaneRow key={item.key} item={item} index={index} />)}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('journey.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('journey.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))',
                gap: 12,
              }}
            >
              {journeySteps.map((item, index) => <JourneyStepCard key={item.key} item={item} index={index} />)}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('evidenceReadiness.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('evidenceReadiness.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {evidenceReadinessItems.map((item, index) => (
                <EvidenceReadinessCard key={item.key} item={item} index={index} />
              ))}
            </div>
          </section>

          <IwoooSFirstUnlockEvidencePacketBoard />

          <IwoooSFirstUnlockEvidencePacketPreflightOutcomeBoard />

          <IwoooSFirstUnlockEvidencePacketSupplementPathBoard />

          <IwoooSFirstUnlockEvidencePacketSupplementPreReviewBoard />

          <IwoooSFirstUnlockEvidencePacketSupplementPreReviewOutcomeBoard />

          <IwoooSFirstUnlockEvidencePacketReviewerAssignmentPreparationBoard />

          <IwoooSFirstUnlockEvidencePacketReviewerAssignmentPreflightBoard />

          <IwoooSFirstUnlockEvidencePacketReviewerAssignmentPreflightOutcomeBoard />
        </IwoooSSectionGroup>

        <IwoooSSectionGroup title={ia('ownerEvidence.title')} summary={ia('ownerEvidence.summary')}>
          <section
            id="iwooos-source-control-readiness-board"
            style={{ marginBottom: 0 }}
            data-testid="iwooos-source-control-readiness-board"
          >
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('sourceControlReadiness.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('sourceControlReadiness.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {sourceControlReadinessItems.map(item => (
                <SourceControlReadinessCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <S49OwnerResponseDispatchFlowBoard />

          <S49OwnerResponseWorkOrderBoard />

          <S49OwnerResponseEnvelopeBoard />

          <S49OwnerResponseEnvelopePreflightBoard />

          <S49OwnerResponseEnvelopePreflightOutcomeBoard />

          <S49OwnerResponseRequestDraftBoard />

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('ownerResponseNextActionFocus.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('ownerResponseNextActionFocus.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {ownerResponseNextActionFocusItems.map(item => (
                <OwnerResponseNextActionFocusCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('s49OwnerResponseRequestTemplates.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('s49OwnerResponseRequestTemplates.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {s49OwnerResponseRequestTemplates.map(item => (
                <S49OwnerResponseRequestTemplateCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('s49OwnerResponsePreflight.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('s49OwnerResponsePreflight.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {s49OwnerResponsePreflightChecks.map(item => (
                <S49OwnerResponsePreflightCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <OwnerResponseCollectionBoard />

          <OwnerResponseIntakeSafetyBoard />

          <OwnerResponseReviewOutcomeBoard />

          <OwnerResponseHumanDecisionQueueBoard />

          <OwnerResponseDecisionRecordDraftGuardBoard />

          <OwnerResponseFormalRecordCandidatePreflightBoard />

          <OwnerResponseFormalRecordCandidateOutcomeBoard />

          <OwnerResponseFormalRecordOwnerHandoffBoard />

          <OwnerResponseFormalRecordOwnerHandoffReviewBoard />

          <OwnerResponseFormalRecordOwnerHandoffReviewOutcomeBoard />

          <OwnerResponseFormalRecordOwnerReviewPreparationBoard />

          <OwnerResponseFormalRecordOwnerReviewChecklistBoard />

          <OwnerResponseFormalRecordOwnerReviewOutcomeBoard />

          <OwnerResponseFormalRecordOwnerAssignmentPreparationBoard />

          <OwnerResponseFormalRecordOwnerAssignmentChecklistBoard />

          <OwnerResponseFormalRecordOwnerAssignmentOutcomeBoard />

          <OwnerResponseFormalRecordOwnerAssignmentDecisionPreparationBoard />

          <OwnerResponseFormalRecordOwnerAssignmentDecisionChecklistBoard />
        </IwoooSSectionGroup>

        <IwoooSSectionGroup title={ia('awooopVersion.title')} summary={ia('awooopVersion.summary')}>
          <IwoooSThreeAxisProductProgressBoard />

          <IwoooSProductRolloutWaveLedgerBoard />

          <IwoooSProductRolloutAcceptanceGatesBoard />

          <IwoooSProductRolloutAcceptanceOutcomesBoard />

          <IwoooSProductEvidenceWiringMapBoard />

          <IwoooSProductEvidenceWiringPreflightBoard />

          <IwoooSProductEvidenceWiringPreflightOutcomesBoard />

          <IwoooSProductEvidenceWiringPreflightRecoveryLedgerBoard />

          <IwoooSProductEvidenceWiringPreflightRetryGatesBoard />

          <IwoooSProductEvidenceWiringPreflightRetryOutcomesBoard />

          <IwoooSProductEvidenceWiringPreflightRetryReviewCandidateBoard />

          <IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightBoard />

          <IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightOutcomesBoard />

          <IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightRecoveryLedgerBoard />

          <IwoooSProductEvidenceWiringPreflightRetryReviewCandidatePreflightRecoveryRetryGatesBoard />

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('awooopReadOnlyLandingReadiness.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('awooopReadOnlyLandingReadiness.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {awooopReadOnlyLandingReadinessItems.map(item => (
                <AwoooPReadOnlyLandingReadinessCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('awooopCrossSessionHandoff.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('awooopCrossSessionHandoff.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: 12,
              }}
            >
              {awooopCrossSessionHandoffPackets.map(item => (
                <AwoooPCrossSessionHandoffPacketCard key={item.key} item={item} />
              ))}
            </div>
          </section>
        </IwoooSSectionGroup>

        <IwoooSSectionGroup title={ia('hostKali.title')} summary={ia('hostKali.summary')}>
          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostCoverage.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostCoverage.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostCoverageItems.map((item, index) => (
                <HostCoverageCard key={item.key} item={item} index={index} />
              ))}
            </div>
          </section>

          <KaliMaintenanceReadinessBoard />

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostActionGates.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostActionGates.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostActionGateItems.map((item, index) => (
                <HostActionGateCard key={item.key} item={item} index={index} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceReadiness.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceReadiness.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceReadinessItems.map((item, index) => (
                <HostEvidenceReadinessCard key={item.key} item={item} index={index} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceCollection.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceCollection.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceCollectionSteps.map(item => (
                <HostEvidenceCollectionCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceIntake.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceIntake.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceIntakeChecks.map(item => (
                <HostEvidenceIntakeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceReviewOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceReviewOutcomeLanes.map(item => (
                <HostEvidenceReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceReviewHandoff.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceReviewHandoff.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceReviewHandoffPackets.map(item => (
                <HostEvidenceReviewHandoffCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceReviewerChecklist.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceReviewerChecklist.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceReviewerChecklistItems.map(item => (
                <HostEvidenceReviewerChecklistCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostEvidenceReviewerOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostEvidenceReviewerOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostEvidenceReviewerOutcomeLanes.map(item => (
                <HostEvidenceReviewerOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionCandidates.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionCandidates.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionCandidatePackets.map(item => (
                <HostOwnerDecisionCandidateCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionReviewChecklist.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionReviewChecklist.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionReviewChecklistItems.map(item => (
                <HostOwnerDecisionReviewChecklistCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionReviewOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionReviewOutcomeLanes.map(item => (
                <HostOwnerDecisionReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordDrafts.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordDrafts.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordDraftPackets.map(item => (
                <HostOwnerDecisionRecordDraftCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordDraftReview.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordDraftReview.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordDraftReviewItems.map(item => (
                <HostOwnerDecisionRecordDraftReviewCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordDraftReviewOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordDraftReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordDraftReviewOutcomeLanes.map(item => (
                <HostOwnerDecisionRecordDraftReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordWriteups.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordWriteups.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordWriteupPackets.map(item => (
                <HostOwnerDecisionRecordWriteupCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordWriteupReview.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordWriteupReview.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordWriteupReviewItems.map(item => (
                <HostOwnerDecisionRecordWriteupReviewCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordWriteupReviewOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordWriteupReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordWriteupReviewOutcomeLanes.map(item => (
                <HostOwnerDecisionRecordWriteupReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordFormalCandidates.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordFormalCandidates.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordFormalCandidatePackets.map(item => (
                <HostOwnerDecisionRecordFormalCandidateCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordFormalCandidateReview.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordFormalCandidateReview.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordFormalCandidateReviewItems.map(item => (
                <HostOwnerDecisionRecordFormalCandidateReviewCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordFormalCandidateReviewOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordFormalCandidateReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordFormalCandidateReviewOutcomeLanes.map(item => (
                <HostOwnerDecisionRecordFormalCandidateReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordFormalRecordQueue.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordFormalRecordQueue.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordFormalRecordQueuePackets.map(item => (
                <HostOwnerDecisionRecordFormalRecordQueueCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordFormalRecordQueueReview.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordFormalRecordQueueReview.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordFormalRecordQueueReviewItems.map(item => (
                <HostOwnerDecisionRecordFormalRecordQueueReviewCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordFormalRecordQueueReviewOutcomes.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordFormalRecordQueueReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordFormalRecordQueueReviewOutcomeLanes.map(item => (
                <HostOwnerDecisionRecordFormalRecordQueueReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordHumanHandoffReadiness.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanHandoffReadiness.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanHandoffReadinessPackets.map(item => (
                <HostOwnerDecisionRecordHumanHandoffReadinessCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>{t('hostOwnerDecisionRecordHumanHandoffReadinessReview.title')}</h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanHandoffReadinessReview.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanHandoffReadinessReviewItems.map(item => (
                <HostOwnerDecisionRecordHumanHandoffReadinessReviewCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>
                {t('hostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomes.title')}
              </h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeLanes.map(item => (
                <HostOwnerDecisionRecordHumanHandoffReadinessReviewOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePackets.title')}
              </h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePackets.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePackets.map(item => (
                <HostOwnerDecisionRecordHumanRecordOwnerReviewCandidatePacketCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklist.title')}
              </h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklist.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistItems.map(item => (
                <HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateChecklistCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomes.title')}
              </h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomes.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeLanes.map(item => (
                <HostOwnerDecisionRecordHumanRecordOwnerReviewCandidateOutcomeCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPackets.title')}
              </h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPackets.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPackets.map(item => (
                <HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationPacketCard key={item.key} item={item} />
              ))}
            </div>
          </section>

          <section style={{ marginBottom: 0 }}>
            <div style={{ marginBottom: 14 }}>
              <h2 style={{ fontSize: 16, margin: 0 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklist.title')}
              </h2>
              <p style={{ fontSize: 12, color: '#6f6d66', margin: '6px 0 0', lineHeight: 1.55 }}>
                {t('hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklist.subtitle')}
              </p>
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
                gap: 12,
              }}
            >
              {hostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistItems.map(item => (
                <HostOwnerDecisionRecordHumanRecordOwnerReviewPreparationChecklistCard key={item.key} item={item} />
              ))}
            </div>
          </section>
        </IwoooSSectionGroup>
      </main>
    </AppLayout>
  )
}
