/* Sign in with Octa · the button · v1 · 9 October 2026
   One Octa Account for the whole Octa network. The mark is Octa Platform's solid octagon (the account lives in the Platform).
   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:20px; --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 Platform's solid octagon, flat edge on top, never below 16px */
.octa-signin .os-mark{width:var(--os-mark); height:var(--os-mark); flex:none; display:block}
.octa-signin .os-mark .m{fill:var(--os-men); stroke:var(--os-men)}
/* it turns clockwise, one turn every 20 s, linear, for ever: still for people who ask for less motion */
@keyframes osTurn{to{transform:rotate(360deg)}}
.octa-signin .os-mark{animation:osTurn 20s linear infinite; transform-origin:50% 50%}
.octa-signin.os-still .os-mark{animation:none}
@media (prefers-reduced-motion:reduce){.octa-signin .os-mark{animation:none}.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}
.octa-signin.os-outline{--os-bg:transparent; --os-fg:#121319; --os-bd:#121319; --os-hover:rgba(18,19,25,.06); --os-men:#4A4842}
.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}
@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}}

/* sizes: large 56 · medium 44 (the default) · small 36 */
.octa-signin.os-l{--os-h:56px; --os-mark:24px; --os-fs:17px; --os-px:26px; --os-gap:12px}
.octa-signin.os-s{--os-h:36px; --os-mark:18px; --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}
.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}