/* Kodawari v2 — hero "chaos → order" diagram: all viewports.
   Pairs with hero-diagram.js. Needs the design tokens from colors_and_type.css.
   Markup contract: #diagram > (#wires, .dcol > .grp[data-c] > .chip, .mid > .hubwrap > #hub) */

/* ---------- base / desktop ---------- */
.diagram{position:relative;width:100%;max-width:660px;margin:0 auto;display:grid;grid-template-columns:minmax(148px,182px) auto minmax(148px,182px);gap:22px;align-items:center;justify-content:center}
#wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
#wires path{fill:none;stroke-width:1.2;stroke-opacity:0.30;transition:stroke-opacity .25s var(--ease),stroke-width .25s var(--ease)}
#wires path.hot{stroke-opacity:0.8;stroke-width:1.8}
.dcol{display:flex;flex-direction:column;gap:16px;z-index:2}
.grp{display:flex;flex-direction:column;gap:5px}
.grp-h{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);padding:0 2px 3px}
.grp-h .dot{width:6px;height:6px;border-radius:50%;flex:none}
.chip{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--hairline);border-radius:7px;padding:6px 9px;font-size:12px;font-weight:500;color:var(--ink);box-shadow:var(--shadow-sm);cursor:default;transition:transform .5s var(--ease),opacity .5s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.chip:hover{border-color:var(--hairline-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.chip .ic{width:17px;height:17px;border-radius:4.5px;flex:none;display:grid;place-items:center;font-family:var(--font-mono);font-size:8px;font-weight:700;color:#FBF9F4;letter-spacing:0}
.chip.more{color:var(--ink-4);justify-content:center;letter-spacing:2px;font-weight:600;box-shadow:none;background:transparent;border-style:dashed}
.mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.hubwrap{position:relative}
.hub{position:relative;width:176px;height:176px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);display:grid;place-items:center;box-shadow:0 2px 0 rgba(26,23,19,0.14), var(--shadow-lg);z-index:2}
.hub::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid var(--hairline-strong)}
.hub-in{display:flex;flex-direction:column;align-items:center;gap:3px}
.hub-in em{font-style:normal;font-family:var(--font-mono);font-size:7.5px;letter-spacing:0.14em;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.hub-in em .lv{width:5px;height:5px;border-radius:50%;background:var(--positive);animation:lv 2.2s var(--ease) infinite}
@keyframes lv{0%,100%{opacity:1}50%{opacity:0.2}}
.hubTick{display:flex;flex-direction:column;align-items:center;gap:1px;transition:opacity .3s var(--ease);min-height:44px}
.hubTick.sw{opacity:0}
.hubTick b{font-size:24px;font-weight:600;letter-spacing:-0.02em;line-height:1.15;font-feature-settings:"tnum" 1}
.hubTick u{text-decoration:none;font-family:var(--font-mono);font-size:8px;letter-spacing:0.1em;color:var(--positive)}
#hubSpark{width:94px;height:22px}
.hubBars{display:flex;gap:3px;align-items:flex-end;height:13px;margin-top:3px}
.hubBars i{width:5px;border-radius:2px 2px 1px 1px;height:55%;transition:height .7s var(--ease)}
.hub-cap{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-0.01em}
.hub-cap i{font-style:normal;color:var(--accent)}
#halo{position:absolute;width:300px;height:300px;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.note{position:absolute;bottom:calc(100% + 26px);left:50%;transform:translateX(-72%) rotate(-2.5deg);width:210px;text-align:center;font-family:'Caveat',cursive;font-size:21px;line-height:1.1;color:var(--ink-2);z-index:3;pointer-events:none}
.note .arr-n{position:absolute;right:-34px;top:12px;width:44px;height:40px}
.note .arr-n path{stroke:var(--ink-2);stroke-width:1.6;fill:none;stroke-linecap:round}

/* ---------- entrance (правила под гейтом .js: без JS контент виден сразу): body.pre = start state, body.go = wires on (set by hero-diagram.js) ---------- */
.js .pre .chip{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) rotate(var(--sr,0)) scale(0.92)}
.js .pre .hub{opacity:0;transform:scale(0.86)}
.js .pre #halo{opacity:0}
.js .pre .note{opacity:0;transform:translateX(-72%) rotate(-2.5deg) translateY(6px)}
.js .pre .hub-cap{opacity:0;transform:translateY(5px)}
.js .pre .grp-h{opacity:0}
.hub,#halo{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.note{transition:opacity .7s var(--ease) .9s,transform .7s var(--ease) .9s}
.hub-cap{transition:opacity .7s var(--ease) 1.05s,transform .7s var(--ease) 1.05s}
.grp-h{transition:opacity .6s var(--ease) .35s}
#wires{opacity:0;transition:opacity .5s var(--ease)}
.go #wires{opacity:1}

/* ---------- tablet: keep 3 columns, tighten ---------- */
@media (max-width:1060px){
.diagram{grid-template-columns:minmax(132px,164px) auto minmax(132px,164px);gap:16px}
.hub{width:158px;height:158px}
#halo{width:270px;height:270px}
.note{font-size:19px;width:190px}
}

/* ---------- phone: stacked vertical flow — sources cloud → hub → outputs cloud.
   The 3-column grid is what looked stretched on a phone: each column got ~110px
   and the chips + hub were pulled wide. Here the diagram reads top-to-bottom and
   hero-diagram.js automatically switches its wires to vertical curves. ---------- */
@media (max-width:760px){
.diagram{grid-template-columns:1fr;gap:24px;max-width:440px}
.dcol{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:11px 8px}
.grp{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.grp-h{flex:none;padding:0;font-size:8.5px;letter-spacing:0.1em}
.chip{padding:5px 8px;font-size:11px;gap:6px;border-radius:6px}
.chip .ic{width:15px;height:15px;font-size:7.5px;border-radius:4px}
.chip.more{display:none}
.mid{gap:8px}
.hub{width:138px;height:138px;border-width:1.2px}
.hub::before{inset:6px}
.hub-in{gap:2px}
.hub-in em{font-size:7px;letter-spacing:0.1em}
.hubTick{min-height:34px}
.hubTick b{font-size:19px}
#hubSpark{width:76px;height:18px}
.hubBars{height:11px;margin-top:2px}
.hubBars i{width:4px}
.hub-cap{font-size:16px}
#halo{width:236px;height:236px}
.note{display:none}
#wires{overflow:hidden}
}
@media (max-width:400px){
.diagram{gap:20px}
.chip{font-size:10.5px;padding:4px 7px}
.chip .ic{width:14px;height:14px}
.hub{width:124px;height:124px}
.hubTick b{font-size:17px}
#halo{width:206px;height:206px}
}
@media (prefers-reduced-motion:reduce){
.hub-in em .lv{animation:none}
.chip,.hub,#halo,.note,.hub-cap,.grp-h,#wires,.hubBars i{transition:none}
}