/* Cop additions on top of the old console's stylesheet. */
:root { --f-ui: "General Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }
::selection { background: var(--accent); color: var(--on-accent); }
.wordmark b { color: var(--accent); font-weight: 600; }
.acard { height: 470px; }
.acard .prov { font: 12px var(--f-mono); color: var(--text-3); margin-top: 2px; }
.acard .rt.blk, .acard .tl.blk { color: var(--accent-hover); }
.acard .rt.ask, .acard .tl.ask { color: var(--wait); }
.acard .waitbox { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 12px; font-size: 13px; color: var(--text-2); }
.acard .waitbox code { display: block; font: 12px var(--f-mono); color: var(--text); margin-top: 4px; overflow-wrap: anywhere; }
.addcard { border-style: dashed; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); }
.addcard:hover { color: var(--text); border-color: var(--accent-hover); }
.addcard .plus { width: 56px; height: 56px; border-radius: 50%; border: 1px dashed var(--line-3); display: grid; place-items: center; }
.conn-k { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 8px 8px 12px; }
.conn-k > span { font-size: 12px; color: var(--text-3); width: 70px; flex: none; }
.conn-k code { flex: 1; min-width: 0; font: 13px var(--f-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or { font-size: 13px; color: var(--text-3); }
.verdict { font: 600 22px var(--f-ui); letter-spacing: -.02em; }
.verdict em { font-style: normal; color: var(--accent); }
.risks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rk { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--text); }
.rk i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); transform: translateY(-1px); }
.rk.crit i { background: var(--siren, #FF1A1A); }
.rk.high i { background: var(--accent); }
.panel.held .ob-actions .btn { gap: 9px; }
.rk-by { font-size: 13px; color: var(--text-3); margin: 0; }
.mission { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.mission small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ttl-k { font: 12px var(--f-mono); color: var(--text-3); }
.panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; display: grid; gap: 12px; }
.panel.held { border-color: var(--err); }
.panel h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line-2); border-radius: 12px; font-size: 14px; color: var(--text-2); }
.notice a { color: var(--accent-hover); }
.chan form { display: flex; gap: 8px; }
.chan .alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.chip { border: 1px solid var(--line-2); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.chip:hover, .chip:focus-visible { border-color: var(--accent); color: var(--text); }
.err-t { color: var(--err); font-size: 13px; }
.cdown { font: 12px var(--f-mono); color: var(--text-3); }
.mn.c-dim { font-size: 12px; }
@media (max-width: 760px) { .chan form { flex-direction: column; } }

/* Connect: two numbered steps, and the drawing agent -> Cop -> provider */
.cstep { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.cstep .sn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-3); display: grid; place-items: center; font: 600 13px var(--f-ui); color: var(--text); }
.cstep .sb { display: grid; gap: 8px; min-width: 0; }
.cstep h3 { font-size: 16px; font-weight: 600; }
.modelform { display: grid; gap: 8px; }
.modelform .mrow { display: flex; gap: 8px; }
.modelform .mrow .inp { flex: 1; min-width: 0; }
.chip.on { border-color: var(--accent); color: var(--text); background: rgba(255, 91, 26, .07); }
.linkok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.linkok b { color: var(--text); font-weight: 600; }
.lk { display: block; width: 100%; height: auto; overflow: visible; }
.lk-box rect { fill: var(--surface); stroke: var(--line-3); }
.lk-box.watched rect { stroke: var(--accent); }   /* the agent under watch carries the orange frame and the loupe */
.lk-box.off rect { fill: transparent; stroke: var(--line-2); stroke-dasharray: 5 4; }
.lk-box.off .m-name { fill: var(--text-3); }
.lk-on { stroke: var(--accent); stroke-width: 2; }
.lk-off { stroke: #3A3A44; stroke-width: 1.6; stroke-dasharray: 5 5; }
.lk-n circle { fill: var(--surface); stroke: var(--line-3); stroke-width: 1.2; }   /* step 1 and 2, as on the left */
.lk-n text { fill: var(--text); font: 600 11px var(--f-ui); }
.lk-n.done circle { stroke: var(--accent); }
.lk-x circle { fill: #1E0A0E; stroke: var(--err); stroke-width: 1.5; }
.lk-x path { stroke: var(--err); stroke-width: 2; stroke-linecap: round; fill: none; }
.lk-scan { animation: lkscan 2.4s ease-in-out infinite; }
@keyframes lkscan { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-3px, -2px); } 60% { transform: translate(2px, -3px); } 80% { transform: translate(1px, 2px); } }
.mapcard .map + .empty { padding-top: 0; }
@media (max-width: 760px) { .modelform .mrow { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .lk-scan { animation: none; } }
.modelform .alt { display: flex; flex-wrap: wrap; gap: 8px; }

/* The banner shows the brand, as on agent-cop.com: the Flic and "AgentCop", "Agent" in white, "Cop" in
   orange. The text of the tool calls it simply Cop. Same mark as agent-cop.com (website/site/src/components/CopMark.astro). The shine sweeps the
   glasses every few seconds, faster while an agent waits for your call (html.cop-watch). */
.wordmark .cop-mark { width: 30px; height: 30px; }
.cop-mark{display:block;flex:none}
  .cop-shine{opacity:0}
  @media (prefers-reduced-motion:no-preference){
    .cop-shine{opacity:.9;transform:translateX(0);animation:cop-shine 7s cubic-bezier(.4,0,.2,1) 1.2s infinite}
    html.cop-watch .cop-shine{animation-duration:1.4s;animation-delay:0s}
  }
  @keyframes cop-shine{0%,78%{transform:translateX(0)}96%,100%{transform:translateX(465px)}}

/* Release: take an agent out of Cop's custody. Siren red, top right of its page, with the handcuffs of the
   brand library. The red is the red of a police lightbar, kept for this one action. */
:root { --siren: #FF1A1A; --siren-deep: #D9070F; }
.cop-ico { display: block; flex: none; }
.btn-release { color: var(--siren); background: transparent; border-color: rgba(255, 26, 26, .5); gap: 7px; }
.btn-release:hover { background: rgba(255, 26, 26, .1); border-color: var(--siren); }
.btn-release.solid { color: #fff; background: var(--siren-deep); border-color: var(--siren); font-weight: 600; }
.btn-release.solid:hover { background: var(--siren); }
.release-ask { border-color: rgba(255, 26, 26, .55); box-shadow: 0 0 0 1px rgba(255, 26, 26, .12), 0 0 28px -8px rgba(255, 26, 26, .45); margin-bottom: 18px; }
.release-ask h2 { display: flex; align-items: center; gap: 10px; }

/* Connect, one step at a time: a step done folds into an orange block. The setup prompt sits top right. */
.ob-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cstep.done { border: 1px solid rgba(255, 91, 26, .45); background: rgba(255, 91, 26, .06); border-radius: 14px; padding: 12px 14px; animation: rise .28s ease; }
.cstep.done .sn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cstep.done h3 { font-size: 15px; }
.cstep.done .c-2 { font-size: 13px; }
.cstep.done code { font: 12px var(--f-mono); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .cstep.done { animation: none; } }
.cstep.done .linkok > .ic:first-child { display: none; }   /* the orange step badge already says it's done */

/* The setup prompt popup: what to do with the prompt just copied. */
.pop-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 6, .66); animation: fade .18s ease; }
.pop { width: min(520px, 100%); background: var(--surface); border: 1px solid rgba(255, 91, 26, .45); border-radius: 18px; padding: 22px 24px; display: grid; gap: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); animation: rise .22s ease; }
.pop h2 { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.pop p { color: var(--text-2); font-size: 15px; }
.pop ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.pop code { font: 12px var(--f-mono); color: var(--text); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pop-back, .pop { animation: none; } }

/* Cop online: the sign-in page. */
body.signin { min-height: 100vh; background: var(--bg); }
.si-top { padding: 22px clamp(16px, 4vw, 40px); }
body.signin .ob-name { min-height: calc(100vh - 90px); padding: 0 16px 60px; }
.si-lead { font-size: 16px; margin-top: -12px; }
.si-sent { width: 100%; max-width: 480px; display: grid; gap: 16px; }
.si-sent h1 { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.si-sent .linkbtn { justify-self: start; }
.side-out { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); font: 14px var(--f-ui); cursor: pointer; text-align: left; }
.side-out:hover { color: var(--text); background: var(--surface); }