/* OpenExpertsAI public site. Rules from the approved design (Main.dc.html),
   plus the few additions a static page needs (marked "site:"). */

/* site: page base, taken from the design's outer wrapper */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#F4F5F1;font-family:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;color:#16233A;line-height:1.55;font-size:16px}
/* site: many elements carry an inline display value, so [hidden] must win over it */
[hidden]{display:none !important}

/* design */
a{color:#23396B}a:hover{color:#16233A}
a:focus-visible,button:focus-visible{outline:2px solid #23396B;outline-offset:3px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #23396B;outline-offset:1px;border-color:#23396B}
.uc-tab{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid #C9CFC6;background:#FFFFFF;color:#16233A;font:600 13px 'Be Vietnam Pro',system-ui,sans-serif;cursor:pointer}
.uc-tab:hover{border-color:#16233A}
.uc-tab[aria-pressed="true"]{background:#16233A;border-color:#16233A;color:#FFFFFF}
/* site: keep the pill shape while focused (the generic focus rule above would square it) */
.uc-tab:focus-visible{border-radius:999px}
.oe-flap{min-height:40px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:#AEB8CC;font:500 12px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.oe-flap:hover{color:#FFFFFF}
.oe-flap[aria-pressed="true"]{color:#16233A;background:linear-gradient(#F4F5F1 0 49%,#CDD2CA 49% 51%,#F4F5F1 51% 100%)}
.oe-flap:focus-visible{outline:2px solid #F4F5F1;outline-offset:2px}
.oe-roll{transform-origin:50% 0;animation:oe-roll .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes oe-roll{from{transform:perspective(700px) rotateX(-70deg) translateY(.2em);opacity:0}to{transform:none;opacity:1}}
.oe-redact{position:relative;display:inline-block;padding:0 .14em;margin-left:-.06em;border-radius:.08em}
.oe-redact::after{content:"";position:absolute;inset:0;background:#16233A;border-radius:.08em;transform-origin:100% 50%;animation:oe-scrape .8s cubic-bezier(.7,0,.3,1) 1.2s forwards}
@keyframes oe-scrape{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.oe-roll{animation:none}.oe-redact::after{animation:none;transform:scaleX(0)}}
.oe-cite{animation:oe-pulse 1.4s ease-out .3s 2}
@keyframes oe-pulse{0%{box-shadow:0 0 0 0 rgba(179,38,30,.45)}100%{box-shadow:0 0 0 10px rgba(179,38,30,0)}}
mark.oe-mark{background-color:transparent;background-image:linear-gradient(#FBE3DF,#FBE3DF);background-repeat:no-repeat;background-size:0% 100%;animation:oe-draw .8s ease-out var(--d,.9s) forwards}
@keyframes oe-draw{to{background-size:100% 100%}}
.oe-black{position:relative;white-space:nowrap}
.oe-black::after{content:"";position:absolute;inset:-1px -2px;background:#16233A;border-radius:2px;transform:scaleX(0);transform-origin:0 50%;animation:oe-cover .45s ease-in var(--d,.5s) forwards}
@keyframes oe-cover{to{transform:scaleX(1)}}
.oe-appear{opacity:0;animation:oe-fade .4s ease-out var(--d,2s) forwards}
@keyframes oe-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.oe-cite{animation:none}mark.oe-mark{animation:none;background-size:100% 100%}.oe-black::after{animation:none;transform:scaleX(1)}.oe-appear{animation:none;opacity:1}}

/* site: VI | EN switch, now two links with the design's pill look */
.oe-lang a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:40px;padding:0 4px;text-decoration:none;background:transparent;color:#44506A;font:600 13px 'Be Vietnam Pro',system-ui,sans-serif}
.oe-lang a:hover{color:#16233A}
.oe-lang a[aria-current="page"],.oe-lang a[aria-current="page"]:hover{background:#16233A;color:#FFFFFF}
/* the pill clips overflow, so draw the focus ring inside each link */
.oe-lang a:focus-visible{outline:2px solid #23396B;outline-offset:-4px;border-radius:0}
.oe-lang a[aria-current="page"]:focus-visible{outline-color:#FFFFFF}

/* site: demo form states */
.oe-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.oe-form-alert{margin:0;padding:10px 12px;border-radius:10px;background:#FBE3DF;color:#8E1E17;font-size:14px;font-weight:500;line-height:1.5}
[data-oe-demo] [aria-invalid="true"]{border-color:#B3261E !important}
[data-oe-demo] button[type="submit"]:disabled{opacity:.6;cursor:progress}
.oe-thanks:focus{outline:none}