/* Team Harness demo. An SOP becomes a skill, the skill joins the library with the
   connectors it may touch, and one line carries the library to all twelve people. */
.thn-top {max-width:62rem}
.thn-title {min-height:1.05em;font:400 clamp(2.2rem,4.4vw,4.6rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.thn-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:thn-blink 1s steps(1) infinite}
.thn:not([data-phase="writing"]) .thn-caret,.thn[data-state="done"] .thn-caret {opacity:0;animation:none}
@keyframes thn-blink {50%{opacity:0}}
.thn-src {margin-top:1rem;font-size:.9375rem;color:var(--ink-2);opacity:0;transition:opacity .5s var(--ease)}
.thn-src.is-in,.thn:not([data-state]) .thn-src {opacity:1}

/* Stage: SOP | skill file | library */
.thn-stage {position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(21rem,23rem);gap:clamp(2.4rem,4vw,4.5rem);margin-top:clamp(2.4rem,4vw,3.6rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}
.thn-wires {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.thn-wires path {fill:none;stroke:var(--oxide);stroke-width:1;opacity:.6;transition:stroke-dashoffset .7s var(--ease)}

.thn-sop {list-style:none;margin:0;padding:0;display:grid;gap:.95rem;align-content:start}
.thn-sop li {display:grid;grid-template-columns:1.3rem minmax(0,1fr);font:400 clamp(1.05rem,1.3vw,1.2rem)/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.thn-sop li b {font:500 .8125rem/1.9 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink-2);font-variant-numeric:tabular-nums}
.thn-sop li.is-in {opacity:1;transform:none}

.thn-file {position:relative;z-index:1;align-self:start}
.thn-code {display:grid;margin:0;font:400 .75rem/1.85 'Martian Mono',ui-monospace,monospace;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.thn-ln {opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.thn-ln.is-in {opacity:1;transform:none}
.thn-ln[data-step] {color:var(--ink);padding-left:2ch;text-indent:-2ch}
.thn-k {color:var(--ink)}
.thn-k.is-never,.thn-never {color:var(--oxide)}
.thn-review {display:flex;align-items:center;gap:.6rem;margin-top:1.3rem;padding-top:.9rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.thn-review i {position:relative;flex:none;width:.95rem;height:.55rem;margin-top:-.3rem;border-left:1.5px solid var(--oxide);border-bottom:1.5px solid var(--oxide);transform:rotate(-45deg)}
.thn-review.is-in {opacity:1;transform:none}

/* Library: one row per skill, one column per connector. */
.thn-lib {align-self:start}
.thn-lib-head,.thn-skill {display:grid;grid-template-columns:minmax(0,1fr) repeat(4,3.1rem);align-items:center}
.thn-lib-head {padding-bottom:.6rem;font-size:.75rem;color:var(--ink-2)}
.thn-lib-head span:not(:first-child) {text-align:center}
.thn-lib-head span:first-child {font-size:.9375rem;color:var(--ink)}
.thn-lib ol {list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule);min-height:1px}
.thn-lib li {border-top:1px solid var(--rule);animation:thn-in .55s var(--ease) both}
.thn-skill {width:100%;padding:.6rem 0;font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:pointer}
.thn-sk {display:grid;line-height:1.3}
.thn-sk b {font-weight:500;font-size:.9375rem;color:var(--ink);transition:color .25s}
.thn-sk span {font-size:.75rem;color:var(--ink-2)}
.thn-skill:hover .thn-sk b {text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.3em}
.thn-skill[aria-pressed="true"] .thn-sk b {color:var(--oxide)}
.thn-skill:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}
.thn-c {justify-self:center;width:.62rem;height:.62rem;border-radius:50%}
.thn-c[data-v="r"] {box-shadow:inset 0 0 0 1px var(--ink)}
.thn-c[data-v="d"] {background:var(--ink)}
.thn-c[data-v="none"] {width:.7rem;height:1px;border-radius:0;background:var(--rule)}
.thn-skill[aria-pressed="true"] .thn-c[data-v="d"] {background:var(--oxide)}
.thn-skill[aria-pressed="true"] .thn-c[data-v="r"] {box-shadow:inset 0 0 0 1px var(--oxide)}
.thn-legend {display:flex;gap:1.3rem;margin-top:.8rem;font-size:.75rem;color:var(--ink-2)}
.thn-legend span {display:inline-flex;align-items:center;gap:.45rem}
.thn-legend .thn-c {display:inline-block}
@keyframes thn-in {from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Team: one line from the library to every person. */
.thn-team {margin-top:clamp(2.8rem,5vw,4.2rem)}
.thn-count {font-size:.9375rem;color:var(--ink-2)}
.thn-count b {font:400 1.9rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:.3rem;letter-spacing:-.02em}
.thn-bus {position:relative;height:1px;margin-top:1.2rem;background:var(--rule)}
.thn-bus::before {content:'';position:absolute;inset:0;background:var(--oxide);transform:scaleX(0);transform-origin:right;transition:transform 1.9s cubic-bezier(.4,0,.6,1)}
.thn-bus::after {content:'';position:absolute;right:0;top:-1.6rem;width:1px;height:1.6rem;background:var(--oxide);opacity:0;transition:opacity .3s}
.thn-bus.is-on::before,.thn:not([data-state]) .thn-bus::before {transform:none}
.thn-bus.is-on::after,.thn:not([data-state]) .thn-bus::after {opacity:1}
.thn-people {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 .6rem}
.thn-people li {position:relative;display:grid;align-content:start;gap:.1rem;padding-top:1rem;opacity:.34;transition:opacity .6s var(--ease)}
.thn-people li::before {content:'';position:absolute;left:0;top:0;width:1px;height:.6rem;background:var(--rule);transition:background .4s}
.thn-people li.is-lit {opacity:1}
.thn-people li.is-lit::before {background:var(--ink-2)}
.thn-people li.is-new::before {background:var(--oxide)}
.thn-people b {font:400 clamp(1.15rem,1.5vw,1.45rem)/1.1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);letter-spacing:-.01em}
.thn-people span {font-size:.75rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thn-marks {display:flex;flex-wrap:wrap;gap:4px;margin-top:.5rem;min-height:6px}
.thn-marks i {width:6px;height:6px;border-radius:50%}
.thn-marks .is-own {box-shadow:inset 0 0 0 1px var(--ink-2)}
.thn-marks .is-shared {background:var(--oxide);animation:thn-pop .5s var(--ease) both}
@keyframes thn-pop {from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.thn-people li.is-dim {opacity:.3}
.thn-people li.is-uses b {color:var(--oxide)}
.thn-legend-team {margin-top:1.2rem}
.thn-legend-team i {display:inline-block;width:6px;height:6px;border-radius:50%}

/* Static fallback before the script runs. */
.thn:not([data-state]) .thn-sop li,.thn:not([data-state]) .thn-ln,.thn:not([data-state]) .thn-review {opacity:1;transform:none}
.thn:not([data-state]) .thn-caret {display:none}
.thn[data-reset] *,.thn[data-reset] *::before,.thn[data-reset] *::after {transition:none!important;animation:none!important}

@media(max-width:1100px){
 .thn-stage {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .thn-lib {grid-column:1/-1}
 .thn-people {grid-template-columns:repeat(6,minmax(0,1fr));row-gap:1.4rem}
 .thn-bus {display:none}
 .thn-people li {padding-top:.8rem;border-top:1px solid var(--rule)}
 .thn-people li::before {display:none}
 .thn-people li.is-new {border-top-color:var(--oxide)}
}
@media(max-width:700px){
 .thn-stage {grid-template-columns:1fr;gap:2rem}
 .thn-wires {display:none}
 .thn-sop li {font-size:1.05rem}
 .thn-code {font-size:.6875rem}
 .thn-people {grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem .8rem}
 .thn-lib-head,.thn-skill {grid-template-columns:minmax(0,1fr) repeat(4,2.9rem)}
 .thn-lib-head span:not(:first-child) {font-size:.6875rem}
}