/* =========================================================================
   OMEGA POINT, UI component styles (pairs with op-ui.js)
   Token-driven only (consumes omega.css :root vars). No hardcoded color.
   Includes loading / empty / error / disabled / focus states for each.
   ========================================================================= */

/* visible focus ring for every interactive component (a11y) */
.op-btn:focus-visible,
.op-field__control:focus-visible,
.op-modal__panel:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px;
}

/* ---- op-button ---- */
.op-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-weight:600; cursor:pointer; border-radius:11px;
  border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, opacity .2s;
  line-height:1; white-space:nowrap;
}
.op-btn--sm{padding:9px 14px; font-size:.82rem}
.op-btn--md{padding:13px 22px; font-size:.92rem}
.op-btn--lg{padding:16px 28px; font-size:1rem}
.op-btn--full{width:100%}
.op-btn--primary{background:linear-gradient(110deg,var(--acc),var(--acc2)); color:#04121a; box-shadow:0 10px 34px rgba(34,211,238,.22)}
.op-btn--primary:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 16px 44px rgba(34,211,238,.34)}
.op-btn--ghost{border-color:var(--card-b); color:var(--t0); background:rgba(255,255,255,.02)}
.op-btn--ghost:hover:not(:disabled){border-color:var(--acc); color:var(--acc)}
.op-btn--danger{background:rgba(231,76,60,.14); border-color:rgba(231,76,60,.4); color:#ff9b8f}
.op-btn--danger:hover:not(:disabled){background:rgba(231,76,60,.22)}
.op-btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.op-btn__spin{display:none; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:op-spin .7s linear infinite}
.op-btn[aria-busy="true"] .op-btn__spin{display:inline-block}
@keyframes op-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.op-btn__spin{animation-duration:1.6s} .op-btn:hover{transform:none!important}}

/* ---- op-badge ---- */
.op-badge{display:inline-flex; align-items:center; gap:6px; font:600 9px/1 'JetBrains Mono',monospace;
  letter-spacing:1px; text-transform:uppercase; padding:5px 9px; border-radius:20px; border:1px solid}
.op-badge--live,.op-badge--ok{background:rgba(55,211,155,.14); color:var(--grn); border-color:rgba(55,211,155,.3)}
.op-badge--beta,.op-badge--warn{background:rgba(246,200,67,.14); color:var(--yel); border-color:rgba(246,200,67,.3)}
.op-badge--dev,.op-badge--info{background:rgba(126,149,166,.14); color:var(--t2); border-color:rgba(126,149,166,.3)}
.op-badge--err{background:rgba(231,76,60,.14); color:#ff9b8f; border-color:rgba(231,76,60,.4)}

/* ---- op-field ---- */
op-field{display:block; margin-bottom:16px}
.op-field__label{display:block; font:600 .8rem 'JetBrains Mono',monospace; letter-spacing:.6px;
  color:var(--t2); margin-bottom:7px; text-transform:uppercase}
.op-field__req{color:var(--acc)}
.op-field__control{width:100%; background:var(--bg2); border:1px solid var(--card-b); border-radius:10px;
  padding:12px 14px; color:var(--t0); font-family:inherit; font-size:.95rem; transition:.2s}
.op-field__control:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.op-field__control[aria-invalid="true"]{border-color:var(--red); box-shadow:0 0 0 3px rgba(231,76,60,.12)}
.op-field__control:disabled{opacity:.55; cursor:not-allowed}
textarea.op-field__control{min-height:130px; resize:vertical}
.op-field__help{color:var(--t2); font-size:.8rem; margin:6px 0 0}
.op-field__error{color:#ff9b8f; font-size:.8rem; margin:6px 0 0; min-height:0}
.op-field__error:empty{margin:0}

/* ---- op-async (states) ---- */
op-async{display:block}
.op-async__default{display:flex; align-items:center; justify-content:center; gap:10px;
  padding:38px 20px; text-align:center; color:var(--t2); font:500 .88rem 'JetBrains Mono',monospace}
.op-async__txt--err{color:#ff9b8f}
.op-spinner{width:20px; height:20px; border-radius:50%; border:2px solid var(--line);
  border-top-color:var(--acc); animation:op-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.op-spinner{animation-duration:1.6s}}

/* skeleton helper for richer loading states */
.op-skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%; animation:op-shimmer 1.4s ease-in-out infinite; border-radius:8px}
.op-skel--line{height:14px; margin:8px 0}
@keyframes op-shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.op-skel{animation:none}}

/* ---- op-modal ---- */
op-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(4,8,14,.74); backdrop-filter:blur(4px)}
op-modal[open]{display:flex}
.op-modal__panel{background:linear-gradient(160deg,var(--bg2),var(--bg)); border:1px solid var(--card-b);
  border-radius:16px; padding:26px; max-width:520px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:op-pop .25s cubic-bezier(.2,.7,.2,1)}
@keyframes op-pop{from{opacity:0; transform:translateY(12px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.op-modal__panel{animation:none}}

/* ---- toast ---- */
.op-toast-host{position:fixed; right:18px; bottom:18px; z-index:300; display:flex; flex-direction:column;
  gap:10px; max-width:min(360px,90vw)}
.op-toast{background:var(--bg3); border:1px solid var(--card-b); border-left:3px solid var(--acc);
  border-radius:10px; padding:13px 16px; color:var(--t0); font-size:.9rem; cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.4); opacity:0; transform:translateX(20px); transition:.3s}
.op-toast.is-in{opacity:1; transform:none}
.op-toast--ok{border-left-color:var(--grn)} .op-toast--err{border-left-color:var(--red)}
.op-toast--warn{border-left-color:var(--yel)}
@media(prefers-reduced-motion:reduce){.op-toast{transition:opacity .2s}}

/* ---- op-chips (single-select segmented filter / tabs) ---- */
op-chips{display:block}
.op-chips{display:flex; gap:8px; flex-wrap:wrap}
.op-chip{font:600 .76rem 'JetBrains Mono',monospace; letter-spacing:.5px; text-transform:uppercase;
  background:var(--bg2); border:1px solid var(--card-b); color:var(--t2); padding:8px 14px;
  border-radius:20px; cursor:pointer; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s}
.op-chip:hover:not(:disabled){color:var(--t0); border-color:var(--line)}
.op-chip.is-on{border-color:var(--acc); color:var(--acc); background:rgba(var(--acc-rgb),.08)}
.op-chip:disabled{opacity:.45; cursor:not-allowed}
.op-chip:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* ---- op-detail (definition list) ---- */
.op-dl{display:grid; grid-template-columns:minmax(96px,auto) 1fr; gap:8px 18px; margin:0}
.op-dl dt{font:600 .72rem 'JetBrains Mono',monospace; letter-spacing:.5px; text-transform:uppercase;
  color:var(--t2); padding-top:2px}
.op-dl dd{margin:0; color:var(--t1); min-width:0; overflow-wrap:anywhere}
.op-dl__v--mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.82rem}
.op-dl__v--accent{color:var(--acc)}
.op-dl__v--wrap{white-space:pre-wrap}
.op-dl__muted{color:var(--t2)}
.op-detail__empty{color:var(--t2); font:500 .88rem 'JetBrains Mono',monospace; margin:0; padding:18px 0}
@media(max-width:560px){
  .op-dl{grid-template-columns:1fr; gap:2px 0}
  .op-dl dd{margin-bottom:10px}
}

/* ---- op-skeleton (extends the .op-skel shimmer above) ---- */
op-skeleton{display:block}
.op-skel--block{height:120px}
.op-skel--avatar{width:40px; height:40px; border-radius:50%; flex:0 0 40px}
.op-skel-row{display:flex; gap:12px; align-items:center}
.op-skel-row__body{flex:1; min-width:0}

/* =========================================================================
   Layout + form utilities (token-driven). These exist to REPLACE inline
   style="…" attributes so the page CSP can drop style-src 'unsafe-inline'
   (audit item A-4). New pages must use these, never inline styles.
   ========================================================================= */
.measure-760{max-width:760px}
.measure-58ch{max-width:58ch}
.mx-auto{margin-left:auto; margin-right:auto}
.tac{text-align:center}
.hero--tight{padding-bottom:6px}
.section--tight{padding-top:20px}
.title-gap{margin:18px 0 14px}

/* op-alert, accessible inline status banner. Hide with the `hidden` attribute
   (JS toggles el.hidden, never el.style) so no inline style is introduced. */
.op-alert{margin-bottom:14px; padding:12px 14px; border-radius:10px; font-size:.9rem; border:1px solid}
.op-alert[hidden]{display:none}
.op-alert--err{border-color:rgba(231,76,60,.4); background:rgba(231,76,60,.08); color:#ff9b8f}
.op-alert--ok{border-color:rgba(55,211,155,.3); background:rgba(55,211,155,.08); color:var(--grn)}

/* form scaffolding */
.op-card-pad{padding:28px}
.op-fieldrow{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media(max-width:560px){.op-fieldrow{grid-template-columns:1fr}}
.op-consent{display:flex; gap:10px; align-items:flex-start; margin-bottom:16px}
.op-consent input{width:auto; margin-top:5px}
.op-consent__label{text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--t2); font-family:inherit; font-size:.86rem}
.op-turnstile{margin-bottom:16px}
.op-form-note{margin-top:14px; text-align:center}

/* success panel shown in place of a submitted form. The heading is the focus
   target (tabindex=-1) so screen-reader users land on the confirmation. */
.op-formsuccess{text-align:center; padding:18px}
.op-formsuccess__mark{font-size:2rem; margin-bottom:10px; color:var(--acc); line-height:1}
.op-formsuccess h3{margin-bottom:8px; outline:none}
.op-formsuccess h3:focus-visible{outline:2px solid var(--acc); outline-offset:4px}
.op-formsuccess p{color:var(--t2)}

/* contact info cards */
.contact-cards{margin-top:30px}
.contact-card{text-align:center}
.contact-card h3{font-size:1rem}
.contact-card__v{font-size:.82rem}
.contact-card__v--accent{color:var(--acc)}
.contact-card__v--muted{color:var(--t2)}

/* ---- component-library demo page (A-4: replaces inline style=) ---- */
.pt-30{padding-top:30px}
.mb-10{margin-bottom:10px}
.mb-18{margin-bottom:18px}
.mt-40{margin-top:40px}
.t-2{color:var(--t2)}
.h2-demo{margin:40px 0 18px}
.card-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.card-row10{display:flex; gap:10px; flex-wrap:wrap}
.card-480{max-width:480px}
.card-560{max-width:560px}
.card-grid22{display:grid; gap:22px}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.modal-foot{display:flex; gap:10px; margin-top:20px; justify-content:flex-end}
.pad-18-4{padding:18px 4px}
.w-60{width:60%}
.w-75{width:75%}
.w-90{width:90%}