/* ORBINTU identity/auth surfaces — /sign-in, /account, and the Create ORBI claim modal's account step.
   Same system: near-black, #fa680c, pixel/system labels, thin borders. No white SaaS cards, no giant radii. */

.ob-auth { max-width: 400px; margin: 0 auto; display: grid; gap: 20px; }
.ob-auth__field { display: grid; gap: 8px; }
.ob-auth__field label { font-family: var(--ob-font, var(--font-caption, "Pixelify Sans", monospace)); font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ob-d, #aa4b10); }
.ob-auth__field input[type="email"], .ob-auth__field input[type="tel"] {
  width: 100%; box-sizing: border-box; background: #0a0400; border: 1px solid var(--ob-dd, #733612); color: var(--ob-c, #fa680c);
  font-family: var(--ob-font, monospace); font-size: 16px; letter-spacing: .02em; padding: 14px 16px; text-transform: none;
}
.ob-auth__field input:focus { outline: none; border-color: var(--ob-c, #fa680c); box-shadow: 0 0 0 1px var(--ob-c, #fa680c); }
.ob-auth__field input::placeholder { color: var(--ob-dd, #733612); }
.ob-auth__note { font-family: var(--font-body-alt, monospace); font-size: var(--type-label); line-height: 1.5; color: var(--stone-400, #9f9b92); }

.ob-auth__btn { width: 100%; font-family: var(--ob-font, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: 15px;
  padding: 14px 18px; border: 1px solid var(--ob-c, #fa680c); background: var(--ob-c, #fa680c); color: #050200; cursor: var(--cursor-hover); transition: background .12s linear; }
.ob-auth__btn:hover { background: #ff8a3c; }
.ob-auth__btn:disabled { opacity: .5; cursor: var(--cursor-default); }
.ob-auth__btn--ghost { background: transparent; color: var(--ob-c, #fa680c); }
.ob-auth__btn--ghost:hover { background: rgba(250, 104, 12, .08); }

.ob-auth__switch { text-align: center; font-family: var(--font-body-alt, monospace); font-size: var(--type-body-s); color: var(--stone-300, #cecdc9); }
.ob-auth__switch a { color: var(--ob-c, #fa680c); }
.ob-auth__legal { font-family: var(--font-body-alt, monospace); font-size: var(--type-label); line-height: 1.6; color: var(--t-faint, #8d8981); text-align: center; }
.ob-auth__legal a { color: inherit; text-decoration: underline; }

/* OTP code entry: 6 boxes, auto-advance, paste-friendly (see auth-ui.js) */
.ob-otp { display: flex; gap: 8px; justify-content: center; }
.ob-otp input { width: 44px; height: 52px; text-align: center; font-family: var(--ob-font, monospace); font-size: 22px; background: #0a0400;
  border: 1px solid var(--ob-dd, #733612); color: #fff; }
.ob-otp input:focus { outline: none; border-color: var(--ob-c, #fa680c); box-shadow: 0 0 0 1px var(--ob-c, #fa680c); }
@media (max-width: 420px) { .ob-otp input { width: 38px; height: 46px; font-size: 18px; } .ob-otp { gap: 6px; } }

.ob-auth__resend { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body-alt, monospace); font-size: var(--type-body-s); color: var(--stone-400, #9f9b92); }
.ob-auth__resend button { background: none; border: 0; color: var(--ob-c, #fa680c); cursor: var(--cursor-hover); font: inherit; padding: 0; }
.ob-auth__resend button:disabled { color: var(--t-faint, #8d8981); cursor: var(--cursor-default); }

.ob-auth__email-chip { font-family: var(--ob-font, monospace); letter-spacing: .04em; color: var(--ob-c, #fa680c); }

.ob-auth__error { border: 1px solid #a13a2f; background: rgba(255, 90, 79, .08); color: #ff9a8f; padding: 12px 14px; font-family: var(--font-body-alt, monospace); font-size: var(--type-body-s); line-height: 1.5; }
.ob-auth__error b { display: block; font-family: var(--ob-font, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: var(--type-label); color: #ff5a4f; margin-bottom: 4px; }

/* the honest "not connected" state — never a silent fake success */
.ob-auth__notconnected { border: 1px dashed var(--ob-dd, #733612); background: rgba(250, 104, 12, .05); padding: 14px 16px; font-family: var(--font-body-alt, monospace); font-size: var(--type-body-s); line-height: 1.5; color: var(--stone-300, #cecdc9); }
.ob-auth__notconnected b { display: block; font-family: var(--ob-font, monospace); text-transform: uppercase; letter-spacing: .08em; font-size: var(--type-label); color: var(--ob-c, #fa680c); margin-bottom: 4px; }

/* ── /account page ── */
.ob-acct { display: grid; grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); gap: 40px; align-items: start; }
.ob-acct__nav { display: grid; gap: 2px; position: sticky; top: 96px; }
.ob-acct__nav a { display: block; padding: 10px 12px; font-family: var(--ob-font, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: var(--type-body-s); color: var(--stone-400, #9f9b92); border-left: 2px solid transparent; }
.ob-acct__nav a:hover { color: #fff; } .ob-acct__nav a.active { color: var(--ob-c, #fa680c); border-left-color: var(--ob-c, #fa680c); background: rgba(250, 104, 12, .06); }
.ob-acct__panel { display: none; }
.ob-acct__panel.active { display: grid; gap: 20px; }
.ob-acct__row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--stone-800, #201c19); }
.ob-acct__row dt { font-family: var(--ob-font, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: var(--type-label); color: var(--t-faint, #8d8981); }
.ob-acct__row dd { margin: 0; font-family: var(--font-body-alt, monospace); font-size: 15px; color: #fff; }
.ob-acct__tag { font-family: var(--ob-font, monospace); font-size: var(--type-label); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border: 1px solid currentColor; }
.ob-acct__tag--public { color: #2ecc71; } .ob-acct__tag--private { color: var(--stone-400, #9f9b92); } .ob-acct__tag--verified { color: #2ecc71; } .ob-acct__tag--unverified { color: var(--t-faint, #8d8981); }
@media (max-width: 767px) { .ob-acct { grid-template-columns: 1fr; } .ob-acct__nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 8px; } .ob-acct__row { grid-template-columns: 1fr; gap: 4px; } }

/* ── Visibility / status labels (pcommon.vis) — reusable across account, trust and legal surfaces.
   Meaning is carried by the text; border style reinforces it (solid = true now, dashed = not live yet / undecided). ── */
.ob-vis { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ob-font, monospace); font-size: var(--type-label); line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 7px; border: 1px solid currentColor; white-space: nowrap; color: var(--stone-300, #cecdc9); text-shadow: none; }
.ob-vis::before { content: ""; width: 5px; height: 5px; background: currentColor; flex: none; }
.ob-vis--public, .ob-vis--verified, .ob-vis--now { color: #2ecc71; }
.ob-vis--private, .ob-vis--only-you { color: var(--stone-300, #cecdc9); }
.ob-vis--private::before, .ob-vis--only-you::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ob-vis--permission, .ob-vis--connected { color: var(--ob-amber, #f0b46a); }
.ob-vis--unverified, .ob-vis--optional { color: var(--stone-400, #9f9b92); }
.ob-vis--planned, .ob-vis--draft, .ob-vis--pending { color: var(--ob-amber, #f0b46a); border-style: dashed; }
.ob-vis--planned::before, .ob-vis--draft::before, .ob-vis--pending::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ob-vis--policy { color: var(--copper-500, #fa680c); }

/* ── LOCAL TEST MODE (mock builds only — orbi-devtools.js / orbi-mock.js). Small, secondary, never the focus. ── */
.ob-dev { position: fixed; left: 12px; bottom: 12px; z-index: 2147483000; font-family: var(--ob-font, monospace); font-size: var(--type-label); letter-spacing: .1em; color: #cecdc9; max-width: min(340px, calc(100vw - 24px)); }
.ogf-active .ob-dev { bottom: 104px; }
.ob-dev__chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; width: auto; padding: 5px 9px; background: rgba(10, 9, 8, .92); border: 1px dashed #5b4a2e; color: #f0b46a; font: inherit; letter-spacing: .12em; cursor: var(--cursor-hover); }
.ob-dev__chip i { width: 6px; height: 6px; background: #f0b46a; }
.ob-dev__chip:focus-visible, .ob-dev__btn:focus-visible { outline: 2px solid #fa680c; outline-offset: 2px; }
.ob-dev__panel { margin-top: 6px; padding: 12px; background: rgba(10, 9, 8, .97); border: 1px solid #34302b; display: grid; gap: 8px; max-height: min(70vh, 560px); overflow: auto; }
.ob-dev__panel p { margin: 0; line-height: 1.5; text-transform: none; letter-spacing: .03em; font-family: var(--font-body-alt, monospace); font-size: var(--type-label); color: #9f9b92; }
.ob-dev__panel .ob-dev__t { font-family: var(--ob-font, monospace); letter-spacing: .12em; color: #f0b46a; font-size: var(--type-label); }
.ob-dev__panel .ob-dev__k { font-family: var(--ob-font, monospace); letter-spacing: .12em; font-size: var(--type-label); color: #cecdc9; text-transform: uppercase; }
.ob-dev__panel .ob-dev__n { font-size: var(--type-label); color: #8d8981; }
.ob-dev__qa { display: grid; gap: 8px; border-top: 1px solid #24211e; padding-top: 8px; }
.ob-dev__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.ob-dev__btn { padding: 6px 8px; background: #141210; border: 1px solid #34302b; color: #cecdc9; font: inherit; font-size: var(--type-label); letter-spacing: .1em; cursor: var(--cursor-hover); text-align: left; }
.ob-dev__btn:hover { border-color: #5b4a2e; } .ob-dev__btn[aria-pressed="true"] { border-color: #fa680c; color: #fa680c; }
.ob-dev__st:empty { display: none; }

/* test verification code — LOCAL TEST MODE only (rendered only when OBAuth.devCode() returns a code) */
.ob-devcode { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px dashed #5b4a2e; background: rgba(240, 180, 106, .05);
  font-family: var(--ob-font, monospace); font-size: var(--type-label); letter-spacing: .12em; color: #f0b46a; }
.ob-devcode b { font-weight: 400; font-size: 16px; letter-spacing: .32em; color: #f4f1ea; }

/* inline validation — one line under the field it belongs to, never a giant alert */
.ob-ferr { margin: 4px 0 0; font-family: var(--ob-font, monospace); font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase; color: #ff8a7d; }
.ob-ferr:empty { display: none; }
.ob-fok { color: #7fd6a0; }
input[aria-invalid="true"], textarea[aria-invalid="true"], .ob-otp[data-invalid] input { border-color: #a13a2f !important; }
.ob-busy { position: relative; pointer-events: none; opacity: .75; }
.ob-busy::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; vertical-align: 1px; background: currentColor; animation: ob-busy .6s steps(2) infinite; }
@keyframes ob-busy { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .ob-busy::after { animation: none; } }
/* phones: while the claim dialog is open the LOCAL TEST MODE chip docks above it instead of covering its content */
@media (max-width: 767px) { body:has(.ogf-modal-overlay.open) .ob-dev { top: 4px; bottom: auto; } }

/* Turnstile (interaction-only): invisible unless Cloudflare needs a check; then a small card bottom-centre */
.ob-turnstile { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; }
.ob-turnstile:empty { display: none; }