/* Alpine.js: ẩn phần tử có x-cloak cho tới khi Alpine load xong */
[x-cloak] { display: none !important; }

/* ============================================================
   Blueprint grid background — dùng cho hero & khối nội dung chính
   ============================================================ */
.bp-grid {
  background-image:
    linear-gradient(to right, rgba(11, 61, 92, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 61, 92, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Corner-bracket panel, giống khung bản vẽ kỹ thuật */
.bp-panel {
  position: relative;
  border: 1px solid #B9CDD8;
  background: rgba(255,255,255,0.55);
}
.bp-panel::before, .bp-panel::after,
.bp-panel-tl::before, .bp-panel-br::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-color: #0B3D5C;
}
.bp-panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.bp-panel::after   { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* ============================================================
   Signature element: Resolution Trace
   Sơ đồ: Browser -> Resolver -> Authoritative -> Answer
   Dùng ở hero trang chủ (tĩnh) và làm loading indicator (chạy)
   ============================================================ */
.trace-line {
  stroke: #B9CDD8;
  stroke-width: 2;
  fill: none;
}
.trace-dot {
  fill: #0B3D5C;
}
.trace-pulse {
  fill: #2F9E44;
  opacity: 0;
}
.trace-running .trace-pulse {
  animation: trace-travel 1.6s ease-in-out infinite;
}
@keyframes trace-travel {
  0%   { opacity: 0; offset-distance: 0%; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}
.trace-pulse.p1 { offset-path: path('M 20,40 L 180,40'); animation-delay: 0s; }
.trace-pulse.p2 { offset-path: path('M 180,40 L 320,40'); animation-delay: 0.5s; }
.trace-pulse.p3 { offset-path: path('M 320,40 L 460,40'); animation-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .trace-running .trace-pulse { animation: none; opacity: 1; }
}

/* HTMX loading state — QUAN TRỌNG: phải display:none khi ẩn, nếu chỉ dùng
   opacity:0 thì khối loading (có SVG cao ~150px) vẫn chiếm chỗ trong layout
   dù vô hình, đẩy kết quả xuống xa form dù đã render xong. */
.htmx-indicator { display: none; }
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator { display: block; }

/* Status pill */
.status-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.status-ok      { background: rgba(47,158,68,0.12); color: #2F9E44; border: 1px solid rgba(47,158,68,0.35); }
.status-warn    { background: rgba(201,122,46,0.12); color: #C97A2E; border: 1px solid rgba(201,122,46,0.35); }
.status-danger  { background: rgba(193,68,60,0.12); color: #C1443C; border: 1px solid rgba(193,68,60,0.35); }