/* glen-design: v1 */
/* ============================================================================
   Connect: every system, one data fabric. Class prefix cn-.

   DESIGN PLAN
   Dials:     MODE product / MOTION signature on the map, quiet elsewhere / DENSITY working
   Palette:   product tokens only. The accent carries flow and selection; --warn marks
              the one system that is behind; --ok appears only as a status dot
   Type:      Geist light for figures, Inter Tight for names, JetBrains Mono for counts,
              column heads and the ring text
   Layout:    page head, the fabric map as the one hero, a bento of freshness and ask,
              then the connector register
   Signature: the fabric map. Systems stream light along curved threads, weighted by
              records a day, into the fabric instrument (plate, tick ruler, freshness
              arc, the AI orb) and out to data products and the people and screens that
              read them. Hover any box and its whole path lights while everything else
              falls back; the stale system runs amber, dashed and dark
   Motion:    entrance = a clip sweep with a scan line while the threads draw, fired on
              view; ambient = the product aurora; travelling accent = light on the
              threads; state = path light, sync comets, row pulses, count ups
   ========================================================================== */

.cn-acts{ display: flex; gap: var(--s2); flex-wrap: wrap; }

/* --- HERO ---------------------------------------------------------------- */
.cn-hero{ container-type: inline-size; padding: var(--s5); }
.cn-top{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); flex-wrap: wrap; margin-bottom: var(--s4); }
.cn-meta{ display: flex; gap: var(--s6); flex-wrap: wrap; }
.cn-meta > div{ display: grid; gap: var(--s1); align-content: start; }
.cn-meta small{ font-size: var(--fs-micro); font-weight: 600; color: var(--ink-dim); }
.cn-meta .fig{ font-size: var(--fs-xl); }
.cn-of{ font: 300 var(--fs-base)/1 var(--font-display); color: var(--ink-dim); }
.cn-legend{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-micro); color: var(--ink-dim); }
.cn-legend > span{ display: inline-flex; align-items: center; gap: var(--s2); }
.cn-legend svg{ width: 28px; height: 10px; overflow: visible; }
.cn-lg-w1{ fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-opacity: .55; }
.cn-lg-t{ fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-opacity: .4; }
.cn-lg-b{ fill: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); }
.cn-lg-s{ fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 3 3; }

.cn-mapw{ position: relative; overflow: hidden; border-radius: var(--r-sm); }
.cn-stage{ position: relative; }
.cn-dots{ position: absolute; inset: 0; pointer-events: none; opacity: .8; }
.cn-svg{ position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.cn-ov{ position: absolute; inset: 0; pointer-events: none; }
.cn-orb{ position: absolute; --o: 52px; transform: translate(-50%, -50%); }
.cn-scan{ position: absolute; inset: 0; pointer-events: none; opacity: 0; }

.cn-cap{ display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s4) 0 0; max-width: none; min-height: 44px; font-size: var(--fs-sm); color: var(--ink-dim); }
.cn-cap .ic{ width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* --- MAP: type ----------------------------------------------------------- */
.cn-col{ font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-faint); }
.cn-coln{ fill: var(--accent); }
.cn-area{ font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-dim); }
.cn-arule{ fill: none; stroke: var(--line-2); stroke-width: 1; }

/* --- MAP: threads -------------------------------------------------------- */
.cn-e{
  fill: none; stroke: var(--accent); stroke-width: var(--w, 1); stroke-opacity: .34; stroke-linecap: round;
  transition: stroke-opacity var(--dur-base) ease, stroke var(--dur-base) ease, filter var(--dur-base) ease;
}
.cn-e--out{ stroke-opacity: .44; }
.cn-e--part{ stroke: var(--warn); stroke-opacity: .5; }
.cn-e--warn{ stroke: var(--warn); stroke-opacity: .9; stroke-dasharray: 3 4; }
.cn-e--mesh{ stroke: var(--ink-faint); stroke-opacity: .2; }
.cn-map.is-lit .cn-e{ stroke-opacity: .06; }
.cn-map.is-lit .cn-e.lit{ stroke-opacity: 1; filter: drop-shadow(0 0 4px var(--glow)); }
.cn-map.is-lit .cn-e--mesh.lit{ stroke: var(--accent); stroke-opacity: .9; stroke-width: 1.4; }
.cn-map.is-lit .cn-e--warn.lit, .cn-map.is-lit .cn-e--part.lit{ stroke: var(--warn); }

/* light on the threads: the static composition has none; motion adds it */
.cn-beads{ display: none; }
.cn-bead{ fill: var(--accent); offset-rotate: 0deg; offset-distance: 0%; filter: drop-shadow(0 0 3px var(--accent)); }
.cn-fl{ transition: opacity var(--dur-base) ease; }
.cn-fl--mesh{ display: none; }
.cn-map.is-lit .cn-fl{ opacity: .08; }
.cn-map.is-lit .cn-fl.lit{ opacity: 1; }
.cn-map.is-lit .cn-fl--mesh.lit{ display: inline; }
.cn-comet{ fill: var(--hot); offset-rotate: 0deg; filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 8px var(--accent)); }

/* --- MAP: nodes ---------------------------------------------------------- */
.cn-n{ cursor: pointer; outline: none; transition: opacity var(--dur-base) ease; }
.cn-nb{ transform-box: fill-box; transform-origin: center; transition: transform var(--dur-base) var(--ease-out); }
.cn-nr{ fill: var(--surface-1); stroke: var(--line-2); stroke-width: 1; transition: stroke var(--dur-base) ease, filter var(--dur-base) ease; }
.cn-nc{ fill: var(--tint); }
.cn-gi{ fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cn-nt{ font: 600 var(--fs-sm)/1 var(--font-body); fill: var(--ink); }
.cn-nv{ font: 400 var(--fs-micro)/1 var(--font-mono); fill: var(--ink-dim); font-variant-numeric: tabular-nums; }
.cn-ns{ font: 400 var(--fs-micro)/1 var(--font-body); fill: var(--ink-dim); }
.cn-nfig{ font-family: var(--font-mono); fill: var(--ink); }
.cn-nw{ fill: var(--warn); font-weight: 600; }
.cn-nd{ fill: var(--ok); }
.cn-av{ fill: var(--accent); }
.cn-avt{ font: 600 var(--fs-micro)/1 var(--font-body); fill: var(--on-accent); letter-spacing: -.02em; }
.cn-n--v .cn-gi:last-child{ stroke: var(--ink-faint); }
.cn-n.is-warn .cn-nr{ stroke: var(--warn); }
.cn-n.is-warn .cn-nc{ fill: var(--warn-tint); }
.cn-n.is-warn .cn-gi{ stroke: var(--warn); }
.cn-n.is-warn .cn-nv, .cn-n.is-warn .cn-nd{ fill: var(--warn); }
.cn-n.cn-hit .cn-nr{ stroke: var(--accent); filter: drop-shadow(0 0 10px var(--glow)); }

.cn-map.is-lit .cn-n{ opacity: .3; }
.cn-map.is-lit .cn-n.lit{ opacity: 1; }
.cn-map.is-lit .cn-n.lit .cn-nr{ stroke: var(--accent); }
.cn-map.is-lit .cn-n.lit.is-warn .cn-nr{ stroke: var(--warn); }
.cn-n:focus-visible .cn-nr{ stroke: var(--accent); stroke-width: 2; }
.cn-n--f:focus-visible .cn-plate{ stroke: var(--accent); stroke-width: 2; }

/* --- MAP: the fabric instrument ----------------------------------------- */
.cn-orbit{ fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 6; }
.cn-plate{ fill: var(--surface-1); stroke: var(--line-2); stroke-width: 1; filter: drop-shadow(0 12px 28px var(--tint-2));
  transition: stroke var(--dur-base) ease, filter var(--dur-base) ease; }
.cn-tk-min{ fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-opacity: .45; }
.cn-tk-maj{ fill: none; stroke: var(--ink-dim); stroke-width: 1.2; stroke-opacity: .7; }
.cn-ring{ font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .08em; fill: var(--ink-faint); }
.cn-ffig{ font: 300 var(--fs-xl)/1 var(--font-display); letter-spacing: -.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.cn-fcap{ font: 400 var(--fs-micro)/1 var(--font-body); fill: var(--ink-dim); }
.cn-seg{ fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-opacity: .75;
  transition: stroke-opacity var(--dur-base) ease, filter var(--dur-base) ease; }
.cn-seg.is-warn{ stroke: var(--warn); stroke-opacity: 1; }
.cn-seg.cn-hit{ stroke-opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); }
.cn-port{ fill: var(--surface-1); stroke: var(--accent); stroke-width: 1.4; transition: fill var(--dur-base) ease; }
.cn-port.is-warn{ stroke: var(--warn); }
.cn-n--f.lit .cn-plate, .cn-n--f.cn-hit .cn-plate{ stroke: var(--accent); filter: drop-shadow(0 12px 32px var(--glow)); }
.cn-map.is-lit .cn-n--f{ opacity: 1; }
.cn-map.is-lit .cn-seg{ stroke-opacity: .18; }
.cn-map.is-lit .cn-seg.lit{ stroke-opacity: 1; filter: drop-shadow(0 0 5px var(--glow)); }
.cn-map.is-lit .cn-seg.is-warn.lit{ filter: none; }
.cn-map.is-lit .cn-port.lit{ fill: var(--accent); }
.cn-map.is-lit .cn-port.is-warn.lit{ fill: var(--warn); }

/* --- THE PHONE FLOW: the same path, top to bottom ------------------------ */
.cn-flow{ display: none; }
.cn-fs{ display: grid; gap: var(--s3); }
.cn-fs-h{ display: flex; align-items: center; justify-content: space-between; }
.cn-fs-h .num{ font-size: var(--fs-sm); color: var(--accent); }
.cn-fsys{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cn-fp{ display: grid; }
.cn-fi, .cn-fpi, .cn-fui, .cn-fx{
  border: 0; cursor: pointer; color: var(--ink); text-align: left; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: opacity var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-instant) var(--ease-out);
}
.cn-fi{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); min-height: 56px;
  padding: var(--s2) var(--s3) var(--s2) var(--s2); border-radius: var(--r-sm); }
.cn-fi-c{ width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--accent); flex: none; }
.cn-fi-c .ic{ width: 16px; height: 16px; }
.cn-fi-b{ display: grid; gap: 2px; min-width: 0; }
.cn-fi-b b{ font: 600 var(--fs-sm)/1.2 var(--font-body); }
.cn-fi-b small{ font-size: var(--fs-micro); color: var(--ink-dim); }
.cn-fi .dot{ width: 6px; height: 6px; }
.cn-fi.is-warn, .cn-fpi.is-warn{ box-shadow: inset 0 0 0 1px var(--warn); }
.cn-fi.is-warn .cn-fi-c, .cn-fpi.is-warn .cn-fi-c{ background: var(--warn-tint); color: var(--warn); }
.cn-fi.is-warn small, .cn-fpi.is-warn small{ color: var(--warn); }
.cn-spine{ position: relative; width: 12px; height: var(--s7); margin: var(--s2) auto; }
.cn-spine::before{ content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(var(--line-2), var(--glow)); }
.cn-spine i{ position: absolute; left: 3px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; }
.cn-fx{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r); }
.cn-fx-dial{ position: relative; display: block; width: 112px; height: 112px; }
.cn-fx-dial svg{ width: 100%; height: 100%; overflow: visible; }
.cn-fx-dial .cn-seg{ stroke-width: 4; }
.cn-fx-orb{ position: absolute; left: 50%; top: 50%; --o: 40px; transform: translate(-50%, -50%); }
.cn-fx-t{ display: grid; gap: var(--s1); justify-items: start; }
.cn-fx-t .fig{ font-size: var(--fs-xl); }
.cn-fx-t small:not(.eyebrow){ font-size: var(--fs-micro); color: var(--ink-dim); }
.cn-fx-t .chip{ margin-top: var(--s2); }
.cn-fp{ grid-template-columns: 1fr 1fr; gap: var(--s2); }
.cn-fpi{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2); padding: var(--s2); border-radius: var(--r-sm); min-height: 56px; }
.cn-fpi-t{ display: grid; gap: 2px; min-width: 0; }
.cn-fpi-t b{ font-size: var(--fs-sm); line-height: 1.2; }
.cn-fpi-t small{ font-size: var(--fs-micro); color: var(--ink-dim); }
.cn-fu{ display: flex; flex-wrap: wrap; gap: var(--s2); }
.cn-fu + .cn-fu{ margin-top: var(--s1); }
.cn-fui{ display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-touch); padding: 0 var(--s3) 0 var(--s2); border-radius: var(--r-pill); font: 600 var(--fs-micro)/1.2 var(--font-body); }
.cn-fui .avatar{ width: 28px; height: 28px; }
.cn-fui--v{ padding-left: var(--s3); border-radius: var(--r-sm); }
.cn-fui--v .ic{ width: 16px; height: 16px; color: var(--accent); }
.cn-flow-hint{ margin: 0; font-size: var(--fs-micro); color: var(--ink-dim); max-width: none; }
.cn-flow.is-lit [data-k]:not(.lit){ opacity: .35; }
.cn-flow.is-lit .lit[data-n]{ box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px var(--glow); }
.cn-flow.is-lit .cn-seg:not(.lit){ stroke-opacity: .2; }

@container (max-width: 860px){
  .cn-mapw, .cn-lg-map{ display: none; }
  .cn-flow{ display: grid; }
  .cn-cap{ display: none; }
}

/* --- BENTO: freshness and ask -------------------------------------------- */
.cn-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); margin-top: var(--s4); }
.cn-regw{ grid-column: 1 / -1; }
.cn-live{ display: inline-flex; align-items: center; gap: var(--s2); }
.cn-fr{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.cn-fr > div{ display: grid; gap: var(--s1); align-content: start; }
.cn-fr .fig{ font-size: var(--fs-2xl); }
.cn-fr small{ font-size: var(--fs-micro); color: var(--ink-dim); line-height: 1.3; }
.cn-tk{ display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: var(--s1); }
.cn-tick{ height: 28px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: var(--surface-3); transform-origin: bottom center;
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) ease; }
.cn-tick.b15{ background: var(--accent); }
.cn-tick.b60{ background: color-mix(in oklab, var(--accent) 55%, transparent); }
.cn-tick.b1440{ background: var(--tint-2); }
.cn-tick.old{ background: var(--warn); }
.cn-tick.lit{ transform: scaleY(1.28); filter: drop-shadow(0 4px 10px var(--glow)); }
.cn-tlg{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--fs-micro); color: var(--ink-dim); }
.cn-tlg span{ display: inline-flex; align-items: center; gap: var(--s2); }
.cn-tlg i{ width: 12px; height: 12px; border-radius: 4px; }
.cn-tlg .b15{ background: var(--accent); } .cn-tlg .b60{ background: color-mix(in oklab, var(--accent) 55%, transparent); } .cn-tlg .b1440{ background: var(--tint-2); } .cn-tlg .old{ background: var(--warn); }
.cn-fr-note{ display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s4) 0 0; padding: var(--s3); border-radius: var(--r-sm); background: var(--warn-tint); color: var(--ink); font-size: var(--fs-sm); max-width: none; }
.cn-fr-note .ic{ width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.cn-ai .card-head h3{ display: inline-flex; align-items: center; gap: var(--s2); }
.cn-ai-p{ font-size: var(--fs-base); color: var(--ink-dim); margin-bottom: var(--s4); }
.cn-ai-qs{ display: flex; flex-wrap: wrap; gap: var(--s2); }
.cn-ai-qs .chip{ min-height: 32px; white-space: normal; text-align: left; line-height: 1.3; padding: var(--s1) var(--s3); }

/* --- REGISTER ------------------------------------------------------------ */
.cn-regw .card-head{ align-items: center; flex-wrap: wrap; gap: var(--s3); }
.cn-rs{ position: relative; display: block; min-width: 160px; flex: 1 1 180px; max-width: 280px; }
.cn-rs .ic{ position: absolute; left: var(--s3); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-dim); pointer-events: none; }
.cn-rs .field{ min-height: var(--h-control); padding-left: 36px; }
.cn-reg{ list-style: none; margin: 0 calc(-1 * var(--s3)); padding: 0; display: grid; }
.cn-rh, .cn-rr{ display: grid; grid-template-columns: minmax(200px, 2.3fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); }
.cn-rh{ font: 600 var(--fs-micro)/1.2 var(--font-body); color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.cn-rh .r, .cn-rc--rec, .cn-rc--map{ text-align: right; }
.cn-rr{ position: relative; width: 100%; min-height: 56px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: 400 var(--fs-sm)/1.3 var(--font-body); transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out); }
.cn-reg li + li:not([hidden]) .cn-rr::before{ content: ''; position: absolute; left: var(--s3); right: var(--s3); top: 0; height: 1px; background: var(--line); }
.cn-rr::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tint-2); opacity: 0; pointer-events: none; }
.cn-rr.lit{ background: var(--tint); }
.cn-rc{ min-width: 0; }
.cn-rc--sys{ display: flex; align-items: center; gap: var(--s3); }
.cn-chip{ width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--tint); color: var(--accent); }
.cn-chip .ic{ width: 16px; height: 16px; }
.cn-rr.is-warn .cn-chip{ background: var(--warn-tint); color: var(--warn); }
.cn-rn{ display: grid; min-width: 0; line-height: 1.3; }
.cn-rn b{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-rn small{ font-size: var(--fs-micro); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-rc--area, .cn-rc--win{ color: var(--ink-dim); }
.cn-rc--rec b{ font-weight: 500; }
.cn-rc--q{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.cn-rc--q .bar{ height: 4px; }
.cn-rc--map{ color: var(--ink-dim); }
.cn-okt{ display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-dim); }
.cn-okt .dot{ width: 6px; height: 6px; }
.cn-more{ display: none; }

/* --- DRAWERS ------------------------------------------------------------- */
.cn-dl{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; font-size: var(--fs-sm); }
.cn-dl dt{ color: var(--ink-dim); }
.cn-dl dd{ margin: 0; font-weight: 600; }
.cn-pfig{ display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s4); }
.cn-pfig .fig{ font-size: var(--fs-2xl); }
.cn-pfig span{ color: var(--ink-dim); }
.cn-who{ display: flex; flex-wrap: wrap; gap: var(--s2); }
.cn-who .chip{ min-height: 32px; padding-left: var(--s1); color: var(--ink); }
.cn-who .avatar{ width: 24px; height: 24px; font-size: var(--fs-micro); }

/* the connector gallery */
.cn-cg{ display: grid; gap: var(--s4); }
.cn-cg .callout{ margin: 0; }
.cn-cg-s{ position: relative; display: block; }
.cn-cg-s .ic{ position: absolute; left: var(--s3); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-dim); pointer-events: none; }
.cn-cg-s .field{ min-height: var(--h-touch); padding-left: 36px; }
.cn-cg-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cn-tile{ position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3);
  border: 0; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, background var(--dur-fast) ease; }
.cn-mono{ width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--tint); color: var(--accent);
  font: 500 var(--fs-sm)/1 var(--font-mono); letter-spacing: -.02em; box-shadow: inset 0 0 0 1px var(--tint-2); }
.cn-mono.lg{ width: 56px; height: 56px; border-radius: var(--r); font-size: var(--fs-lg); }
.cn-tile-t{ display: grid; gap: 2px; min-width: 0; }
.cn-tile-t b{ font-size: var(--fs-sm); line-height: 1.25; }
.cn-tile-t small{ font-size: var(--fs-micro); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-tile-on{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok); }
.cn-tile-on .ic{ width: 14px; height: 14px; }
.cn-tile.is-on{ background: var(--surface-1); }
.cn-fine{ margin: 0; font-size: var(--fs-micro); color: var(--ink-faint); }

/* the simulated connect flow */
.cn-steps{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s5); padding: 0; }
.cn-steps li{ display: grid; gap: var(--s2); font-size: var(--fs-micro); font-weight: 600; color: var(--ink-faint); }
.cn-steps li::before{ content: ''; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); transition: background var(--dur-slow) var(--ease-out); }
.cn-steps li.on{ color: var(--ink); }
.cn-steps li.on::before{ background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.cn-steps li.done{ color: var(--ink-dim); }
.cn-steps li.done::before{ background: var(--ok); }
.cn-cf{ display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.cn-cf > span:nth-child(2){ display: grid; flex: 1; min-width: 0; }
.cn-cf b{ font: 700 var(--fs-lg)/1.2 var(--font-display); letter-spacing: -.015em; }
.cn-cf small{ font-size: var(--fs-micro); color: var(--ink-dim); }
.cn-scopes{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.cn-scopes li{ display: flex; gap: var(--s2); align-items: center; }
.cn-scopes .ic{ width: 16px; height: 16px; color: var(--ok); }
.cn-scopes li.no{ color: var(--ink-dim); }
.cn-scopes li.no .ic{ color: var(--ink-faint); }
.cn-prog{ display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.cn-prog .bar{ height: 8px; }
.cn-prog .bar > i{ transition: transform var(--dur-slow) var(--ease-out); }
.cn-tb{ list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s1); }
.cn-tb li{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 40px; padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-faint);
  transition: background var(--dur-base) ease, color var(--dur-base) ease; }
.cn-tb li .num{ font-size: var(--fs-micro); }
.cn-tb li.is-doing{ background: var(--tint); color: var(--ink); }
.cn-tb li.is-done{ color: var(--ink); }
.cn-tbi{ display: grid; place-items: center; width: 20px; height: 20px; color: var(--ok); }
.cn-tbi .ic{ width: 16px; height: 16px; }
.cn-spin{ display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; }
.cn-done{ display: grid; justify-items: center; gap: var(--s3); padding: var(--s5) 0 var(--s2); text-align: center; }
.cn-done h3{ font-size: var(--fs-xl); }
.cn-done p{ max-width: 44ch; margin: 0; }
.cn-okmark{ width: 72px; height: 72px; }
.cn-okmark circle{ fill: var(--ok-tint); stroke: var(--ok); stroke-width: 2; }
.cn-okmark path{ fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* --- HOVER + PRESS ------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  .cn-regw .seg button:hover{ transform: translateY(-1px); }
  .cn-n:hover .cn-nb{ transform: scale(1.04); }
  .cn-n:hover .cn-nr{ stroke: var(--accent); filter: drop-shadow(0 6px 16px var(--glow)); }
  .cn-n.is-warn:hover .cn-nr{ stroke: var(--warn); }
  .cn-n--f:hover .cn-plate{ stroke: var(--accent); filter: drop-shadow(0 12px 32px var(--glow)); }
  .cn-rr:hover{ background: var(--surface-2); transform: translateX(2px); }
  .cn-rr.lit:hover{ background: var(--tint); }
  .cn-tick:hover{ transform: scaleY(1.28); filter: drop-shadow(0 4px 10px var(--glow)); }
  .cn-tile:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--accent); background: var(--surface-1); }
  .cn-fi:hover, .cn-fpi:hover, .cn-fui:hover, .cn-fx:hover{ box-shadow: inset 0 0 0 1px var(--accent); }
  .cn-meta > div .fig{ transition: transform var(--dur-base) var(--ease-out); }
  .cn-legend > span:hover{ color: var(--ink); }
}
.cn-n:active .cn-nb{ transform: scale(.97); }
.cn-rr:active{ transform: scale(.99); }
.cn-tick:active, .cn-tile:active, .cn-fi:active, .cn-fpi:active, .cn-fui:active, .cn-fx:active, .cn-regw .seg button:active{ transform: scale(.97); }
.cn-tile:focus-visible, .cn-rr:focus-visible, .cn-tick:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.cn-tile[hidden]{ display: none; }

/* --- MOTION: entrance, light, pulses (additive) -------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* the sweep reveals the map left to right; a scan line rides its edge */
  .cn-stage{ clip-path: inset(0 100% 0 0); }
  .cn-armed .cn-stage{ animation: cn-sweep calc(var(--dur-reveal) * 2) var(--ease-out) forwards; }
  .cn-scan{ transform: translateX(-100%);
    background: linear-gradient(90deg, transparent calc(100% - 140px), var(--tint) calc(100% - 4px), var(--accent) calc(100% - 1px), transparent 100%); }
  .cn-armed .cn-scan{ animation: cn-scan calc(var(--dur-reveal) * 2) var(--ease-out) forwards; }
  /* each thread draws from its source; dimming uses stroke, never this opacity */
  .cn-e[pathLength]{ stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .cn-armed .cn-e[pathLength]{ animation: cn-draw var(--dur-reveal) var(--ease-out) calc(var(--stagger) * var(--d, 0)) forwards; }
  .cn-beads{ display: inline; opacity: 0; }
  .cn-armed .cn-beads{ animation: cn-in var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 20) forwards; }
  .cn-bead{ animation: cn-run calc(var(--loop-flow) * var(--k, 1)) linear calc(var(--loop-flow) * var(--k, 1) * var(--o, 0) * -1) infinite; }
  .motion-paused .cn-bead, .cn-off .cn-bead{ animation-play-state: paused; }
  .cn-spine i{ animation: cn-drip var(--loop-flow) linear infinite; }
  .motion-paused .cn-spine i{ animation-play-state: paused; }
  .cn-rr.cn-pulse::after{ animation: cn-flash calc(var(--dur-drawer) * 2) var(--ease-out); }
  .cn-spin{ animation: spin calc(var(--loop-load) / 2) linear infinite; }
  .cn-okmark{ animation: cn-pop var(--dur-slow) var(--spring) both; }
  .cn-okmark circle{ stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: cn-draw var(--dur-drawer) var(--ease-out) forwards; }
  .cn-okmark path{ stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: cn-draw var(--dur-slow) var(--ease-out) var(--dur-slow) forwards; }
  /* a revisit skips the sweep: the frequency gate */
  .settled .cn-stage, .settled .cn-armed .cn-stage{ clip-path: none; animation: none; }
  .settled .cn-scan, .settled .cn-armed .cn-scan{ animation: none; opacity: 0; }
  .settled .cn-e[pathLength], .settled .cn-armed .cn-e[pathLength]{ stroke-dashoffset: 0; animation: none; }
  .settled .cn-beads, .settled .cn-armed .cn-beads{ opacity: 1; animation: none; }
}
@keyframes cn-sweep{ to{ clip-path: inset(0 0 0 0); } }
@keyframes cn-scan{ 0%{ opacity: 1; transform: translateX(-100%); } 82%{ opacity: 1; } 100%{ opacity: 0; transform: translateX(0); } }
@keyframes cn-draw{ to{ stroke-dashoffset: 0; } }
@keyframes cn-in{ to{ opacity: 1; } }
@keyframes cn-run{ 0%{ offset-distance: 0%; opacity: 0; } 12%, 86%{ opacity: 1; } 100%{ offset-distance: 100%; opacity: 0; } }
@keyframes cn-drip{ 0%{ transform: translateY(-6px); opacity: 0; } 20%{ opacity: 1; } 80%{ opacity: 1; } 100%{ transform: translateY(48px); opacity: 0; } }
@keyframes cn-flash{ 0%{ opacity: 1; } 100%{ opacity: 0; } }
@keyframes cn-pop{ from{ opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce){
  .cn-beads, .cn-comet, .cn-spine i{ display: none; }
}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1100px){
  .cn-grid{ grid-template-columns: minmax(0, 1fr); }
  .cn-rh, .cn-rr{ grid-template-columns: minmax(180px, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr); }
  .cn-rc--area, .cn-rc--win, .cn-rc--map, .cn-rh > :nth-child(2), .cn-rh > :nth-child(5), .cn-rh > :nth-child(7){ display: none; }
}
@media (max-width: 760px){
  .cn-hero{ padding: var(--s4); }
  .cn-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); width: 100%; }
  .cn-legend{ display: none; }
  .cn-acts{ width: 100%; }
  .cn-acts .btn{ flex: 1; min-height: var(--h-touch); }
  .cn-fr .fig{ font-size: var(--fs-xl); }
  .cn-tick{ height: var(--h-touch); }
  .cn-rh{ display: none; }
  .cn-reg{ margin: 0; gap: var(--s2); }
  .cn-reg li + li:not([hidden]) .cn-rr::before{ display: none; }
  .cn-rr{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s2); padding: var(--s3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .cn-rr.is-warn{ box-shadow: inset 0 0 0 1px var(--warn); }
  .cn-rc--sys{ grid-column: 1 / 3; grid-row: 1; }
  .cn-rc--st{ grid-column: 3; grid-row: 1; justify-self: end; }
  .cn-rc--rec{ grid-column: 1; grid-row: 2; }
  .cn-rc--sync{ grid-column: 2; grid-row: 2; }
  .cn-rc--q{ grid-column: 3; grid-row: 2; }
  .cn-reg.is-short li[data-row]:nth-child(n+7){ display: none; }
  .cn-reg.is-short ~ .cn-more:not([hidden]){ display: flex; width: 100%; min-height: var(--h-touch); margin-top: var(--s3); }
  .cn-rc--rec, .cn-rc--sync, .cn-rc--q{ display: grid; gap: 2px; text-align: left; font-size: var(--fs-sm); }
  .cn-rc[data-l]::before{ content: attr(data-l); font: 400 var(--fs-micro)/1.2 var(--font-body); color: var(--ink-dim); }
  .cn-rc--q{ grid-template-columns: minmax(0, 1fr) auto; }
  .cn-rc--q::before{ grid-column: 1 / -1; }
  .cn-okt{ font-size: var(--fs-micro); }
  .cn-cg-grid{ grid-template-columns: minmax(0, 1fr); }
  .cn-regw .card-head{ gap: var(--s3); }
  .cn-rs{ max-width: none; flex: 1 1 100%; }
}