/* The agent org chart (/org-chart). Everything here is under `.oc` — the page's
   <main> and the layer that holds its sheet, toast and drop target — because
   styles.css already gives `.card`, `.pill` and `.btn` a meaning of their own.
   The look is the home page's relay drawn as a whole org chart: you on top, a
   dashed bracket down to the agents (their own marks), each agent's role under
   its name and its tools as a row of badges under that, the agents that report
   to it a level below, and the tools every agent shares in one dashed well. */
.oc {
  --ink-2: rgba(28, 31, 28, .68);       /* the home page's secondary ink, 5.4:1 on canvas */
  --ink-3: rgba(28, 31, 28, .3);
  --ink-4: rgba(28, 31, 28, .18);
  --edge: rgba(28, 31, 28, .07);
  --moss-wash: rgba(61, 89, 71, .1);
  --you: #0071e3;                       /* the person's message colour on the home page */
  --display: ui-serif, "Newsreader", Georgia, serif;
  --mark-shadow: 0 1px 2px rgba(28, 31, 28, .06), 0 16px 28px -16px rgba(28, 31, 28, .45);
  --card-shadow: 0 1px 2px rgba(28, 31, 28, .04), 0 10px 24px -18px rgba(28, 31, 28, .32);
  --lift: 0 2px 6px rgba(28, 31, 28, .08), 0 24px 44px -18px rgba(28, 31, 28, .42);
  --ease: cubic-bezier(.25, .1, .25, 1);
}
body.oc-dragging, body.oc-dragging * { cursor: grabbing !important; }
.oc [hidden] { display: none !important; }

/* ---- the head, the Grok Bot card, the bar over the chart */
.oc .oc-head { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 56px 0 36px; }
.oc .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.oc .kicker svg { width: 15px; height: 15px; }
.oc h1 {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -.021em; text-wrap: balance;
}
.oc .oc-lede { margin: 4px 0 0; max-width: 34em; font: 400 19px/27px var(--font-system); color: var(--ink-2); text-wrap: pretty; }

.oc .oc-ask {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 18px;
  max-width: 760px; margin: 0 auto 44px; padding: 20px 22px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 24px; box-shadow: var(--card-shadow);
}
.oc .oc-ask-mark { width: 56px; height: 56px; }
.oc .oc-ask-mark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(28, 31, 28, .22)); }
.oc .oc-ask-body { min-width: 0; display: grid; gap: 4px; }
.oc .oc-ask h2 { margin: 0; font: 600 17px/22px var(--font-system); }
.oc .oc-ask p { margin: 0; font: 400 15px/21px var(--font-system); color: var(--ink-2); }
.oc .oc-ask-text { margin-top: 4px; }
.oc .oc-ask-text summary { cursor: pointer; width: max-content; font: 500 14px/20px var(--font-system); color: var(--moss); }
.oc .oc-ask-text pre {
  margin: 10px 0 0; padding: 14px 16px; max-height: 260px; overflow: auto;
  background: var(--canvas); border-radius: 14px; border: 1px solid var(--edge);
  font: 400 13px/19px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.oc .oc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 28px; }
.oc .oc-note { margin: 0; font: 400 15px/21px var(--font-system); color: var(--ink-2); }
.oc .oc-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oc .oc-btn-quiet.oc-add { gap: 6px; display: inline-flex; align-items: center; }
.oc .oc-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.oc .oc-btn, .oc .oc-btn-quiet {
  all: unset; box-sizing: border-box; min-height: 44px; padding: 0 20px; border-radius: 999px;
  display: inline-grid; place-items: center; cursor: pointer; white-space: nowrap; font: 600 15px/20px var(--font-system);
}
.oc .oc-btn { background: var(--ink); color: var(--paper); }
/* Save, Saving… and Saved take one width, so the bar holds still while it saves. */
.oc #oc-save { min-width: 7em; }
.oc .oc-btn-line { all: unset; box-sizing: border-box; min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-grid; place-items: center; cursor: pointer; white-space: nowrap; font: 600 15px/20px var(--font-system); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); }
.oc .oc-btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.oc .oc-btn-line:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.oc .oc-btn-quiet { color: var(--ink-2); padding: 0 10px; }
.oc .oc-btn-quiet:hover { color: var(--ink); }
.oc .oc-btn-quiet.danger, .oc .oc-btn-quiet.danger:hover { color: #c4352b; }
.oc .oc-btn.danger { background: #c4352b; color: #fff; }
.oc .oc-btn:focus-visible, .oc .oc-btn-quiet:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

/* The chart as text, for an agent reading the page unrun: there, not shown. Not hidden
   or aria-hidden, which reader tools skip; the script takes it away once the chart is drawn. */
.oc .oc-as-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the chart */
.oc .chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
/* The tree: each branch is a column — the agent, its tools, then the agents that report
   to it in a row below. It never shows a scrollbar: a chart wider than the page shrinks
   to 0.8, and one wider still slides under the pan bar (.panning); a phone gets the
   outline (.outline) — `fitTree` in org-chart.js decides. */
.oc .tree-scroll { min-width: 0; padding: 16px 0 8px; margin-top: -16px; overflow-x: clip; }
/* The tree, not the outline, takes the window's width less a 40 px gutter each side. */
.oc .tree-scroll.bleed { width: max(100%, calc(100vw - 80px)); margin-left: min(0px, calc(50% - 50vw + 40px)); }
/* A chart still too wide at 0.8 slides. No system scrollbar: the side with more fades
   out, and the pan bar under the chart shows where you are. */
.oc .tree-scroll.panning { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); }
.oc .tree-scroll.panning::-webkit-scrollbar { display: none; }
.oc .tree-scroll.panning .tree-fit { overflow: clip; }
.oc .tree-scroll.panning.grabbing { cursor: grabbing; user-select: none; }
.oc .pan {
  position: relative; z-index: 6; isolation: isolate; justify-self: center; margin: -36px 0 -16px;
  display: flex; align-items: center; gap: 4px; padding: 4px;
}
/* The pill's face, under its arrows and track; and, while it floats, a band of the page's
   own colour behind it, so what passes under reads whole or not at all. */
.oc .pan::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--paper); border: 1px solid var(--edge); }
.oc .pan.floating { position: sticky; bottom: 20px; }
.oc .pan.floating::after { box-shadow: var(--card-shadow); }
.oc .pan.floating::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -20px; width: calc(100vw - 80px); height: 92px;
  transform: translateX(-50%); background: linear-gradient(to top, var(--canvas) 55%, rgba(245, 242, 232, 0)); pointer-events: none;
}
.oc .pan-step { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.oc .pan-step:hover:not([aria-disabled="true"]) { background: var(--canvas); }
.oc .pan-step[aria-disabled="true"] { color: var(--ink-4); cursor: default; }
.oc .pan-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oc .pan-track { position: relative; width: 168px; height: 36px; cursor: pointer; }
.oc .pan-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ink-4); }
.oc .pan-thumb { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--ink-3); cursor: grab; transition: background-color 160ms; }
.oc .pan:hover .pan-thumb, .oc .pan-thumb.held { background: var(--ink); }
body.oc-dragging .oc .pan { opacity: 0; pointer-events: none; }
.oc .tree { position: relative; width: max-content; min-width: 100%; display: flex; justify-content: center; }
.oc .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.oc .wire { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; transition: stroke 160ms; }
.oc .wire.lit { stroke: var(--moss); stroke-width: 2; stroke-dasharray: none; }
.oc .branch { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; transition: opacity 160ms; }
.oc .branch.placeholder { opacity: .3; }
.oc .children { display: flex; align-items: flex-start; justify-content: center; gap: 16px; margin-top: 56px; min-height: 120px; }
.oc .children:not(#agents) { min-height: 0; }

/* The outline: one agent a row, the mark beside its name, and the agents under it
   indented on a dashed rail — the bracket turned on its side. A phone's chart. */
.oc .tree.outline { display: block; width: auto; min-width: 0; max-width: 620px; margin: 0; }
.oc .tree.outline .wires { display: none; }
.oc .tree.outline .branch { display: grid; gap: 14px; align-items: stretch; }
.oc .tree.outline .children { display: grid; justify-content: stretch; justify-items: stretch; gap: 22px; width: auto; margin: 0 0 0 27px; padding-left: 18px; border-left: 1.5px dashed var(--ink-3); min-height: 0; }
.oc .tree.outline .col { width: auto; gap: 8px; }
.oc .tree.outline .node { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; justify-items: start; align-items: center; text-align: left; }
.oc .tree.outline .node .mark { grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
.oc .tree.outline .node .name { align-self: end; font-size: 15px; line-height: 20px; }
.oc .tree.outline .node .role-pill { align-self: start; padding: 4px 11px; font-size: 13px; line-height: 17px; }
.oc .tree.outline .node:hover .mark { transform: none; }
.oc .tree.outline .me { width: auto; }
.oc .tree.outline .me .mark-me { width: 64px; height: 64px; }
.oc .tree.outline .me { grid-template-columns: 64px minmax(0, 1fr); }
.oc .tree.outline .mark-me .initial { font-size: 32px; }
.oc .tree.outline .mark-instinct .initial { font-size: 32px; }
.oc .tree.outline .initial { font-size: 22px; }
.oc .tree.outline .kit { justify-content: flex-start; margin: -4px 0 0 67px; gap: 6px; padding: 3px; }
.oc .tree.outline .kit { gap: 8px; }
.oc .tree.outline .tool.dot {
  width: auto; height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 7px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--edge); box-shadow: var(--card-shadow);
}
.oc .tree.outline .tool.dot .badge { width: 30px; height: 30px; box-shadow: none; }
/* Four levels down a phone has ~130 px for a tool: the chip shrinks and its name ends in "…". */
.oc .tree.outline .branch, .oc .tree.outline .branch > *, .oc .tree.outline .col > * { min-width: 0; }
.oc .tree.outline .tool.dot { max-width: 100%; min-width: 0; }
.oc .tree.outline .tool.dot .badge { flex: none; }
.oc .tree.outline .tool.dot .tip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oc .tree.outline .tool.dot .badge svg { width: 14px; height: 14px; }
.oc .tree.outline .tool.dot .tip, .oc .tree.outline .add-dot .tip {
  position: static; opacity: 1; transform: none; padding: 0; background: none; color: var(--ink); font: 600 14px/18px var(--font-system);
}
.oc .tree.outline .add-dot { width: auto; height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; border-radius: 999px; }
.oc .tree.outline .add-dot .tip { display: inline; color: var(--ink-2); font-weight: 500; }
/* The labelled "Add tool" (an agent with no tools yet) already says it: its tip stays hidden. */
.oc .tree.outline .add-dot.labelled { font: 500 14px/18px var(--font-system); color: var(--ink-2); }
.oc .tree.outline .add-dot.labelled .tip { display: none; }
/* A phone: smaller marks and a tighter indent, so two tools fit on a line two levels down. */
@media (max-width: 480px) {
  .oc .tree.outline .children { margin-left: 23px; padding-left: 14px; }
  .oc .tree.outline .node { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; }
  .oc .tree.outline .node .mark { width: 48px; height: 48px; }
  .oc .tree.outline .kit { margin-left: 57px; }
  .oc .tree.outline .node.me { grid-template-columns: 64px minmax(0, 1fr); }
  .oc .tree.outline .node.me .mark { width: 64px; height: 64px; }
}

/* The first look: the chart settles in, top to bottom, once. */
@media (prefers-reduced-motion: no-preference) {
  .oc .tree.reveal .branch > .col { animation: oc-in 460ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
}
@keyframes oc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.oc .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.oc .empty { margin: 0; align-self: center; color: var(--ink-2); }
.oc .children:has(> .branch) > .empty, .oc .row:has(> .card) > .empty { display: none; }

.oc .card {
  all: unset; box-sizing: border-box; position: relative;
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms, transform 300ms var(--ease), border-color 160ms, box-shadow 160ms, background-color 160ms;
}
.oc .card:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; border-radius: 14px; }
.oc .col { flex: none; display: grid; gap: 10px; width: 164px; align-content: start; }

/* a person or an agent: the mark, the name, the role */
.oc .node { display: grid; justify-items: center; align-content: start; gap: 6px; width: 100%; text-align: center; }
.oc .node .name { max-width: 100%; font: 600 15px/20px var(--font-system); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc .role-pill {
  display: block; max-width: 100%; box-sizing: border-box;
  padding: 4px 11px; border-radius: 12px; background: var(--paper); border: 1px solid var(--edge);
  font: 500 13px/17px var(--font-system); color: var(--ink-2);
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
/* Two lines at most. The clamp sits on the text, inside the padding, so no sliver of a
   third line shows in the pill's bottom padding. */
.oc .role-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.oc .role-pill.unset { background: none; border: 1px dashed rgba(28, 31, 28, .5); color: var(--ink-2); }
.oc .node.lit .role-pill:not(.unset), .oc .node.target .role-pill:not(.unset) { background: var(--moss-badge); border-color: transparent; color: var(--moss); }
.oc .me { cursor: pointer; width: 160px; }

.oc .mark {
  position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin-bottom: 4px;
  border-radius: 50%; box-shadow: var(--mark-shadow); transition: transform 300ms var(--ease), box-shadow 160ms;
}
.oc .mark > * { grid-area: 1 / 1; }
.oc .node:hover .mark { transform: translateY(-3px); }
.oc .mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; pointer-events: none; -webkit-user-drag: none; }
.oc .mark-me { width: 108px; height: 108px; background: var(--you); }
.oc .mark-me .initial { color: #fff; font: 500 54px/1 var(--display); }
.oc .me .name { font-size: 17px; line-height: 22px; }
.oc .initial { font: 600 30px/1 var(--font-system); color: var(--ink-2); }
.oc .mark-letter { background: var(--paper); }
/* Clawd stands with no disc, as on the home page ("no outside circle"); Dot is ChatGPT's
   own render with its props beside it, so it stands bare and is scaled past the box. */
.oc .mark-clawd, .oc .mark-dot, .oc .mark-grok { box-shadow: none; border-radius: 0; }
.oc .mark-clawd img, .oc .mark-dot img { background: none; border-radius: 0; object-fit: contain; }
.oc .mark-dot img { transform: scale(1.68); }
/* An app's own icon stands bare, its margin and shape its own (Web/scripts/agent-marks.sh). */
.oc .mark-app { box-shadow: none; border-radius: 0; }
.oc .mark-app img { background: none; border-radius: 0; object-fit: contain; transform: scale(1.18); filter: drop-shadow(0 6px 8px rgba(28, 31, 28, .18)); }
/* Codex's icon is a full square that macOS rounds itself: drawn a little inside its box,
   its corners rounded as the Dock rounds them. */
.oc .mark-codex img { width: 94%; height: 94%; transform: none; border-radius: 22.5%; box-shadow: inset 0 0 0 1px rgba(28, 31, 28, .06); }
.oc .mark-instinct { background: #fff; }
.oc .mark-instinct .initial { color: #000; font: 500 46px/1 var(--display); }
.oc .face { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 12px rgba(28, 31, 28, .22)); }
.oc .face path { fill: #f9f9f9; }
.oc .face-look, .oc .face-blink { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .oc .face-blink { animation: oc-blink 3.7s var(--blink, 1.2s) infinite; }
  .oc .face-look { animation: oc-gaze 11s ease-in-out infinite; }
}
@keyframes oc-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes oc-gaze { 0%, 100% { transform: none; } 30% { transform: translate(-7px, 3px); } 60% { transform: translate(4px, -3px); } }

/* an agent's own tools: a row of badges under its role, the way the home page badges
   Dot's email on its mark — the name shows on hover — so the line to the agents below
   it starts right under the agent, not under a list */
.oc .kit { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 3px; border-radius: 20px; transition: background-color 160ms, box-shadow 160ms; }
.oc .kit.over { background: var(--moss-wash); box-shadow: 0 0 0 1.5px var(--moss); }
.oc .tool {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px;
  min-height: 40px; padding: 6px 10px 6px 7px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 13px; box-shadow: var(--card-shadow);
}
.oc .tool:hover { transform: translateY(-1px); }
.oc .tool.lit { border-color: var(--moss); box-shadow: inset 0 0 0 999px var(--moss-wash), var(--card-shadow); }
.oc .tool.placeholder { opacity: .3; }
.oc .tool .name { font: 600 14px/18px var(--font-system); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oc .shared .tool { width: 168px; }
.oc .badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); --mark-third: #8fb39b; }
.oc .badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oc .badge svg.solid { fill: currentColor; stroke: none; }
.oc .tool.dot { display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; }
.oc .tool.dot .badge { width: 30px; height: 30px; box-shadow: 0 1px 2px rgba(28, 31, 28, .1), 0 6px 12px -8px rgba(28, 31, 28, .5); transition: box-shadow 160ms; }
.oc .tool.dot .badge svg { width: 14px; height: 14px; }
.oc .tool.dot:hover { transform: translateY(-2px); }
.oc .tool.dot.lit { border: 0; box-shadow: none; }
.oc .tool.dot.lit .badge { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--moss); }
.oc .tool.dot:focus-visible { outline-offset: 3px; border-radius: 50%; }
.oc .tip {
  position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 5;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--paper); font: 600 12px/16px var(--font-system);
  opacity: 0; transform: translateX(-50%) translateY(3px); transition: opacity 120ms, transform 120ms;
}
.oc .dot:hover .tip, .oc .dot:focus-visible .tip, .oc .add-dot:hover .tip, .oc .add-dot:focus-visible .tip { opacity: 1; transform: translateX(-50%); }
body.oc-dragging .oc .tip { display: none; }
/* A shrunk tree's tool names stay full size: the tip is the only name an icon has. */
.oc .tree .tip { bottom: calc(100% + 7px / var(--zoom, 1)); padding: calc(3px / var(--zoom, 1)) calc(9px / var(--zoom, 1)); font-size: calc(12px / var(--zoom, 1)); line-height: calc(16px / var(--zoom, 1)); }

.oc .add { all: unset; box-sizing: border-box; cursor: pointer; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.oc .add:hover { color: var(--ink); }
.oc .add:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; border-radius: 14px; }
.oc .plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.oc .add-slot { display: grid; justify-items: center; gap: 10px; width: 120px; font: 500 15px/20px var(--font-system); }
.oc .add-slot .plus { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; border: 1.5px dashed rgba(28, 31, 28, .5); }
.oc .add-slot:hover .plus { border-color: var(--ink-2); }
.oc .add-tool { display: grid; grid-template-columns: 26px auto; align-items: center; gap: 9px; min-height: 40px; padding: 6px 10px 6px 7px; border-radius: 13px; border: 1.5px dashed var(--ink-4); font: 500 14px/18px var(--font-system); }
.oc .add-tool .plus { display: grid; place-items: center; width: 26px; height: 26px; }
.oc .add-tool:hover { border-color: var(--ink-3); }
.oc .shared .add-tool { width: 168px; }
.oc .add-dot { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed rgba(28, 31, 28, .5); color: rgba(28, 31, 28, .62); transition: border-color 160ms, color 160ms; }
.oc .add-dot:hover { border-color: var(--ink-2); color: var(--ink); }
/* An agent with no tools yet says so in words, not with a lone "+". */
.oc .add-dot.labelled { width: auto; display: inline-flex; gap: 4px; padding: 0 11px 0 6px; border-radius: 999px; white-space: nowrap; font: 500 12px/16px var(--font-system); }
.oc .add-dot.labelled .tip { display: none; }
.oc .add-dot .plus svg { width: 14px; height: 14px; }
.oc .add-dot:focus-visible { border-radius: 50%; }

/* the tools every agent has, once, under all of them */
.oc .shared { display: grid; gap: 14px; padding: 18px; border-radius: 24px; border: 1.5px dashed var(--ink-4); transition: background-color 160ms, border-color 160ms; }
.oc .shared.over { background: var(--moss-wash); border-color: var(--moss); }
.oc .shared-head { display: grid; gap: 2px; }
.oc .shared-name { font: 600 17px/22px var(--font-system); }
.oc .shared-sub { font: 400 13px/18px var(--font-system); color: var(--ink-2); }

.oc .node.target .mark { box-shadow: 0 0 0 4px var(--canvas), 0 0 0 6.5px var(--moss); }
.oc .ghost { position: fixed; left: 0; top: 0; z-index: 50; margin: 0; pointer-events: none; opacity: .97; }
.oc .ghost.tool { box-shadow: var(--lift); }
.oc .drop-line { position: fixed; z-index: 45; border-radius: 3px; background: var(--moss); pointer-events: none; box-shadow: 0 0 0 3px var(--moss-wash); }
.oc .hint {
  position: absolute; left: 50%; top: -16px; transform: translateX(-50%); z-index: 3;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--moss); color: var(--paper); font: 600 13px/17px var(--font-system); box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

/* ---- bottom of the screen: where a card is dropped to go, and what just changed */
.oc .trash, .oc .toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  border-radius: 999px; font: 600 15px/20px var(--font-system); box-sizing: border-box; max-width: calc(100vw - 32px);
}
.oc .trash { z-index: 40; padding: 15px 26px; white-space: nowrap; background: var(--paper); border: 1.5px dashed var(--ink-3); color: var(--ink-2); box-shadow: var(--card-shadow); }
.oc .trash.over { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }
.oc .toast { z-index: 45; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; background: var(--ink); color: var(--paper); font-weight: 500; box-shadow: var(--lift); }
.oc .toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc .toast button { all: unset; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-weight: 600; background: rgba(255, 255, 255, .12); }
.oc .toast button[hidden] { display: none; }
.oc .toast button:focus-visible { outline: 2px solid var(--paper); }

/* ---- the sheet a tap opens */
.oc .sheet {
  position: absolute; z-index: 30; box-sizing: border-box; width: 340px; max-width: calc(100vw - 32px);
  display: grid; gap: 18px; padding: 20px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 24px; box-shadow: var(--lift);
}
.oc .sheet[hidden], .oc .trash[hidden], .oc .toast[hidden], .oc .field[hidden] { display: none; }
.oc .sheet-kind { font: 700 11px/13px var(--font-system); letter-spacing: 1.3px; text-transform: uppercase; color: var(--moss); }
.oc .field { display: grid; gap: 6px; }
.oc .field-label, .oc .pick legend { padding: 0; font: 500 13px/18px var(--font-system); color: var(--ink-2); }
.oc .field input, .oc .field select {
  box-sizing: border-box; width: 100%; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--ink-4); background-color: var(--canvas); color: var(--ink); font: 400 17px/22px var(--font-system);
}
.oc .field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1f1c' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.oc .field input::placeholder { color: rgba(28, 31, 28, .62); }
.oc .field input:focus, .oc .field select:focus { outline: 2px solid var(--moss); outline-offset: 0; border-color: transparent; }
.oc .sheet-body { display: grid; gap: 16px; }
.oc .sheet-body:empty { display: none; }
.oc .pick { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.oc .pick legend { margin-bottom: 8px; }
.oc .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oc .chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--ink-4); cursor: pointer; font: 500 14px/18px var(--font-system); color: var(--ink-2);
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.oc .chip input { position: absolute; opacity: 0; pointer-events: none; }
.oc .chip .tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.oc .chip .tick svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.oc .chip:has(input:checked) { background: var(--moss-badge); border-color: transparent; color: var(--moss); }
.oc .chip:has(input:checked) .tick { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.oc .chip:has(input:checked) .tick svg { opacity: 1; }
.oc .chip:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: 2px; }
.oc .looks { display: flex; flex-wrap: wrap; gap: 7px; }
.oc .look { position: relative; cursor: pointer; border-radius: 50%; }
.oc .look input { position: absolute; opacity: 0; pointer-events: none; }
.oc .look .mark { width: 36px; height: 36px; margin: 0; box-shadow: 0 1px 2px rgba(28, 31, 28, .08), 0 8px 14px -8px rgba(28, 31, 28, .4); }
.oc .look .mark-clawd, .oc .look .mark-dot, .oc .look .mark-grok, .oc .look .mark-app { box-shadow: none; }
.oc .look .initial { font-size: 16px; }
.oc .look .mark-instinct .initial { font-size: 22px; }
.oc .look .face { filter: drop-shadow(0 4px 5px rgba(28, 31, 28, .22)); }
.oc .look:has(input:checked) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--moss); }
.oc .look:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: 7px; }
.oc .grok-colors { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 0; }
.oc .swatch { position: relative; cursor: pointer; border-radius: 50%; }
.oc .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.oc .swatch span { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 31, 28, .1); }
.oc .swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--moss); }
.oc .swatch:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: 5px; }
.oc .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.oc .switch-row .t { display: grid; }
.oc .switch-row .t b { font: 600 15px/20px var(--font-system); }
.oc .switch-row .t span { font: 400 13px/18px var(--font-system); color: var(--ink-2); }
.oc input[role="switch"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 51px; height: 31px; border-radius: 999px; background: var(--ink-4); cursor: pointer; transition: background-color 160ms;
}
.oc input[role="switch"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform 200ms var(--ease);
}
.oc input[role="switch"]:checked { background: var(--moss); }
.oc input[role="switch"]:checked::before { transform: translateX(20px); }
.oc input[role="switch"]:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.oc .note { margin: 0; font: 400 13px/18px var(--font-system); color: var(--ink-2); }
.oc .sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.oc .sheet-actions #sheet-done { margin-left: auto; }
.oc .icon-q { box-sizing: border-box; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--ink-4); background: var(--canvas); color: var(--ink); font: 400 15px/20px var(--font-system); }
.oc .icon-q::placeholder { color: rgba(28, 31, 28, .62); }
.oc .icon-q:focus { outline: 2px solid var(--moss); outline-offset: 0; border-color: transparent; }
.oc .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, 36px); justify-content: space-between; gap: 8px; max-height: 176px; overflow-y: auto; padding: 4px 3px; margin: 0 -3px; }
.oc .icon-opt { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.oc .icon-opt .badge { width: 32px; height: 32px; }
.oc .icon-opt .badge svg { width: 15px; height: 15px; }
.oc .icon-opt[aria-selected="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--moss); }
.oc .icon-opt:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.oc .icon-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* ---- Share: the short link, and the chart as a picture */
.oc .share { width: 380px; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.oc .share-head { display: flex; align-items: center; justify-content: space-between; margin: -6px -8px -4px 0; }
.oc .share-head .sheet-kind { margin: 0; }
.oc .share-close { all: unset; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--ink-2); }
.oc .share-close:hover { background: var(--canvas); color: var(--ink); }
.oc .share-close:focus-visible { outline: 2px solid var(--moss); }
.oc .share-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.oc .share-shot { margin: 0; display: grid; place-items: center; height: 190px; padding: 10px; box-sizing: border-box; border-radius: 16px; background: var(--canvas); border: 1px solid var(--edge); overflow: hidden; }
.oc .share-shot img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 160ms; }
.oc .share-shot img:not([src]) { visibility: hidden; }
.oc .share-shot.is-drawing img { opacity: .35; }
.oc .share-link { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 16px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--ink-4); }
.oc .share-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/20px var(--font-system); color: var(--ink); user-select: all; -webkit-user-select: all; }
.oc .share-url.is-waiting { color: var(--ink-2); user-select: none; -webkit-user-select: none; }
.oc .share-url.is-error { white-space: normal; padding: 6px 0; font-size: 13px; line-height: 18px; color: #c4352b; user-select: text; }
.oc .share-link .oc-btn { min-height: 40px; padding: 0 16px; }
.oc .share-link .oc-btn:disabled { opacity: .45; cursor: default; }
.oc .share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc .share-actions .oc-btn-line { min-height: 40px; padding: 0 16px; }
.oc .share-actions .oc-btn-line:disabled { opacity: .45; cursor: default; }
.oc .share-stop { margin-left: auto; }
.oc .share-actions [hidden] { display: none; }
/* A phone: the whole link on a line of its own, Copy link under it. */
@media (max-width: 480px) {
  .oc .share-link { flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 18px; }
  .oc .share-url { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
  .oc .share-link .oc-btn { flex: 1; min-height: 44px; }
}
/* Your photo in your mark, and its picker in your sheet. */
.oc .mark-me.has-photo { background: #fff; }
.oc .mark-me.has-photo .initial { display: none; }
.oc .me-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc .me-photo .mark-me { width: 56px; height: 56px; margin: 0; }
.oc .me-photo .mark-me .initial { font-size: 28px; }
.oc .photo-pick { position: relative; overflow: hidden; min-height: 40px; padding: 0 16px; }
.oc .me-photo .oc-btn-line { min-height: 40px; padding: 0 14px; font-size: 14px; }
.oc .me-photo .mark-me { margin-right: 4px; }
.oc .photo-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.oc .photo-pick:focus-within { outline: 2px solid var(--moss); outline-offset: 2px; }
/* The picture's copy of the tree, laid out off-screen while Share draws it. */
.oc-shot { position: absolute; left: -100000px; top: 0; display: grid; gap: 44px; width: max-content; pointer-events: none; }
.oc-shot .tree { min-width: 0; }

.oc .link-btn { all: unset; cursor: pointer; font: 500 13px/18px var(--font-system); color: var(--moss); }
.oc .link-btn[hidden] { display: none; }
.oc .link-btn:hover { color: var(--ink); }

.oc .oc-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .25); }
.oc .oc-confirm-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .25); }
.oc .oc-confirm {
  box-sizing: border-box; width: min(360px, 100%); display: grid; gap: 10px; padding: 22px;
  background: var(--paper); border-radius: 24px; box-shadow: var(--lift);
}
.oc .oc-confirm h2 { margin: 0; font: 600 17px/22px var(--font-system); }
.oc .oc-confirm p { margin: 0; font: 400 15px/21px var(--font-system); color: var(--ink-2); }
.oc .oc-confirm .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

@media (max-width: 720px) {
  .oc .oc-head { padding: 36px 0 28px; }
  .oc .oc-lede { font-size: 17px; line-height: 24px; }
  .oc .oc-ask { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; margin-bottom: 36px; }
  .oc .oc-ask-mark { width: 44px; height: 44px; }
  .oc .oc-ask { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
  .oc .oc-ask p { display: none; }
  .oc .oc-ask > .oc-btn { padding: 0 16px; }
  .oc .oc-ask-text pre { margin-left: -58px; }
  /* "Show the message" gets a line of its own under the title and the button, not under the button's edge. */
  .oc .oc-ask-body { display: contents; }
  .oc .oc-ask h2 { grid-column: 2; grid-row: 1; }
  .oc .oc-ask > .oc-btn { grid-column: 3; grid-row: 1; }
  .oc .oc-ask-text { grid-column: 2 / -1; grid-row: 2; margin-top: -6px; }
  .oc .chart { gap: 40px; }
  /* The bar, two even rows: the quiet pair, then Share beside Save. */
  .oc .oc-bar-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .oc .oc-bar-actions .oc-btn-quiet { justify-content: center; }
  .oc .shared .tool, .oc .shared .add-tool { width: calc(50% - 5px); }
  .oc .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 85vh; overflow-y: auto;
    border-radius: 24px 24px 0 0; border-bottom: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .oc .sheet .sheet-actions {
    position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); z-index: 1;
    margin: 0 calc(-1 * max(20px, env(safe-area-inset-right, 0px))) calc(-20px - env(safe-area-inset-bottom, 0px));
    padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); box-shadow: 0 -1px 0 var(--edge);
  }
}
@media (pointer: coarse) {
  .oc .tool.dot::after, .oc .add-dot::after { content: ""; position: absolute; inset: -7px; }
  .oc .kit { gap: 14px; }
  .oc .chip { min-height: 44px; }
  .oc .swatch::after { content: ""; position: absolute; inset: -7px; }
  .oc .grok-colors { gap: 14px; }
  .oc .pan-step { width: 44px; height: 44px; }
  .oc .pan-track { height: 44px; }
  .oc .look .mark { width: 44px; height: 44px; }
  .oc .toast button { min-height: 44px; padding: 0 16px; box-sizing: border-box; display: inline-grid; place-items: center; }
  .oc .oc-ask-text summary { padding: 12px 0; }
  .oc .share-actions .oc-btn-line { min-height: 44px; }
  .oc .share-close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc *, .oc *::before { transition: none !important; }
}

/* ---- the home page's footer (homepage.css, "footer"), on this page too */
.oc-foot { margin-top: 64px; }
.oc-foot .sitefoot-inner { padding: 50px var(--shell-gutter) 62px; align-items: center; column-gap: var(--space-10); }
.oc-foot .foot-brand img { width: 22px; height: 22px; }
.oc-foot .foot-brand span { font-size: 15px; }
.oc-foot .foot-links { display: flex; flex-wrap: wrap; gap: 10px var(--space-9); margin-left: var(--space-8); }
.oc-foot .sitefoot-inner .foot-social { margin-left: auto; }
.oc-foot .sitefoot-inner .foot-end { margin-left: calc(24px - var(--space-9)); }
@media (max-width: 720px) {
  .oc-foot { margin-top: 48px; }
  .oc-foot .sitefoot-inner { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-8); row-gap: var(--space-10); padding: 44px var(--shell-gutter) 54px; }
  .oc-foot .foot-links { margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--space-8); }
  .oc-foot .foot-links a:nth-child(1) { grid-area: 1 / 1; }
  .oc-foot .foot-links a:nth-child(2) { grid-area: 2 / 1; }
  .oc-foot .foot-links a:nth-child(5) { grid-area: 3 / 1; }
  .oc-foot .foot-links a:nth-child(3) { grid-area: 1 / 2; }
  .oc-foot .foot-links a:nth-child(4) { grid-area: 2 / 2; }
  .oc-foot .sitefoot-inner .foot-social { margin-left: -7px; }
  .oc-foot .sitefoot-inner .foot-end { margin-left: 0; }
}

/* The picture is drawn from the wide layout on every screen: a phone's narrow and touch
   rules give way to the page's own on the off-screen copy. */
.oc-shot .kit { gap: 6px; }
.oc-shot .shared .tool { width: 168px; }