/* Orca presentation layer for the copied, fully editable graph.
   Keep node/port geometry and the two camera-driven grid layers intact. */
:root {
  --ink: var(--foreground);
  --ink2: color-mix(in srgb, var(--foreground) 78%, var(--muted-foreground));
  --dim: var(--muted-foreground);
  --dim2: var(--secondary-label);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --spring: cubic-bezier(.2,.8,.2,1);
  --editor-border: color-mix(in srgb, var(--border) 75%, var(--muted-foreground));
  --editor-shadow: 0 4px 14px color-mix(in srgb, var(--scrim) 20%, transparent);
  --popover-shadow: 0 12px 32px color-mix(in srgb, var(--scrim) 35%, transparent);
}
html.page, html.page body, .og { background: var(--background); }
.shade { background: none; }
.shade::after { background: color-mix(in srgb, var(--background) 32%, transparent); }
.dots {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 55%, transparent) 0 var(--r2), transparent calc(var(--r2) + .4px)),
    radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 27%, transparent) 0 var(--r1), transparent calc(var(--r1) + .4px));
}
.dots.moving { right: auto; bottom: auto; transform-origin: 0 0; will-change: transform; }
.og.layout-moving #packets { visibility: hidden; }
.world { will-change: transform; }
.og.layout-moving .node { will-change: translate, opacity; }

/* Toolbar chrome follows the app's native, divided header. */
.top1 {
  top: 0; left: 0; right: 0; height: 64px; padding: 12px 16px;
  background: var(--toolbar-background); border-bottom: 1px solid var(--toolbar-border);
  pointer-events: auto;
}
.top2 { top: 74px; }
.proj { top: 124px; }
.pill, .proj, .mini {
  border-radius: 10px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border), var(--editor-shadow);
}
.top1 .pill { background: none; box-shadow: none; }
.top1 .brand { padding-left: 0; }
.brand img { border-radius: 29%; box-shadow: inset 0 0 0 1px var(--border); }
.tag { background: var(--accent); color: var(--ink2); box-shadow: none; font-weight: 500; letter-spacing: 0; }
.bt { font-weight: 600; }
.bs { color: var(--dim); }
.hgrp { gap: 12px; }
.top1 .hgrp > .pill + .pill { border-left: 1px solid var(--border); padding-left: 12px; border-radius: 0; }
.sep, .msep, .msep2 { background: var(--border); }
.ib, .tb, .layer, .btn, .projt { border-radius: 7px; }
.ib:hover, .layer:hover, .projt:hover, .btn:hover, .step button:hover {
  background: var(--accent); color: var(--foreground);
}
.tb { font-weight: 500; }
.tb.anthony, .tb.saved { color: var(--ink2); }
.tb.anthony svg { color: var(--dim); }
.tb.anthony[aria-checked="true"] { color: var(--foreground); }
.sthumb, .sthumb.anth {
  border-radius: 7px; background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--editor-border);
}
.play, .btn.pri {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: none; font-weight: 600;
}
.play:hover, .btn.pri:hover {
  background: color-mix(in srgb, var(--primary) 85%, var(--foreground));
  color: var(--primary-foreground);
}
.play.invite { animation: none; }
.plabel, .ml, .sec, .dsec, .dfield > span, .tl2, .tl3, .xsec, .mg {
  letter-spacing: .025em; font-weight: 600;
}
.plabel { color: var(--dim); }
.layer i, .layer.l-live i { box-shadow: none; }
.layer svg { color: var(--primary); }
.layer.l-live i { background: var(--success); }
.layer.l-live[aria-pressed="true"] i { animation: none; }
.layer.ow .owav { border-radius: 29%; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--oc); }
.pall button { background: var(--popover); box-shadow: inset 0 0 0 1px var(--border), var(--editor-shadow); }
.pall button:hover { background: var(--accent); }
.pall button[aria-disabled="true"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.mini { bottom: 70px; background: var(--sidebar); }

/* Flat cards; borders share the owner colour used by the left lane marker. */
.node, .node.o-co, .node.o-gk, .node.o-you, .node.o-rt, .node.o-wk, .node.handover {
  --node-accent: var(--lane, var(--acc));
  background: var(--card); border-color: color-mix(in srgb, var(--node-accent) 55%, var(--card));
  border-radius: 12px; box-shadow: var(--editor-shadow);
}
.node::before { background: none; }
.node[data-lane]::after { opacity: .7; width: 2px; }
.node:hover { border-color: color-mix(in srgb, var(--node-accent) 80%, var(--card)); }
.node.hot { border-color: var(--warning); box-shadow: var(--editor-shadow); }
.node.sel, .node.open, .node.msel {
  border-color: var(--node-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-accent) 24%, transparent), var(--editor-shadow);
}
.node.msel { box-shadow: 0 0 0 2px var(--node-accent), var(--editor-shadow); }
.node.dragging {
  transform: none; border-color: var(--node-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-accent) 24%, transparent), var(--popover-shadow);
}
.node.settle { animation: none; }
.node.drop { border-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 24%, transparent); }
.node.hub, .node.hub.open { background: none; border: 0; box-shadow: none; }
.node.hub.sel .tilewrap, .node.hub.msel .tilewrap { box-shadow: 0 0 0 2px var(--node-accent); }
.ico {
  border-radius: 9px; color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, var(--border));
}
.title { font-weight: 600; }
.tilewrap { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--editor-border); animation: none; }
.tile { box-shadow: 0 0 0 1px var(--border); }
.shine::after { background: none; }
.node > .oav {
  border-radius: 29%; background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--lane, var(--primary)), 0 0 0 3px var(--background);
}
.node > .subtag {
  border-radius: 0 5px 5px 0; background: var(--surface-raised);
  color: var(--ink2); box-shadow: inset 0 0 0 1px var(--editor-border);
  font-weight: 500; letter-spacing: .025em; text-transform: none;
}
.hand img { border-radius: 29%; background: var(--surface-raised); }
.hand img.w { box-shadow: 0 0 0 1px rgb(var(--ha)); }
.hand img.g { box-shadow: 0 0 0 1px rgb(var(--hb)); }
.baton i { animation: none; opacity: .6; }
.tiers, .itabs, .tseg, .mseg, .step {
  border-radius: 7px; background: var(--sidebar-control-surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.tiers .thumb, .ithumb {
  border-radius: 5px; background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--editor-border);
}
.tiers button[aria-checked="true"], .itab[aria-selected="true"] { color: var(--foreground); }
.itab[aria-selected="true"] svg { color: var(--primary); }
.model { border-radius: 7px; border-color: var(--border); background: var(--surface-raised); font-weight: 500; }
.model:hover { background: var(--accent); border-color: var(--editor-border); }
.det { background: var(--secondary); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink2); }
.chip { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }
.chip:hover { background: var(--accent); }
.outs { border-color: var(--border); }
.chip.mod::after, .set.changed .sl::before, .efoot .einstr.edited::after { background: var(--warning); box-shadow: none; }
.dg, .state { color: var(--success); background: var(--success-surface); box-shadow: none; }
.state { letter-spacing: .02em; font-weight: 600; }
.state::before, .dot, .task .dot, .pdot, .axt i { box-shadow: none; }
.node.tripped { animation: none; border-color: var(--wire-safety); }
.node.tripped .state, .lockb { background: color-mix(in srgb, var(--wire-safety) 12%, var(--card)); color: var(--wire-safety); box-shadow: none; }
.node.waiting { animation: none; border-color: var(--warning); }

/* The existing hit targets and port centers are unchanged. */
.edge .line { stroke: rgba(var(--c),.65); stroke-dasharray: none; animation: none; }
.edge.cat-repair .line { stroke-dasharray: 5 7; }
.edge.cat-safety .line { stroke-dasharray: 1 10; }
.edge .halo, .edge.cat-repair .halo, .edge.cat-safety .halo { stroke: transparent; }
.edge:hover .halo, .edge.sel .halo, .edge.moving .halo { stroke: rgba(var(--c),.12); stroke-width: 8; }
.edge.sel .line, .edge.moving .line { stroke: rgb(var(--c)); stroke-dasharray: none; }
.port { background: var(--card); box-shadow: 0 0 0 1.5px rgba(var(--pc),.8), 0 0 0 4px var(--background); }
.port.on::before { box-shadow: none; }
.port.snap { box-shadow: 0 0 0 2px rgb(var(--pc)), 0 0 0 5px var(--background), 0 0 0 7px rgba(var(--pc),.25); }
.og.wiring .pi.ok { animation: none; box-shadow: 0 0 0 2px rgb(var(--pc)), 0 0 0 5px rgba(var(--pc),.2); }
.pmark { background: var(--primary); box-shadow: none; }
.marq { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); box-shadow: none; }

/* Inline editor, model picker, project sheet and floating menus. */
.ewrap, .hub .ewrap { background: var(--card); border-color: var(--border); border-radius: 0 0 11px 11px; }
.hub .ewrap { border-radius: 12px; box-shadow: var(--popover-shadow); }
.eintro .epurpose, .whyl { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); border-radius: 8px; }
.slist, .dlist, .dins { border-radius: 8px; background: var(--secondary); box-shadow: inset 0 0 0 1px var(--border); }
.slist > .set, .slist > .task, .drow2 + .drow2, .set, .task, .efoot { border-color: var(--border); }
.slist > .set:hover, .slist > .task:hover, .drow2:hover { background: var(--surface-raised); }
.slist > .set.changed { background: color-mix(in srgb, var(--warning) 5%, var(--card)); }
.ename, .fld, .pname, .dsel select, .dt select, .dhand {
  border-color: var(--input); border-radius: 7px; background: var(--sidebar-control-surface);
}
.ename:focus, .fld:focus, .pname:focus, .dsel select:focus, .dt select:focus, .dhand:focus { border-color: var(--primary); }
.dpick option, .dsel option { background: var(--popover); }
.dpick select:hover, .dpick select:focus { background: var(--accent); border-color: var(--editor-border); }
.sw { background: var(--input); box-shadow: none; }
.sw::after { background: var(--muted-foreground); }
.sw[aria-checked="true"] { background: var(--primary); }
.sw[aria-checked="true"]::after { background: var(--knob); }
.choice button, .btn, .tfast { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }
.choice button[aria-checked="true"], .tseg button[aria-checked="true"], .mseg button[aria-pressed="true"] {
  background: var(--accent); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--editor-border);
}
.btn.pri { background: var(--primary); color: var(--primary-foreground); box-shadow: none; }
.btn.ghost { background: none; box-shadow: none; }
.btn.ghost:hover { background: var(--accent); }
.dadd { border-color: var(--editor-border); border-radius: 8px; }
.dadd:hover { border-color: var(--primary); background: var(--accent); }
.menu, .tip, .toast, .caption, .etb, .selbar, .tkpane, .xpane, .actx {
  border-radius: 10px; background: var(--popover);
  box-shadow: inset 0 0 0 1px var(--editor-border), var(--popover-shadow);
}
.tkpane::after, .xnotch { background: var(--popover); box-shadow: 1px 1px 0 var(--editor-border); }
.tkpane.below::after { box-shadow: -1px -1px 0 var(--editor-border); }
.menu, .ebody, .projb, .mpl { scrollbar-color: var(--input) transparent; }
.mo:hover, .mo:focus-visible, .mrow:hover, .mside:hover { background: var(--accent); }
.mo[aria-selected="true"], .mrow[aria-selected="true"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--editor-border); }
.mhead, .mbar, .msearch, .mtraits, .mtop, .mbot, .tkr.tot { border-color: var(--border); }
.mbar { background: var(--sidebar-control-surface); }
.mmain { background: var(--card); }
.mside.on::after { background: var(--primary); }
.mside .pico, .pico { --pb: var(--card); }
.mcard { background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--editor-border), var(--popover-shadow); }
.modal { background: color-mix(in srgb, var(--scrim) 50%, transparent); }
.mta, .mprev pre { background: var(--code-background); }
.mprev code { background: var(--accent); }
.mic { background: var(--accent); color: var(--primary); box-shadow: none; }
.pcard { border-radius: 9px; background: var(--secondary); box-shadow: inset 0 0 0 1px var(--border); }
.pcard.on { box-shadow: inset 0 0 0 1px var(--editor-border); }
.pcard.bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 45%, var(--border)); }
.pbadge { background: var(--warning-surface); color: var(--warning); box-shadow: none; }
.pstate { letter-spacing: .02em; }
.pcard.on .pstate { background: var(--accent); color: var(--primary); }
.pask, .pgrant, .xtile, .xpick, .tsum div { border-radius: 7px; background: var(--surface-raised); box-shadow: none; }
.pask:hover, .pgrant:hover { background: var(--accent); transform: none; }
.pnotes li::before { background: var(--primary); box-shadow: none; }
.pok, .ladok { color: var(--success); }
.pok svg { background: var(--success-surface); box-shadow: none; }
.pmeter { background: var(--border); }
.pmeter span { background: var(--primary); }
.prov { box-shadow: inset 0 0 0 1px var(--border); }
.prov.on { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--editor-border); }
.prov:hover { background: var(--accent); }
.rung { background: var(--surface-raised); }
.rung.on { background: var(--accent); box-shadow: inset 0 0 0 1px var(--editor-border); }
.rung.on .bar i, .xrungs i.on { background: var(--primary); box-shadow: none; }
.xnow, .wtag.sweet { background: var(--success-surface); color: var(--success); box-shadow: none; }
.wtag.warm, .tfast[aria-pressed="true"], .mbadge { background: var(--warning-surface); color: var(--warning); box-shadow: none; }
.wtag.hot { background: var(--error-surface); color: var(--error); box-shadow: none; }
.xh .xi, .xh .xi.gold { background: var(--accent); color: var(--primary); box-shadow: none; }
.wtag, .xchip, .pcard .lanes span { font-weight: 500; }
.tok, .actl, .vbadge { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--editor-border), var(--editor-shadow); }
.tok:hover, .actl:hover { box-shadow: inset 0 0 0 1px var(--primary), var(--editor-shadow); }
.tok.hot { color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning); }
.tok.hot .tn, .tok.hot .tc { color: var(--warning); }
.tks i { box-shadow: 0 0 0 1.5px var(--card); }
.actdot { animation: none; }
.stg::before { background: rgba(var(--rgb),.25); }
.stg::after, .stg-hand::after { background: var(--card); }
.stg b { font-weight: 600; color: var(--foreground); }
.stg img, .stg .stg-ic, .stg-hand img { border-radius: 29%; box-shadow: 0 0 0 1px rgba(var(--rgb,111,157,255),.5); }
.stg-hand img:first-child { box-shadow: 0 0 0 1px rgba(var(--ra),.5); }
.stg-hand img:nth-of-type(2) { box-shadow: 0 0 0 1px rgba(var(--rb),.5); }
.stg-hand { letter-spacing: .025em; font-weight: 600; }

/* A visible focus ring also works on the graph's custom buttons. */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.msq:focus-visible { outline: none; }
.msearch:focus-within { box-shadow: inset 0 -2px var(--ring); }
@media (max-width: 1080px) {
  .bot .layer span { display: none; }
}
@media (max-width: 640px) {
  .top2 { top: 74px; }
  .proj { top: 168px; }
  .top1 .hgrp { gap: 4px; }
  .top1 .hgrp > .pill + .pill { padding-left: 4px; }
  .bot { right: 16px; flex-wrap: wrap; gap: 5px; }
}