/* 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}

/* 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}