/* Small additions for the sign-in pages (login, register, forgot/reset password, verify, 404/500).
   Everything else comes from takelan.css; colours are its --tk-* tokens. */
[hidden] { display: none !important; }

.auth-sub { margin: 0; color: var(--tk-muted); }
.auth-name { font-weight: 700; font-size: 16px; }
.auth-card .btn + .btn, .auth-card .btn + .auth-foot { margin-top: 10px; }
#resendBox { margin-bottom: 14px; }
.auth-card .lead { margin-bottom: 16px; color: var(--tk-muted); }

.divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--tk-muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--tk-border); }

/* in-flight indicator inside the submit button */
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: tk-spin .7s linear infinite; flex: none;
}

/* password strength hint, announced politely as the user types */
.password-strength { margin-top: 6px; padding: 3px 8px; border-radius: var(--tk-radius); font-size: 12px; font-weight: 600; }
.strength-weak { background: var(--tk-err-bg); color: var(--tk-err-fg); }
.strength-medium { background: var(--tk-warn-bg); color: var(--tk-warn-fg); }
.strength-strong { background: var(--tk-ok-bg); color: var(--tk-ok-fg); }

/* result of e-mail verification */
.state-icon {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tk-surface-2); color: var(--tk-muted);
}
.state-icon .icon { width: 24px; height: 24px; }
.state-icon .spinner { width: 22px; height: 22px; border-width: 3px; }
.state-icon.state-ok { background: var(--tk-ok-bg); color: var(--tk-ok-fg); }
.state-icon.state-fail { background: var(--tk-err-bg); color: var(--tk-err-fg); }
.auth-result { text-align: center; }
.auth-result .state-icon { margin-bottom: 12px; }
.auth-result h1 { font-size: 20px; }

/* ---------- the scene beside the form (templates/_auth_scene.html, auth-scene.js) ----------
   Decorative. Everything that moves is declared inside prefers-reduced-motion: no-preference AND
   html:not([data-motion="off"]); without it the same picture stands still with packets part-way along the tunnel.
   Motion is transform only: text never changes colour or opacity, so contrast is the same at every moment. */
.auth-split { gap: 24px; }
.auth-scene {
  --sc-a: #632ca6; --sc-b: #2f6fd6; --sc-out: #632ca6; --sc-back: #0b7a6a; --sc-glow: rgba(99, 44, 166, .14);
  width: 100%; max-width: 400px; background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow-1); padding: 14px 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
@media (prefers-color-scheme: dark) {
  .auth-scene { --sc-a: #a88bf0; --sc-b: #6aa2ff; --sc-out: #c4adff; --sc-back: #37c9b0; --sc-glow: rgba(168, 139, 240, .18); }
}
.sc-svg { display: block; width: 100%; height: auto; aspect-ratio: 520 / 250; overflow: visible; }
.sc-box { fill: var(--tk-surface-2); stroke: var(--tk-border); stroke-width: 2; stroke-linejoin: round; }
.sc-line { stroke: var(--tk-border); stroke-width: 2; fill: none; }
.sc-dot { fill: var(--tk-muted); }
.sc-acc { stroke: var(--sc-a); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-stop-a { stop-color: var(--sc-a); } .sc-stop-b { stop-color: var(--sc-b); }
.sc-tube-glow { fill: var(--sc-glow); }
.sc-tube { fill: url(#scTube); opacity: .28; stroke: var(--sc-a); stroke-width: 1.5; }
.sc-flow { stroke: var(--sc-a); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; fill: none; opacity: .7; }
.sc-portal { fill: var(--tk-surface); stroke: var(--sc-a); stroke-width: 2.5; }
.sc-pk-out { fill: var(--sc-out); }
.sc-pk-back { fill: var(--sc-back); }
.sc-lock-bg { fill: var(--tk-surface); stroke: var(--sc-a); stroke-width: 2.5; }
.sc-lock-ring { fill: none; stroke: var(--sc-a); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; }
.sc-lock-body { fill: var(--sc-a); }
.sc-lock-arc { fill: none; stroke: var(--sc-a); stroke-width: 2.5; stroke-linecap: round; }
.sc-arrow { stroke: var(--tk-muted); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-t { font-family: var(--tk-font); font-size: 13px; fill: var(--tk-muted); }
.sc-t-addr { font-family: var(--tk-mono); font-size: 13px; fill: var(--tk-text); }

/* still picture: packets part-way along the 240-unit tunnel (positions are classes: the strict CSP forbids style attributes) */
.sc-pk { transform: translateX(var(--x, 0px)); }
.sc-pk-1 { --x: 28px; } .sc-pk-2 { --x: 78px; } .sc-pk-3 { --x: 176px; }
.sc-pk-b1 { --x: 150px; } .sc-pk-b2 { --x: 206px; }

/* the taglines: all three on one line of text when still; one at a time (JS adds .sc-rotating) when moving */
.sc-tags { list-style: none; margin: 0; padding: 0; width: 100%; min-height: 3.1em; text-align: center; font-weight: 600; font-size: 14px; color: var(--tk-text); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px 14px; }
.sc-tags li { margin: 0; }
.sc-rotating .sc-tags li:not(.is-active), .auth-scene.sc-rotating .sc-tags li:not(.is-active) { display: none; }
.auth-motion { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--tk-radius); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--tk-muted); cursor: pointer; }
.auth-motion:hover { background: var(--tk-surface-2); border-color: var(--tk-border); }
.auth-motion:focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 2px; }
#motionToggle.auth-motion .motion-state { margin-left: 2px; font-weight: 600; color: var(--tk-text); text-align: left; }
.auth-motion[disabled] { cursor: default; opacity: 1; }

@media (min-width: 1000px) {
  .auth-split { flex-direction: row; gap: 40px; }
  .auth-split .auth-card { flex: none; width: 400px; }
  .auth-scene { max-width: 520px; padding: 20px 20px 12px; }
  .sc-tags { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-flow { animation: sc-flow 1.2s linear infinite; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-pk { animation: sc-fwd 6s linear infinite both; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-pk-1 { animation-delay: 0s; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-pk-2 { animation-delay: 2s; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-pk-3 { animation-delay: 4s; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-pk-b1 { animation-name: sc-back; animation-delay: 1s; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-pk-b2 { animation-name: sc-back; animation-delay: 3.5s; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-lock-ring { animation: sc-ping 2s ease-out infinite; }
  html:not([data-motion="off"]) .auth-scene[data-running="true"] .sc-tags li.is-active { animation: sc-rise .45s ease-out; }
}
@keyframes sc-flow { to { stroke-dashoffset: -24; } }
@keyframes sc-fwd { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(240px); opacity: 0; } }
@keyframes sc-back { 0% { transform: translateX(240px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes sc-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sc-rise { from { transform: translateY(8px); } to { transform: none; } }

/* proof-of-work captcha status line (captcha.js) */
.captcha-status { min-height: 18px; margin: 0 0 10px; }