/* Sign in with Octa · the button · v2 · 19 October 2026 (v1 · 9 October 2026) · Octa Account Brand Book, chapter 07
   One Octa Account for the whole Octa network. The mark is Octa Account's: Octa Exchange's Eight (Octa Account is a Fruit of Octa Exchange;
   Master, 19 Oct 2026), lying, 92% of the button's height wide ("Bigger"). Until v2 it was Octa Platform's solid octagon.
   Colours are Octa's own: night #121319, cream #F2F0E9, the eight aspects, Mental on day paper #4A4842,
   the focus ring Spiritual #EA9244. Nothing is invented.
   Label: Plus Jakarta Sans 600 (load it on the page: fonts.googleapis.com … family=Plus+Jakarta+Sans:wght@600). */

.octa-signin{
  --os-bg:#121319; --os-fg:#F2F0E9; --os-bd:rgba(242,240,233,.16); --os-hover:#191a21; --os-men:#D8D8D8;
  --os-h:44px; --os-mark:40px; --os-fs:15px; --os-px:20px; --os-gap:10px; --os-r:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--os-gap);
  box-sizing:border-box; height:var(--os-h); min-width:var(--os-h); padding:0 var(--os-px);
  border:1px solid var(--os-bd); border-radius:var(--os-r);
  background:var(--os-bg); color:var(--os-fg);
  font:600 var(--os-fs)/1 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease, border-color .18s ease, transform .12s ease, opacity .18s ease;
}
.octa-signin:hover{background:var(--os-hover)}
.octa-signin:active{transform:scale(.98)}
.octa-signin:focus-visible{outline:2px solid #EA9244; outline-offset:3px}

/* the mark: Octa Exchange's Eight, lying, its width 92% of the button's height (--os-mark), never below 24px wide; its colours flow
   through the line once every 16 s, as Octa Exchange's own Eight does (Mental #D8D8D8 by night, #4A4842 on day paper) */
.octa-signin .os-mark{width:var(--os-mark); height:calc(var(--os-mark) / 2); flex:none; display:block; overflow:visible}
.octa-signin .os-eight line{stroke:#8C8958; animation:var(--os-flow, osEightN) 16s linear infinite}
@keyframes osEightN{0%{stroke:#8C8958}6.25%{stroke:#3A7F8F}12.5%{stroke:#8C7058}18.75%{stroke:#4C9A6A}25%{stroke:#FACF5E}31.25%{stroke:#C9A23F}37.5%{stroke:#6A8C99}43.75%{stroke:#A9C3CC}50%{stroke:#DA614B}56.25%{stroke:#9C6A3E}62.5%{stroke:#7B6580}68.75%{stroke:#5F8FA3}75%{stroke:#D8D8D8}81.25%{stroke:#A24B3C}87.5%{stroke:#EA9244}93.75%{stroke:#6E7468}100%{stroke:#8C8958}}
@keyframes osEightD{0%{stroke:#8C8958}6.25%{stroke:#3A7F8F}12.5%{stroke:#8C7058}18.75%{stroke:#4C9A6A}25%{stroke:#FACF5E}31.25%{stroke:#C9A23F}37.5%{stroke:#6A8C99}43.75%{stroke:#A9C3CC}50%{stroke:#DA614B}56.25%{stroke:#9C6A3E}62.5%{stroke:#7B6580}68.75%{stroke:#5F8FA3}75%{stroke:#4A4842}81.25%{stroke:#A24B3C}87.5%{stroke:#EA9244}93.75%{stroke:#6E7468}100%{stroke:#8C8958}}
.octa-signin.os-still .os-eight line{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.octa-signin .os-eight line{animation-play-state:paused}.octa-signin{transition:none}.octa-signin:active{transform:none}}

/* styles */
.octa-signin.os-day{--os-bg:#F2F0E9; --os-fg:#121319; --os-bd:rgba(18,19,25,.18); --os-hover:#E7E4DA; --os-men:#4A4842; --os-flow:osEightD}
.octa-signin.os-outline{--os-bg:transparent; --os-fg:#121319; --os-bd:#121319; --os-hover:rgba(18,19,25,.06); --os-men:#4A4842; --os-flow:osEightD}
.octa-signin.os-outline-light{--os-bg:transparent; --os-fg:#F2F0E9; --os-bd:#F2F0E9; --os-hover:rgba(242,240,233,.08); --os-men:#D8D8D8}
/* v1.2 · 19 Oct 2026 (Master: "Why sign in with Octa doesn't have a day view?"): the button with no style of its own follows the page —
   night on a night page, the Day style on a day page (data-theme="day" or "light", or the visitor's light setting when the page names
   no theme). data-style="night" keeps it night anywhere; the other styles stay as chosen. The same colours as the Day style: nothing new. */
:is([data-theme="day"],[data-theme="light"],[data-octa-theme="day"],[data-octa-theme="light"]) .octa-signin:not(.os-night):not(.os-day):not(.os-outline):not(.os-outline-light){--os-bg:#F2F0E9; --os-fg:#121319; --os-bd:rgba(18,19,25,.18); --os-hover:#E7E4DA; --os-men:#4A4842; --os-flow:osEightD}
@media (prefers-color-scheme:light){:root:not([data-theme]):not([data-octa-theme]) .octa-signin:not(.os-night):not(.os-day):not(.os-outline):not(.os-outline-light){--os-bg:#F2F0E9; --os-fg:#121319; --os-bd:rgba(18,19,25,.18); --os-hover:#E7E4DA; --os-men:#4A4842; --os-flow:osEightD}}

/* sizes: large 56 · medium 44 (the default) · small 36 */
.octa-signin.os-l{--os-h:56px; --os-mark:52px; --os-fs:17px; --os-px:26px; --os-gap:12px}
.octa-signin.os-s{--os-h:36px; --os-mark:33px; --os-fs:13.5px; --os-px:15px; --os-gap:8px}
/* the mark alone, for tight spaces (always with an aria-label) */
.octa-signin.os-icon{padding:0; width:var(--os-h); gap:0}
/* in the round mark-only button the Eight stands, 60% of the button's height tall */
.octa-signin .os-mark.os-mark-8{width:calc(var(--os-h) * .3); height:calc(var(--os-h) * .6)}
.octa-signin.os-icon .os-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* the softer corner, to sit with Octa Platform's own form buttons */
.octa-signin.os-rect{--os-r:10px}
.octa-signin.os-rect.os-l{--os-r:12px}
.octa-signin.os-rect.os-s{--os-r:8px}
/* full width, for phones and forms */
.octa-signin.os-block{display:flex; width:100%}

/* states */
.octa-signin[aria-disabled="true"], .octa-signin:disabled{opacity:.38; cursor:not-allowed; pointer-events:none}
.octa-signin[aria-busy="true"]{cursor:progress; pointer-events:none}