/* AgentGuard harness check: the example run, three app windows on a desk (assets/harness-demo.js).
   Desktop: the windows share one grid cell and overlap, so the desk never changes height. Phone: they stack
   with a small cascade. Motion is transform and opacity, apart from the score ring's stroke. */
.hc-demo { min-width: 0; }
.hcd-eyebrow { margin: 0 0 10px; font: 600 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b0; }
.hcd:empty { min-height: 650px; }
.hcd-desk {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden;
  background:
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px) 0 0 / 18px 18px,
    radial-gradient(760px 340px at 84% -10%, rgba(42, 188, 180, 0.2), transparent 65%),
    radial-gradient(520px 260px at -5% 108%, rgba(42, 188, 180, 0.09), transparent 65%),
    #07101E;
}
.hcd-win { grid-area: 1 / 1; position: relative; min-width: 0; background: #0C1828; border: 1px solid rgba(230, 238, 243, 0.14); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(42, 188, 180, 0.06); opacity: 0; }
.hcd-win.is-open { opacity: 1; animation: hcd-pop 460ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes hcd-pop { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.hcd-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: linear-gradient(180deg, #16293f, #102036); border-bottom: 1px solid rgba(230, 238, 243, 0.1); }
.hcd-ctl { display: flex; gap: 6px; flex: none; margin-right: 4px; }
.hcd-ctl i { width: 10px; height: 10px; border-radius: 50%; background: rgba(230, 238, 243, 0.16); }
.hcd-ctl i:first-child { background: #2abcb4; }
.hcd-bar-icon { width: 15px; height: 15px; flex: none; }
.hcd-bar-title { flex: 1; min-width: 0; font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Where the windows sit on the desk */
.hcd-win-files { z-index: 1; justify-self: start; align-self: start; width: 62%; }
.hcd-win-check { z-index: 2; justify-self: end; align-self: start; width: min(50%, calc(100% - 380px)); margin-top: 24px; }
.hcd-win-fix { z-index: 3; justify-self: start; align-self: end; width: 47%; margin-left: calc(3% + 10px); visibility: hidden; }
.hcd-win-fix.is-open { visibility: visible; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(42, 188, 180, 0.35); }

/* Window 1: the files */
.hcd-tabs { display: flex; background: #0a1526; border-bottom: 1px solid rgba(230, 238, 243, 0.08); overflow: hidden; }
.hcd-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 7px; font: 12px/1 'JetBrains Mono', ui-monospace, monospace; color: #6b7f94; border-right: 1px solid rgba(230, 238, 243, 0.08); border-top: 2px solid transparent; white-space: nowrap; transition: color 200ms, background-color 200ms; }
.hcd-tab.is-active { background: #0C1828; color: #E6EEF3; border-top-color: #2abcb4; }
.hcd-tick { color: #2abcb4; opacity: 0; transform: scale(0.5); transition: opacity 200ms, transform 200ms; }
.hcd-tab.is-read .hcd-tick { opacity: 1; transform: none; }
.hcd-code { position: relative; height: 316px; padding: 10px 10px 10px 0; box-sizing: border-box; overflow: hidden; }
/* Every file stays rendered, one on top of the other, so a tab a rule switches back to never replays its entrance */
.hcd-view { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 0; }
.hcd-view[hidden] { display: block; visibility: hidden; }
.hcd-lines { list-style: none; margin: 0; padding: 0; font: 12px/18px 'JetBrains Mono', ui-monospace, monospace; color: #cbd5e1; }
.hcd-lines li { position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; padding-right: 8px; white-space: pre; opacity: 0; }
.hcd-view.is-in .hcd-lines > li { opacity: 1; animation: hcd-line 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes hcd-line { from { opacity: 0; transform: translateX(-6px); } }
.hcd-ln { flex: 0 0 38px; text-align: right; color: #3e5168; user-select: none; }
.hcd-lines code { font: inherit; color: inherit; background: none; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hcd-key { color: #cbd5e1; }
.hcd-str { color: #8fd9d2; }
.hcd-h { color: #fff; font-weight: 600; }
.hcd-tag { flex: none; font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; padding: 3px 6px; border-radius: 999px; }
.hcd-tag:empty { display: none; }
.hcd-lines li.is-gap { background: rgba(239, 68, 68, 0.14); box-shadow: inset 3px 0 0 #ef4444; }
.hcd-lines li.is-gap .hcd-tag { background: #b91c1c; color: #fff; }
.hcd-lines li.is-info { background: rgba(245, 158, 11, 0.12); box-shadow: inset 3px 0 0 #f59e0b; }
.hcd-lines li.is-info .hcd-tag { background: #854d0e; color: #fde68a; }
.hcd-notes { list-style: none; margin: 8px 22% 0 48px; padding: 0; display: grid; gap: 4px; }
.hcd-note { position: relative; isolation: isolate; display: flex; gap: 8px; align-items: flex-start; padding: 3px 8px; border-radius: 6px; font: 12px/18px 'DM Sans', system-ui, sans-serif; opacity: 0; }
.hcd-note.is-on { opacity: 1; animation: hcd-row-in 260ms ease-out; }
.hcd-note-gap { color: #fecaca; background: rgba(239, 68, 68, 0.08); border: 1px dashed rgba(239, 68, 68, 0.6); }
.hcd-note-info { color: #fde68a; background: rgba(245, 158, 11, 0.08); border: 1px dashed rgba(245, 158, 11, 0.55); }
.hcd-note-id { flex: none; font: 600 11px/18px 'JetBrains Mono', ui-monospace, monospace; color: #fff; background: #b91c1c; border-radius: 999px; padding: 0 6px; }
.hcd-note-info .hcd-note-id { background: #854d0e; color: #fde68a; }
.hcd-note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* The pulse when a rule lands: an overlay that fades, so only opacity moves */
.hcd-lines li::after, .hcd-note::after, .hcd-row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; }
.hcd-lines li.is-gap::after, .hcd-note-gap::after, .hcd-row-gap::before { background: rgba(239, 68, 68, 0.45); }
.hcd-lines li.is-info::after, .hcd-note-info::after { background: rgba(245, 158, 11, 0.4); }
.is-pulse::after { animation: hcd-fade 900ms ease-out; }
@keyframes hcd-fade { from { opacity: 1; } to { opacity: 0; } }
.hcd-flash { position: absolute; inset: 0; background: rgba(42, 188, 180, 0.16); opacity: 0; pointer-events: none; }
.hcd-code.is-flash .hcd-flash { animation: hcd-fade 520ms ease-out; }

/* Window 2: the checker */
.hcd-top { display: flex; align-items: center; gap: 14px; padding: 14px 14px 8px; }
.hcd-dial { position: relative; flex: none; width: 84px; height: 84px; --ring: #2abcb4; }
.hcd-dial svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.hcd-track { fill: none; stroke: rgba(230, 238, 243, 0.08); stroke-width: 9; }
.hcd-ring { fill: none; stroke: var(--ring); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 520ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke 300ms; }
.hcd-band-idle { --ring: rgba(42, 188, 180, 0.45); }
.hcd-band-idle .hcd-num { color: #7f93a8; }
.hcd-band-gated { --ring: #22c55e; }
.hcd-band-partly-gated { --ring: #f59e0b; }
.hcd-band-open { --ring: #ef4444; }
.hcd-num { position: absolute; inset: 0; display: grid; place-items: center; font: 600 26px/1 'DM Sans', system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; transition: color 300ms; }
.hcd-dial.is-hit { animation: hcd-hit 420ms ease-out; }
@keyframes hcd-hit { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.hcd-dmg { position: absolute; right: -10px; top: -2px; font: 600 17px/1 'DM Sans', system-ui, sans-serif; color: #f87171; opacity: 0; pointer-events: none; }
.hcd-dmg.is-on { animation: hcd-dmg 900ms ease-out forwards; }
@keyframes hcd-dmg { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px); } }
.hcd-words { flex: 1; min-width: 0; }
.hcd-status { margin: 0 0 6px; font: 500 12px/1.4 'JetBrains Mono', ui-monospace, monospace; color: #7f93a8; overflow-wrap: anywhere; }
.hcd-act { display: grid; align-items: center; min-height: 41px; }
.hcd-act > * { grid-area: 1 / 1; }
.hcd-check { justify-self: start; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; background: #2abcb4; color: #04201e; font: 600 13px/1 'DM Sans', system-ui, sans-serif; transition: opacity 200ms, transform 120ms; }
.hcd-check.is-press { transform: scale(0.94); }
.hcd-words.is-done .hcd-check { opacity: 0; pointer-events: none; }
.hcd-headline { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: #E6EEF3; opacity: 0; transition: opacity 300ms; text-wrap: pretty; }
.hcd-headline:not(:empty) { opacity: 1; }
.hcd-rows { list-style: none; margin: 0; padding: 2px 12px 12px; display: grid; gap: 4px; }
.hcd-row { position: relative; isolation: isolate; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 13px; line-height: 1.3; color: #cbd5e1; opacity: 0; }
.hcd-row.is-on { opacity: 1; animation: hcd-row-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes hcd-row-in { from { opacity: 0; transform: translateX(12px); } }
.hcd-row-gap { background: rgba(239, 68, 68, 0.07); }
.hcd-row-gap.is-on::before { animation: hcd-fade 900ms ease-out; }
.hcd-chip { box-sizing: border-box; min-width: 40px; font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.03em; padding: 4px 6px; border-radius: 5px; text-align: center; }
.hcd-chip-gap { background: #b91c1c; color: #fff; }
.hcd-chip-info { background: #854d0e; color: #fde68a; }
.hcd-chip-ok { background: #166534; color: #bbf7d0; }
.hcd-id { font: 11px/1 'JetBrains Mono', ui-monospace, monospace; color: #6b7f94; }
.hcd-title { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.hcd-w { font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; color: #f87171; }

/* Window 3: the fix, which opens last */
.hcd-fix { padding: 12px 14px 14px; }
.hcd-fix-title { margin: 0 0 4px; font-size: 15px; line-height: 1.3; font-weight: 600; color: #E6EEF3; }
.hcd-fix-text { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: #a9b7c6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcd-snippet { position: relative; min-width: 0; }
.hcd-snippet pre { margin: 0; max-height: 118px; padding: 10px 84px 10px 12px; box-sizing: border-box; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(230, 238, 243, 0.2) transparent; background: #07101E; border: 1px solid rgba(230, 238, 243, 0.1); border-radius: 10px; font: 12px/1.5 'JetBrains Mono', ui-monospace, monospace; color: #cbd5e1; white-space: pre; overflow-wrap: normal; }
.hcd-snippet code { font: inherit; background: none; padding: 0; }
.hcd-copy { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border-radius: 6px; background: #2abcb4; color: #04201e; border: 0; font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; cursor: pointer; transition: transform 120ms, background-color 200ms; }
.hcd-copy.is-press { transform: scale(0.94); }
.hcd-copy.is-done { background: #22c55e; color: #052e16; }
.hcd-replay:hover, .hcd-copy:hover { filter: brightness(1.1); }

/* The cursor */
.hcd-cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); will-change: transform; }
.hcd-cursor.is-jump { transition: none; }
.hcd-cursor.is-on { opacity: 1; }
.hcd-cursor svg { display: block; transform-origin: 3px 2px; }
.hcd-cursor.is-click svg { animation: hcd-click 220ms ease-out; }
@keyframes hcd-click { 50% { transform: scale(0.8); } }

.hcd-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.hcd-replay { min-height: 36px; padding: 0 14px; border-radius: 999px; background: transparent; color: #cbd5e1; border: 1px solid rgba(230, 238, 243, 0.25); font: 500 13px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }

@media (max-width: 700px) {
  .hcd:empty { min-height: 1130px; }
  .hcd-desk { display: flex; flex-direction: column; padding: 10px; }
  .hcd-win { width: auto; align-self: stretch; margin: 0; }
  .hcd-win-check { width: auto; margin: -14px 0 0 12px; }
  .hcd-win-fix { width: auto; margin: -14px 12px 0 0; }
  .hcd-tab { padding: 8px 10px 7px; }
  .hcd-code { height: 312px; padding: 8px 8px 8px 0; }
  .hcd-view { top: 8px; right: 8px; bottom: 8px; }
  .hcd-lines { line-height: 17px; }
  .hcd-lines li { align-items: flex-start; white-space: normal; gap: 8px; }
  .hcd-lines code { white-space: pre-wrap; overflow: visible; }
  .hcd-ln { flex-basis: 24px; }
  .hcd-tag, .hcd-chip, .hcd-note-id { font-size: 12px; }
  .hcd-chip { min-width: 42px; }
  .hcd-notes { margin-left: 8px; margin-right: 0; }
  .hcd-note { line-height: 17px; }
  .hcd-top { padding: 10px 12px 4px; gap: 12px; }
  .hcd-dial { width: 72px; height: 72px; }
  .hcd-num { font-size: 22px; }
  .hcd-dmg { right: 0; top: -12px; font-size: 15px; }
  .hcd-act { min-height: 56px; }
  .hcd-headline { font-size: 14px; }
  .hcd-rows { padding: 2px 8px 10px; gap: 3px; }
  .hcd-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 3px 6px; font-size: 12.5px; }
  .hcd-id { display: none; }
  .hcd-fix { padding: 10px 12px 12px; }
  .hcd-fix-title { font-size: 14px; }
  .hcd-fix-text { font-size: 12.5px; }
  .hcd-snippet pre { max-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .hcd *, .hcd *::before, .hcd *::after { animation: none !important; transition: none !important; }
  .hcd-cursor { display: none; }
}