/* ag-rootline · 02 Identify (white band). Root lines: a person's sign-in, and the agents that grow from it.
   Scoped to .aa-rootline. Tree lines are plain CSS/SVG hairlines positioned relative to each row, so the tree holds
   together at any width and without JS. Lines use flattened ink tints so a branch leaving the trunk never darkens the join. */
.aa-rootline{
  --rl-line:#d9d9d9;            /* ink-15 flattened on white */
  --rl-dash:#949494;            /* ink-40 flattened on white */
  --rl-ind:40px;                /* agent handle x */
  --rl-eg:8px;                  /* gap between an elbow's end and the handle */
  --rl-gap:18px;                /* space between two agent rows (56px pitch on desktop) */
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;
}
.aa-rootline *{box-sizing:border-box}

/* copy · columns 1–5 */
.aa-rootline .aa-rl-copy{grid-column:1/6;min-width:0}
.aa-rootline .aa-rl-copy .h2{margin:0}
.aa-rootline .aa-rl-body{margin-top:24px}
.aa-rootline .aa-rl-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-15);text-underline-offset:3px;transition:text-decoration-color var(--t2) var(--ease)}
.aa-rootline .aa-rl-body a:hover{text-decoration-color:var(--ink)}
.aa-rootline .aa-rl-kinds{margin-top:32px;border-top:1px solid var(--ink-08)}
.aa-rootline .aa-rl-kinds li{position:relative;padding:14px 0 15px;border-bottom:1px solid var(--ink-08);cursor:default;border-radius:0}
.aa-rootline .aa-rl-kinds li:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.aa-rootline .aa-rl-kinds h3{font-size:15px;line-height:22px;font-weight:500;color:var(--ink)}
.aa-rootline .aa-rl-kinds p{margin-top:2px;font-size:14.5px;line-height:22px;color:var(--ink-60);transition:color var(--t2) var(--ease)}
.aa-rootline .aa-rl-kinds li:hover p,.aa-rootline .aa-rl-kinds li:focus-visible p{color:var(--ink)}
.aa-rootline .aa-rl-link{margin-top:24px}

/* the drawing · columns 7–12 */
.aa-rootline .aa-rl-fig{grid-column:7/13;position:relative;margin:0;min-width:0}
.aa-rootline .aa-rl-demo{position:absolute;top:4px;right:0;font:400 11px/16px var(--mono);color:var(--ink-40)}
.aa-rootline .aa-rl-trees>li+li{margin-top:51px}          /* tree 2 starts at y=212 */

/* person: 24px stone circle (the only round shape), name in sans, sign-in line in mono */
.aa-rootline .aa-rl-person{position:relative;height:42px;padding-left:40px}
.aa-rootline .aa-rl-av{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--stone);display:flex;align-items:center;justify-content:center;font:500 11px/1 var(--sans);color:var(--ink)}
.aa-rootline .aa-rl-name{font:500 16px/24px var(--sans);color:var(--ink);white-space:nowrap}
.aa-rootline .aa-rl-sign{position:relative;margin-top:2px;height:16px;font:400 12px/16px var(--mono);color:var(--ink-60);white-space:nowrap}
.aa-rootline .aa-rl-typing{position:absolute;left:0;top:0}
.aa-rootline .aa-rl-methods{display:inline-grid;vertical-align:top}
.aa-rootline .aa-rl-m{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;color:var(--ink);opacity:0}
.aa-rootline .aa-rl-m.is-on{opacity:1}
.aa-rootline .aa-rl-ck{width:10px;height:10px;flex:none;overflow:visible}
.aa-rootline .aa-rl-ck path{fill:none;stroke:var(--ok);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}

/* agents */
.aa-rootline .aa-rl-agents{margin-top:25px}               /* first handle centre at y=76 */
.aa-rootline .aa-rl-agent{position:relative;padding-left:var(--rl-ind)}
.aa-rootline .aa-rl-agent+.aa-rl-agent{margin-top:var(--rl-gap)}
.aa-rootline .aa-rl-row{transition:opacity var(--t2) var(--ease)}
.aa-rootline .aa-rl-h{font:500 13px/18px var(--mono);color:var(--ink);white-space:nowrap}
.aa-rootline .aa-rl-d{font:400 13px/20px var(--sans);color:var(--ink-60);transition:color var(--t2) var(--ease)}
.aa-rootline .aa-rl-cr{font:400 11px/16px var(--mono);color:var(--ink-40);white-space:nowrap}
.aa-rootline .aa-rl-cr b{font-weight:400;color:var(--ink)}
.aa-rootline .aa-rl-sep{margin:0 7px 0 8px;color:var(--ink-40)}
.aa-rootline .aa-rl-sw{display:inline-grid}
.aa-rootline .aa-rl-sw>span{grid-area:1/1}
.aa-rootline .aa-rl-was{color:var(--ink-40);opacity:0}

/* tree lines: 1px hairlines with 6px fillets. Each row owns the elbow into it and the trunk down to the next row. */
.aa-rootline .aa-rl-ln{position:absolute;left:11px;width:0;border-left:1px solid var(--rl-line);pointer-events:none}
.aa-rootline .aa-rl-root{top:28px;bottom:-27px}           /* from 4px under the circle to the first elbow (agents list sits 25px below) */
.aa-rootline .aa-rl-trunk{top:2px;bottom:calc(-1*var(--rl-gap) - 2px)}
.aa-rootline .aa-rl-trunk.aa-rl-dash{top:10px;width:1px;border-left:0;background:repeating-linear-gradient(to bottom,var(--rl-dash) 0 3px,transparent 3px 7px);opacity:0}  /* open end, 8px short of the trunk */
.aa-rootline .aa-rl-elbow{position:absolute;left:11px;top:2px;width:calc(var(--rl-ind) - 11px - var(--rl-eg));height:8px;overflow:visible;pointer-events:none;transition:opacity var(--t2) var(--ease)}
.aa-rootline .aa-rl-elbow path,.aa-rootline .aa-rl-elbow line{fill:none;stroke:var(--rl-line);stroke-width:1}
.aa-rootline .aa-rl-elbow.aa-rl-dash{opacity:0}
.aa-rootline .aa-rl-elbow.aa-rl-dash path,.aa-rootline .aa-rl-elbow.aa-rl-dash line{stroke:var(--rl-dash);stroke-dasharray:3 4}

/* three kinds of agent: hovering or focusing one in the copy lifts the matching rows and drops the rest to 35% */
.aa-rootline[data-focus] .aa-rl-agent>.aa-rl-row,.aa-rootline[data-focus] .aa-rl-agent>.aa-rl-elbow:not(.aa-rl-dash){opacity:.35}
.aa-rootline[data-focus="manager"] .aa-rl-agent[data-kind="manager"]>.aa-rl-row,
.aa-rootline[data-focus="manager"] .aa-rl-agent[data-kind="manager"]>.aa-rl-elbow:not(.aa-rl-dash),
.aa-rootline[data-focus="team"] .aa-rl-agent[data-kind="team"]>.aa-rl-row,
.aa-rootline[data-focus="team"] .aa-rl-agent[data-kind="team"]>.aa-rl-elbow:not(.aa-rl-dash),
.aa-rootline[data-focus="found"] .aa-rl-agent[data-kind="found"]>.aa-rl-row,
.aa-rootline[data-focus="found"] .aa-rl-agent[data-kind="found"]>.aa-rl-elbow:not(.aa-rl-dash){opacity:1}
.aa-rootline[data-focus="manager"] .aa-rl-agent[data-kind="manager"] .aa-rl-d,
.aa-rootline[data-focus="team"] .aa-rl-agent[data-kind="team"] .aa-rl-d,
.aa-rootline[data-focus="found"] .aa-rl-agent[data-kind="found"] .aa-rl-d{color:var(--ink)}

@media (max-width:1100px){
  .aa-rootline{row-gap:56px}
  .aa-rootline .aa-rl-copy{grid-column:1/-1;max-width:600px}
  .aa-rootline .aa-rl-fig{grid-column:1/-1;max-width:604px}
}
@media (max-width:760px){
  .aa-rootline{--rl-ind:32px;--rl-eg:6px;--rl-gap:16px;row-gap:48px}
  .aa-rootline .aa-rl-fig{max-width:none}
  .aa-rootline .aa-rl-person{height:auto;min-height:42px;padding-left:32px}
  .aa-rootline .aa-rl-name{white-space:normal;overflow-wrap:anywhere}
  .aa-rootline .aa-rl-cr{display:block}
  .aa-rootline .aa-rl-sep{display:none}
  .aa-rootline .aa-rl-demo{position:static;margin-top:28px}
}
@media (forced-colors:active){
  .aa-rootline .aa-rl-ln{border-left-color:CanvasText}
  .aa-rootline .aa-rl-elbow path,.aa-rootline .aa-rl-elbow line{stroke:CanvasText}
  .aa-rootline .aa-rl-ck path{stroke:CanvasText}
  .aa-rootline .aa-rl-av{forced-color-adjust:none;background:Canvas;color:CanvasText;box-shadow:inset 0 0 0 1px CanvasText}
}
@media (prefers-reduced-motion:reduce){
  .aa-rootline .aa-rl-row,.aa-rootline .aa-rl-d,.aa-rootline .aa-rl-elbow,.aa-rootline .aa-rl-kinds p{transition:none}
}
.aa-rootline.aa-sim *{transition:none!important}