/* =============================================================================
   Hyrax product cards: coded, state-animated windows in the real app's light
   theme (the cursor.com / fin.ai pattern). Every class is prefixed hc- so the
   cards never collide with site styles. The cards sit inside the site's own
   panels; they add no panel background of their own.
============================================================================= */
.hc-stage { position: relative; width: 100%; font-family: "Geist", Inter, system-ui, sans-serif; color: #1B1714; text-align: left; }
.hc-stage * { box-sizing: border-box; }

/* ---------- window chrome ---------- */
.hc-win { position: absolute; background: #F4EFE6; border-radius: 12px; overflow: hidden; color: #1B1714;
  box-shadow: 0 0 0 1px rgba(27,23,20,.10), 0 18px 50px -18px rgba(27,23,20,.35), 0 4px 12px -6px rgba(27,23,20,.18); }
.hc-bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #EDE6D9; border-bottom: 1px solid #E0D7C6; }
.hc-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(27,23,20,.16); flex: none; }
.hc-bar span { flex: 1; text-align: center; margin-right: 40px; font-family: "Geist Mono", monospace; font-size: 11px; color: rgba(27,23,20,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-main { position: relative; left: 0; top: 0; right: 0; }
.hc-body { padding: 16px; }
.hc-over { right: -8px; bottom: 0; width: 64%; transform: translateY(26px); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.hc-over.on { transform: none; opacity: 1; }

/* ---------- shared atoms (measured from the live app) ---------- */
.hc-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #4B4238; }
.hc-kicker { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #A83412; }
.hc-count { font-family: "Geist Mono", monospace; font-size: 11px; color: #6E6556; background: #ECE4D5; border-radius: 999px; padding: 1px 8px; }
.hc-card { background: #FFFDF9; border: 1px solid #E0D7C6; border-radius: 7px; overflow: hidden; }
.hc-mono { font-family: "JetBrains Mono", "Geist Mono", monospace; }
.hc-muted { color: #6E6556; }
.hc-sev { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; line-height: 14px; white-space: nowrap; margin-top: 1px; }
.hc-sev.crit { color: #AD3017; background: rgba(193,54,32,.16); }
.hc-sev.high { color: #A83412; background: rgba(232,99,44,.14); }
.hc-sev.med { color: #8A5A1E; background: rgba(201,168,124,.34); }
.hc-sev.low { color: #4B4238; background: #ECE4D5; }
.hc-btn { font-size: 13px; font-weight: 500; color: #A83412; background: rgba(171,63,19,.10); border: 1px solid rgba(171,63,19,.32); border-radius: 7px; padding: 5px 13px; line-height: 20px; white-space: nowrap; display: inline-block;
  transition: transform .15s ease, background-color .2s ease, opacity .3s ease; }
.hc-btn.press { transform: scale(.94); background: rgba(171,63,19,.2); }
.hc-btn.solid { background: #1B1714; color: #F4EFE6; border-color: #1B1714; }
.hc-btn.solid.press { background: #3a322c; }
.hc-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(168,52,18,.25); border-top-color: #A83412; animation: hc-spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
.hc-tick { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1.5px solid rgba(27,23,20,.25); display: inline-block; transition: all .3s ease; }
.hc-ok .hc-tick, .hc-tick.ok { background: #1B1714 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23F4EFE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; border-color: #1B1714; }
.hc-fade { opacity: 0; transform: translateY(5px); transition: opacity .4s ease, transform .4s ease; }
.hc-fade.on { opacity: 1; transform: none; }

/* ---------- choose: findings (approved card) ---------- */
.hc-lhead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 2px; }
.hc-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; border-top: 1px solid #E0D7C6; max-height: 200px;
  transition: max-height .6s cubic-bezier(.65,0,.35,1), padding .6s cubic-bezier(.65,0,.35,1), opacity .45s ease, background-color .35s ease; }
.hc-row:first-child { border-top: 0; }
.hc-row.focus { background: #FBF5EB; }
.hc-row.gone { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-top-color: transparent; }
.hc-rmain { flex: 1; min-width: 0; }
.hc-rtop { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.hc-rtitle { font-size: 14px; font-weight: 500; line-height: 1.4; flex: 1 1 220px; }
.hc-rmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: #6E6556; }
.hc-rmeta .hc-mono { color: #4B4238; }
.hc-ract { display: flex; gap: 6px; flex: none; align-items: center; position: relative; }
.hc-state { position: absolute; right: 0; top: 0; opacity: 0; pointer-events: none; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 6px 12px; white-space: nowrap; transition: opacity .35s ease; display: inline-flex; align-items: center; gap: 7px; }
.hc-state.dismissed { color: #6E6556; background: #ECE4D5; }
.hc-state.working { color: #A83412; background: rgba(232,99,44,.14); }
.hc-state.ready { color: #1B1714; background: #E4ECD9; }
.hc-ract.show-state .hc-btn { opacity: 0; }
.hc-state.on { opacity: 1; }
.hc-reason { display: flex; align-items: baseline; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease; }
.hc-reason.on { max-height: 40px; opacity: 1; margin-top: 10px; }
.hc-reason-text { font-size: 13px; color: #1B1714; background: #FFFDF9; border: 1px solid rgba(171,63,19,.45); border-radius: 6px; padding: 4px 8px; min-width: 60px; }
.hc-caret { display: inline-block; width: 1.5px; height: 14px; background: #A83412; animation: hc-blink .9s steps(2) infinite; vertical-align: -2px; margin-left: 1px; }
@keyframes hc-blink { 50% { opacity: 0; } }
.hc-checks { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid #E0D7C6; }
.hc-checks li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #6E6556; padding: 7px 0; border-bottom: 1px solid #EAE2D3; opacity: .45; transition: opacity .3s ease, color .3s ease; }
.hc-checks li.hc-ok { opacity: 1; color: #1B1714; }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12.5px; color: #4B4238; }
.hc-prtitle { font-size: 15px; font-weight: 500; margin-top: 6px; line-height: 1.35; }

/* ---------- map: discovery ---------- */
.hc-map.hc-body { display: grid; grid-template-columns: 196px 1fr; gap: 14px; padding: 14px; }
.hc-tree { list-style: none; margin: 0; padding: 8px 0; font-family: "JetBrains Mono", "Geist Mono", monospace; font-size: 12px; }
.hc-tree li { padding: 5px 10px; border-radius: 5px; color: #4B4238; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .35s ease, background-color .3s ease, color .3s ease; }
.hc-tree li.on { opacity: 1; }
.hc-tree li.dir { color: #6E6556; }
.hc-tree li.i1 { padding-left: 22px; } .hc-tree li.i2 { padding-left: 34px; }
.hc-tree li.sel { background: rgba(232,99,44,.14); color: #A83412; font-weight: 500; }
.hc-mstatus { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6E6556; padding: 0 10px 8px; }
.hc-view { min-height: 300px; }
.hc-vhead { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid #E0D7C6; font-family: "Geist Mono", monospace; font-size: 11.5px; color: #6E6556; }
.hc-doc { padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: #1B1714; opacity: 0; transition: opacity .35s ease; }
.hc-doc.on { opacity: 1; }
.hc-doc h4 { font-family: "JetBrains Mono", monospace; font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }
.hc-doc h5 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.hc-doc p { margin: 0 0 8px; }
.hc-doc .hc-q { border-left: 2px solid #E0D7C6; padding-left: 10px; color: #4B4238; }
.hc-doc table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 6px; }
.hc-doc td, .hc-doc th { text-align: left; padding: 5px 7px; border-bottom: 1px solid #EAE2D3; }
.hc-doc th { color: #6E6556; font-weight: 500; }
.hc-doc code { font-family: "JetBrains Mono", monospace; font-size: 11px; background: #ECE4D5; border-radius: 4px; padding: 1px 4px; color: #A83412; }
.hc-docs { position: relative; }
.hc-docs .hc-doc { position: absolute; inset: 0; }

/* ---------- first run ---------- */
.hc-fr-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.hc-pill-run { white-space: nowrap; }
.hc-fr-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.hc-pill-run { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: #A83412; }
.hc-pill-run.done { color: #1B1714; }
.hc-progress { height: 2px; background: #E0D7C6; margin: 14px 0 12px; border-radius: 2px; overflow: hidden; }
.hc-progress i { display: block; height: 100%; width: 0; background: #C4401B; transition: width 1.2s ease; }
.hc-fr-step { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid #EAE2D3; }
.hc-fr-step:first-of-type { border-top: 0; }
.hc-fr-step h6 { margin: 0; font-size: 13.5px; font-weight: 500; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hc-tag { flex: none; line-height: 14px; }
.hc-fr-step p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #6E6556; }
.hc-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .35px; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
.hc-tag.run { color: #A83412; background: rgba(232,99,44,.14); }
.hc-tag.done { color: #1B1714; background: #ECE4D5; }
.hc-dots { display: flex; gap: 5px; margin-top: 8px; }
.hc-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(196,64,27,.25); transition: background .3s ease; }
.hc-dots i.on { background: #C4401B; }
.hc-files { list-style: none; margin: 10px 0 0; padding: 0; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.hc-files li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: #4B4238; }
.hc-files li b { font-weight: 500; color: #2F7A3B; font-family: "Geist Mono", monospace; font-size: 11px; }

/* ---------- agents: six dimensions ---------- */
.hc-ag.hc-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.hc-ag-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 12px; border-top: 1px solid #EAE2D3; font-size: 13px; }
.hc-ag-row:first-of-type { border-top: 0; }
.hc-ag-st { font-size: 11.5px; color: #6E6556; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hc-ag-st b { font-weight: 600; color: #1B1714; font-size: 13px; }
.hc-bar-t { grid-column: 1 / -1; height: 5px; background: #EFE8DC; border-radius: 3px; overflow: hidden; }
.hc-bar-t i { display: block; height: 100%; width: 0; background: #8A6A3E; border-radius: 3px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.hc-sev-row { display: grid; grid-template-columns: 74px 1fr 22px; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12.5px; }
.hc-sev-row .d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.hc-sev-row .hc-bar-t { grid-column: auto; }
.hc-sev-row b { font-weight: 500; text-align: right; }
.hc-score { padding: 12px; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #EAE2D3; }
.hc-score b { font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.hc-phead { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #EAE2D3; }

/* ---------- pr ---------- */
.hc-pr.hc-body { padding: 14px 16px 16px; }
.hc-prmeta { font-size: 12.5px; color: #6E6556; margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hc-open { font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #F4EFE6; background: #2F7A3B; border-radius: 999px; padding: 2px 9px; transition: background .3s ease; }
.hc-open.merged { background: #6B3FA0; }
.hc-diff { margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; line-height: 1.6; }
.hc-diff .fh { padding: 7px 10px; border-bottom: 1px solid #E0D7C6; color: #4B4238; background: #F7F1E6; }
.hc-diff .ln { padding: 0 10px 0 22px; position: relative; white-space: pre; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s ease; }
.hc-diff .ln.on { opacity: 1; }
.hc-diff .ln::before { position: absolute; left: 9px; }
.hc-diff .add { background: rgba(47,122,59,.10); color: #1F4F28; } .hc-diff .add::before { content: "+"; }
.hc-diff .del { background: rgba(193,54,32,.08); color: #7A2E1C; } .hc-diff .del::before { content: "−"; }
.hc-diff .hunk { color: #8A6A3E; }
.hc-mergebox { margin-top: 12px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-mb-l { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.hc-mb-sub { font-size: 12px; color: #6E6556; margin-top: 2px; }
.hc-rev { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: #4B4238; }
.hc-av { width: 20px; height: 20px; border-radius: 50%; background: #8A6A3E; color: #F4EFE6; font-size: 10px; font-weight: 600; display: inline-grid; place-items: center; flex: none; }

/* ---------- smarter: benchmark ---------- */
.hc-bm-top { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.hc-bm-top .hc-muted, .hc-score .hc-muted { white-space: nowrap; }
.hc-bm-top b { font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.hc-bm-delta { font-size: 12.5px; color: #A83412; font-weight: 500; }
.hc-chart { margin-top: 10px; height: 110px; }
.hc-chart svg { width: 100%; height: 100%; overflow: visible; }
.hc-chart .ln { fill: none; stroke: #C4401B; stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1); }
.hc-chart .ar { fill: url(#hcgrad); opacity: 0; transition: opacity .8s ease .9s; }
.hc-chart.on .ln { stroke-dashoffset: 0; } .hc-chart.on .ar { opacity: 1; }
.hc-chart .ax { font-family: "Geist Mono", monospace; font-size: 10px; fill: #6E6556; }
.hc-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hc-cat { padding: 9px 11px; }
.hc-cat .t { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 500; }
.hc-cat .hc-bar-t { margin-top: 7px; }
.hc-cat .hc-bar-t i { background: #C4401B; }
.hc-toast { position: absolute; right: 14px; bottom: 16px; z-index: 3; background: #1B1714; color: #F4EFE6; border-radius: 9px; padding: 9px 12px; font-size: 12px; display: flex; gap: 9px; align-items: center; box-shadow: 0 14px 34px -14px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.hc-toast.on { opacity: 1; transform: none; }
.hc-toast .hc-mono { color: #F0A37F; font-size: 11px; }

/* ---------- verify: the gate run ---------- */
.hc-log { font-family: "JetBrains Mono", "Geist Mono", monospace; font-size: 12px; line-height: 1.5; background: #1B1714; color: #EDE6D9; border-radius: 8px; padding: 12px 14px; min-height: 330px; }
.hc-log .l { display: flex; gap: 9px; opacity: 0; transition: opacity .25s ease; padding: 2px 0; }
.hc-log .l.on { opacity: 1; }
.hc-log .l .k { color: #9BD49F; flex: none; width: 12px; }
.hc-log .l .s { color: #F0A37F; flex: none; width: 12px; }
.hc-log .l.dim { color: rgba(237,230,217,.55); }
.hc-log .l.fin { margin-top: 8px; color: #F4EFE6; font-weight: 500; }
.hc-vhead2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* ---------- responsive ---------- */
.hc-k-choose, .hc-k-firstrun { min-height: 540px; }
@media (max-width: 1000px) { .hc-k-choose, .hc-k-firstrun { min-height: 520px; } }
@media (max-width: 640px) {
  .hc-k-choose, .hc-k-firstrun { min-height: 640px; }
  .hc-over { left: 0; right: 0; width: auto; bottom: 0; }
  .hc-row { flex-direction: column; gap: 10px; }
  .hc-state { position: static; }
  .hc-ract .hc-btn:not(.hc-go) { display: none; }
  .hc-map.hc-body, .hc-ag.hc-body { grid-template-columns: 1fr; }
  .hc-map .hc-tree { display: flex; flex-wrap: wrap; gap: 2px 6px; padding: 4px 0; }
  .hc-map .hc-tree li.dir { display: none; }
  .hc-map .hc-tree li.i1, .hc-map .hc-tree li.i2 { padding-left: 10px; }
  .hc-view { min-height: 300px; }
  .hc-cats { grid-template-columns: 1fr 1fr; }
  .hc-fr-name { font-size: 16px; }
  .hc-mergebox { flex-direction: column; align-items: flex-start; }
  .hc-mb-l { white-space: nowrap; }
  .hc-diff { font-size: 10.5px; }
  .hc-diff .ln { padding-left: 18px; }
  .hc-log { font-size: 11px; min-height: 0; }
  .hc-toast { left: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hc-stage *, .hc-stage *::before { transition: none !important; animation: none !important; } }