/* NoxTLS page, section #secure-link (assets/js/tls-link.js): a phone and a NoxTLS device open a TLS 1.3 session
   and send a command over it. The stage is laid out at a fixed size and scaled to fit; .is-v stacks it vertically. */
.canvas .sec.tl-sec { position: relative; overflow: hidden; background:
	radial-gradient(50% 70% at 12% 10%, rgba(0, 175, 240, 0.22), transparent 60%),
	radial-gradient(45% 60% at 92% 80%, rgba(32, 201, 151, 0.18), transparent 60%),
	linear-gradient(160deg, #0b2347 0%, #081a36 50%, #06132a 100%); }
.canvas .sec.tl-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(143, 220, 255, 0.1) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: linear-gradient(180deg, #000, transparent 75%); mask: linear-gradient(180deg, #000, transparent 75%); }
.canvas .sec.tl-sec > .wrap { position: relative; display: flex; flex-direction: column; gap: var(--sec-gap); }
.tl-head { display: flex; flex-direction: column; gap: var(--sp-3, 16px); max-width: 760px; }
.tl { position: relative; width: 100%; }
.tl-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif; }
.tl:not(.is-v) .tl-stage { left: 50%; translate: -50% 0; transform-origin: 50% 0; }
.tl-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ti { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* The link */
.tl-lane { fill: none; stroke: rgba(143, 220, 255, 0.28); stroke-width: 2; stroke-dasharray: 4 7; animation: tl-dash 1.2s linear infinite; transition: stroke 600ms ease; }
.tl-lane.b { animation-direction: reverse; }
.is-secure .tl-lane { stroke: rgba(45, 212, 191, 0.55); stroke-dasharray: none; filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.55)); }
@keyframes tl-dash { to { stroke-dashoffset: -22; } }
.tl-msg { opacity: 0; transition: opacity 200ms ease; }
.tl-msg.on { opacity: 1; }
.tl-msg-bg { fill: #0c2b52; stroke: #5ac8ff; stroke-width: 1.2; filter: drop-shadow(0 0 10px rgba(0, 194, 255, 0.6)); }
.tl-msg.enc .tl-msg-bg { fill: #0b3a3a; stroke: #2dd4bf; filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.7)); }
.tl-msg-t { fill: #e9f6ff; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tl-msg-lock { display: none; }
.tl-msg.enc .tl-msg-lock { display: inline; }
.tl-msg-lock rect { fill: #2dd4bf; }
.tl-msg-lock path { stroke: #2dd4bf; stroke-width: 1.6; }
.tl-dots circle { fill: #7ff0d6; opacity: 0; filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.9)); transition: opacity 300ms ease; }
.tl-dots circle.on { opacity: 0.9; }

/* The phone */
.tl-phone { position: absolute; left: 40px; top: 10px; width: 230px; height: 440px; padding: 9px; border-radius: 40px; background: linear-gradient(145deg, #8e98a6, #3a4350 18%, #1b2029 50%, #444d5a 82%, #9aa4b1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 70px -30px rgba(0, 0, 0, 0.85), 0 26px 50px -36px rgba(0, 150, 255, 0.6); }
.tl-screen { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px 14px 16px; overflow: hidden; border-radius: 32px; background: radial-gradient(120% 60% at 50% 0%, rgba(0, 120, 255, 0.28), transparent 60%), #070d18; color: #eef4fb; font-size: 11px; }
.tl-status { display: flex; align-items: center; justify-content: space-between; height: 16px; color: #fff; font-size: 10.5px; font-weight: 600; }
.tl-isl { width: 62px; height: 18px; border-radius: 999px; background: #000; }
.tl-bars { display: flex; gap: 1.5px; align-items: flex-end; }
.tl-bars b { width: 3px; height: 4px; border-radius: 1px; background: #fff; }
.tl-bars b:nth-child(2) { height: 6px; } .tl-bars b:nth-child(3) { height: 8px; } .tl-bars b:nth-child(4) { height: 10px; }
.tl-eye { margin: 6px 0 0; color: #8ea3bb; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.tl-title { margin: -6px 0 0; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.tl-sec { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background 500ms ease, box-shadow 500ms ease; }
.tl-sec-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 196, 107, 0.16); color: #ffc46b; transition: background 500ms ease, color 500ms ease; }
.tl-sec b { display: block; color: #fff; font-size: 12px; }
.tl-sec small { display: block; color: #8ea3bb; font-size: 10px; }
.is-secure .tl-sec { background: rgba(45, 212, 191, 0.12); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4); }
.is-secure .tl-sec-ic { background: rgba(45, 212, 191, 0.2); color: #5eead4; }
.tl-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.canvas .tl-steps li { margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; color: #6f8399; font-size: 10.5px; font-weight: 600; transition: color 300ms ease; }
.tl-dot { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18); color: transparent; transition: background 300ms ease, box-shadow 300ms ease, color 300ms ease; }
.tl-dot .ti { width: 10px; height: 10px; stroke-width: 3; }
.tl-steps li.now { color: #cfe6ff; }
.tl-steps li.now .tl-dot { box-shadow: inset 0 0 0 1.5px #5ac8ff; animation: tl-ping 1s ease-in-out infinite; }
.tl-steps li.done { color: #e6fff8; }
.tl-steps li.done .tl-dot { background: #20c997; box-shadow: none; color: #04261c; }
@keyframes tl-ping { 50% { box-shadow: inset 0 0 0 1.5px #5ac8ff, 0 0 0 4px rgba(90, 200, 255, 0.18); } }
.tl-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: auto; padding: 14px 10px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #8ea3bb; font: inherit; cursor: default; transition: background 400ms ease, transform 200ms ease, box-shadow 400ms ease, color 400ms ease; }
.tl-btn-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.tl-btn-ic .ti { width: 20px; height: 20px; }
.tl-btn b { color: #fff; font-size: 13px; }
.tl-btn small { font-size: 9.5px; }
.is-secure .tl-btn { background: linear-gradient(140deg, rgba(10, 132, 255, 0.35), rgba(0, 194, 255, 0.2)); box-shadow: inset 0 0 0 1px rgba(90, 200, 255, 0.45); color: #bfe7ff; }
.is-secure .tl-btn-ic { background: linear-gradient(135deg, #0a84ff, #00c2ff); color: #fff; }
.is-press .tl-btn { transform: scale(0.95); box-shadow: inset 0 0 0 1px rgba(90, 200, 255, 0.7), 0 0 0 6px rgba(0, 194, 255, 0.18); }
.is-unlocked .tl-btn { background: linear-gradient(140deg, rgba(32, 201, 151, 0.4), rgba(45, 212, 191, 0.18)); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.5); color: #b6f5e3; }
.is-unlocked .tl-btn-ic { background: linear-gradient(135deg, #14b8a6, #20c997); }
.tl-toast { position: absolute; left: 14px; right: 14px; top: 34px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(20, 40, 36, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.45), 0 14px 30px -14px rgba(0, 0, 0, 0.8); color: #c8fbec; font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(-12px); transition: opacity 350ms ease, transform 450ms cubic-bezier(0.23, 1, 0.32, 1); }
.tl-toast .ti { color: #2dd4bf; stroke-width: 3; }
.is-toast .tl-toast { opacity: 1; transform: none; }
.tl-hbar { position: absolute; left: 50%; bottom: 6px; width: 80px; height: 4px; margin-left: -40px; border-radius: 4px; background: rgba(255, 255, 255, 0.5); }

/* The phase label above the link and the eavesdropper's view under it */
.tl-phase { position: absolute; left: 380px; top: 108px; display: flex; align-items: center; gap: 12px; width: 280px; padding: 10px 14px; border-radius: 16px; background: rgba(7, 18, 36, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(143, 220, 255, 0.2); }
.tl-phase-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0a84ff, #00c2ff); color: #fff; font-size: 13px; font-weight: 700; transition: background 500ms ease; }
.is-secure .tl-phase-n { background: linear-gradient(135deg, #14b8a6, #20c997); }
.tl-phase b { display: block; color: #fff; font-size: 13px; }
.tl-phase small { display: block; color: #9fc4e4; font: 500 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tl-air { position: absolute; left: 300px; top: 300px; width: 440px; padding: 12px 16px; border-radius: 16px; background: rgba(4, 10, 20, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tl-air p { margin: 0 0 6px; color: #ff8f8f; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.tl-hex { display: block; min-height: 3.9em; color: #5b7a93; font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.is-secure .tl-hex { color: #6fa3a0; }

/* The device */
.tl-dev { position: absolute; left: 770px; top: 105px; width: 240px; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -30px rgba(0, 0, 0, 0.8); color: #fff; transition: box-shadow 500ms ease; }
.is-secure .tl-dev { box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.45), 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(45, 212, 191, 0.35); }
.tl-dev-top { position: relative; display: flex; align-items: center; gap: 12px; }
.tl-dev-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #1b3558, #0c1d33); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #ffc46b; transition: color 400ms ease, background 400ms ease; }
.tl-dev-ic .ti { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity 300ms ease; }
.tl-dev-ic .opened { opacity: 0; }
.is-unlocked .tl-dev-ic { color: #5eead4; background: linear-gradient(135deg, #0f3f3a, #0a2622); }
.is-unlocked .tl-dev-ic .shut { opacity: 0; }
.is-unlocked .tl-dev-ic .opened { opacity: 1; }
.tl-dev-top b { display: block; font-size: 14px; }
.tl-dev-top small { display: block; color: #9fb3c8; font-size: 11px; }
.tl-led { position: absolute; top: 2px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #ffc46b; box-shadow: 0 0 8px #ffc46b; }
.is-secure .tl-led { background: #20c997; box-shadow: 0 0 10px #20c997; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 194, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(0, 194, 255, 0.35); color: #9fe0ff; font-size: 10.5px; font-weight: 600; }
.tl-chip .ti { width: 13px; height: 13px; }
.tl-log { display: flex; flex-direction: column; gap: 4px; min-height: 72px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); list-style: none; color: #9fc4e4; font: 500 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.canvas .tl-steps li::before, .canvas .tl-log li::before { content: none; display: none; }
.canvas .tl-log li { margin: 0; padding: 0; animation: tl-in 400ms ease; }
.tl-log li:last-child { color: #e6f6ff; }
@keyframes tl-in { from { opacity: 0; transform: translateX(-4px); } }

/* Narrow screens: phone on top, the link running down, the device underneath */
.tl.is-v .tl-phone { left: 75px; top: 0; }
.tl.is-v .tl-phase { left: 0; top: 520px; width: 150px; flex-direction: column; align-items: flex-start; gap: 6px; }
.tl.is-v .tl-air { left: 232px; top: 470px; width: 148px; padding: 10px 12px; }
.tl.is-v .tl-hex { font-size: 10px; min-height: 0; max-height: 210px; overflow: hidden; }
.tl.is-v .tl-dev { left: 70px; top: 745px; }

@media (prefers-reduced-motion: reduce) { .tl-lane, .tl-steps li.now .tl-dot { animation: none; } .tl-toast, .tl-btn, .tl-msg { transition: none; } }
.tl.is-v .tl-msg-t { display: none; } /* the phase card names the message; only the badge travels down the link */