/* Build and test a sociogram: the network picture and the states of its people and links.
   The frame, buttons, table and readouts come from css/labs.css. Colours are theme tokens or the lab's state
   tokens, so light and dark mode both work. Text inside the picture is sized with --u (set by Labs.fit),
   so names stay 16px and degrees 13px on screen at any width. */
.lab-sociogram .soc-svg { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; }

/* Links: hidden unless both people exist as a link; the path is drawn thicker in the "good" colour */
.lab-sociogram .soc-link { display: none; stroke: var(--text-secondary); stroke-width: 4; stroke-linecap: round; }
.lab-sociogram .soc-link.is-on { display: inline; }
.lab-sociogram .soc-link.is-path { stroke: var(--lab-good-line); stroke-width: 9; }

/* People: a circle with the letter and the degree. Clickable, with a visible focus ring for the keyboard */
.lab-sociogram .soc-node { cursor: pointer; }
.lab-sociogram .soc-node:focus, .lab-sociogram .soc-node:focus-visible { outline: none; }
.lab-sociogram .soc-disc { fill: var(--surface); stroke: var(--primary); stroke-width: 3; }
.lab-sociogram .soc-node:hover .soc-disc { fill: var(--surface-hover); }
.lab-sociogram .soc-node.is-on-path .soc-disc { fill: var(--lab-good); stroke: var(--lab-good-line); }
.lab-sociogram .soc-node.is-isolated .soc-disc { stroke: var(--lab-warn-line); stroke-dasharray: 6 4; }
.lab-sociogram .soc-node.is-picked .soc-disc { stroke: var(--lab-info-line); stroke-width: 6; }
/* The ring is invisible until keyboard focus, but it is still clickable, so a touch target is wider than the disc */
.lab-sociogram .soc-focus { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; opacity: 0; pointer-events: all; }
.lab-sociogram .soc-node:focus-visible .soc-focus { opacity: 1; }
/* Text stays at its screen size (16px and 13px). The offsets are in screen pixels too, so the letter sits above
   the middle and the degree below it on a phone as well as on a desktop. In an svg, a CSS px in a transform is a drawing unit. */
.lab-sociogram .soc-name { font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--u, 1)); fill: var(--text-primary); transform: translateY(calc(-1.5px * var(--u, 1))); }
.lab-sociogram .soc-deg { font-family: var(--font-body); font-weight: 600; font-size: calc(13px * var(--u, 1)); fill: var(--text-secondary); font-variant-numeric: tabular-nums; transform: translateY(calc(13px * var(--u, 1))); }

/* The kit sets table headings at 0.74rem; this lab keeps them at 13px so they stay readable */
:root[data-theme] .lab-sociogram .lab-table thead th { font-size: .8125rem; }