@import "./forms.css";
/* AURUM control contract. Single source for Studio and demo controls.
   The named layer deliberately owns visual properties with !important, so legacy
   page selectors cannot override them. Layout, dimensions and visibility stay local. */
@layer aurum-controls {
:where(html[data-au-controls],.onboarding-lab){
 --au-control-gold:var(--au-gold,#d7bd8c);--au-control-copy:var(--au-light-text,#f3f0e9);
 --au-control-surface:rgba(25,28,31,.88);--au-control-hover:rgba(215,189,140,.12);
 --au-control-edge:rgba(215,189,140,.35);--au-control-selected:rgba(215,189,140,.18);
 --au-popover-surface:rgba(25,28,31,.94);--au-badge-opacity:.56;
}
/* Shared AURUM backend controls — Studio, Portfolio and React Lab. */
:where(html[data-au-controls],.onboarding-lab),:where(html[data-au-controls],.onboarding-lab) *{scrollbar-width:thin!important;scrollbar-color:#bfa572 transparent!important}
:where(html[data-au-controls],.onboarding-lab) ::-webkit-scrollbar{width:5px;height:5px}
:where(html[data-au-controls],.onboarding-lab) ::-webkit-scrollbar-track{background:transparent}
:where(html[data-au-controls],.onboarding-lab) ::-webkit-scrollbar-thumb{background:#bfa572;border-radius:0}
:where(html[data-au-controls],.onboarding-lab) ::-webkit-scrollbar-thumb:hover{background:#d7bd8c}
:where(html[data-au-controls],.onboarding-lab) select{font-weight:400!important;padding-inline:14px 44px!important;color:var(--au-light-text,#f3f0e9);cursor:pointer}
/* Native form semantics, validation and keyboard interaction are retained. */
@supports (appearance:base-select){
 :where(html[data-au-controls],.onboarding-lab) select,
 :where(html[data-au-controls],.onboarding-lab) select::picker(select){appearance:base-select}
 :where(html[data-au-controls],.onboarding-lab) select{background-image:none!important;display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding-right:18px!important;border-radius:0!important}
 :where(html[data-au-controls],.onboarding-lab) select::picker-icon{color:#d7bd8c;margin-inline-start:auto;position:static;transition:rotate .2s;content:'⌄';font-size:16px;font-weight:400;line-height:1}
 :where(html[data-au-controls],.onboarding-lab) select:open::picker-icon{rotate:180deg}
 :where(html[data-au-controls],.onboarding-lab) select::picker(select){background:#191c1ff5;color:var(--au-light-text,#f3f0e9);border:1px solid #d7bd8c66;border-radius:0;padding:6px;box-shadow:0 16px 40px #0005;max-height:min(360px,55dvh);overflow:auto;scrollbar-width:thin!important;scrollbar-color:#bfa572 transparent!important;font:inherit}
 :where(html[data-au-controls],.onboarding-lab) select option{padding:12px 14px;min-height:44px;background:transparent;color:var(--au-light-muted,#b8bfbd);font-size:12px;font-weight:400!important;border:0;border-inline-start:2px solid transparent;cursor:pointer;gap:12px}
 :where(html[data-au-controls],.onboarding-lab) select option:checked{background:#d7bd8c0d;color:#e8cea0;border-inline-start-color:#d7bd8c;font-weight:400!important}
 :where(html[data-au-controls],.onboarding-lab) select option:is(:hover,:focus-visible){background:#d7bd8c17;color:#f0ddbb;outline:none}
 :where(html[data-au-controls],.onboarding-lab) select option::checkmark{color:#d7bd8c;font-weight:400;font-size:11px}
}
@media(prefers-reduced-motion:reduce){:where(html[data-au-controls],.onboarding-lab) select::picker-icon{transition:none}}


/* Chromium/WebKit: exact 3px gold rail; Firefox retains native thin fallback. */
@supports selector(::-webkit-scrollbar){
 :where(html[data-au-controls],.onboarding-lab),:where(html[data-au-controls],.onboarding-lab) *{scrollbar-width:auto!important;scrollbar-color:auto!important;}
 :where(html[data-au-controls],.onboarding-lab)::-webkit-scrollbar,
 :where(html[data-au-controls],.onboarding-lab) ::-webkit-scrollbar{width:3px!important;height:3px!important;}
}


:where(html[data-au-controls],.onboarding-lab) :is(button:not([data-studio-view]),a.button,[role=button],input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
 font-family:var(--au-font-ui,Inter,Arial,sans-serif)!important;
 font-weight:400!important;border-radius:0!important;
}
:where(html[data-au-controls],.onboarding-lab) :is(button:not([data-studio-view]),a.button,[role=button]){
 color:var(--au-control-copy)!important;border-color:var(--au-control-edge)!important;
 background-color:var(--au-control-surface)!important;
 transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease!important;
}
:where(html[data-au-controls],.onboarding-lab) :is(button:not([data-studio-view]),a.button,[role=button]):not(:disabled):not([aria-disabled=true]):hover{
 background-color:var(--au-control-hover)!important;color:var(--au-control-gold)!important;border-color:var(--au-control-gold)!important;
}
:where(html[data-au-controls],.onboarding-lab) :is(button:not([data-studio-view]),a.button,[role=button]):is([aria-pressed=true],[aria-selected=true],[aria-current=true],.active,.is-active){
 background-color:var(--au-control-selected)!important;background-image:none!important;color:var(--au-control-gold)!important;border-color:var(--au-control-gold)!important;
}
:where(html[data-au-controls],.onboarding-lab) :is(button:not([data-studio-view]),a.button,[role=button]):is(:disabled,[aria-disabled=true]){opacity:.45!important;cursor:not-allowed!important;box-shadow:none!important}
:where(html[data-au-controls],.onboarding-lab) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
 background-color:var(--au-control-surface)!important;color:var(--au-control-copy)!important;border:1px solid var(--au-control-edge)!important;
 border-radius:var(--au-form-radius,7px)!important; font-size:14px!important; line-height:1.6!important;
}
:where(html[data-au-controls],.onboarding-lab) :is(input,textarea)::placeholder{color:#aeb6b3!important;opacity:1}
:where(html[data-au-controls],.onboarding-lab) :is(input,textarea,select)[aria-invalid=true]{border-color:#d99786!important}
:where(html[data-au-controls],.onboarding-lab) :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--au-control-gold)}
:where(html[data-au-controls],.onboarding-lab) :is(button,a,summary,input,select,textarea,[role=button]):focus-visible{outline:1px solid var(--au-form-focus,#d7bd8cb3)!important;outline-offset:2px!important}
:where(html[data-au-controls],.onboarding-lab) details>summary{font-weight:400!important;transition:color .22s,background-color .22s}
:where(html[data-au-controls],.onboarding-lab) details[open]>summary{font-weight:500!important;color:var(--au-control-gold)!important}
:where(html[data-au-controls],.onboarding-lab) [data-au-component=popover]{
 background:var(--au-popover-surface)!important;border:1px solid var(--au-control-edge)!important;border-radius:0!important;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 20px 48px #0005;
}
/* Custom language/listbox menus share the native picker material. */
:where(html[data-au-controls],.onboarding-lab) :is([role=menu],[role=listbox]){background:#191c1ff5!important;color:var(--au-control-copy)!important;border:1px solid var(--au-control-edge)!important;border-radius:0!important}
:where(html[data-au-controls],.onboarding-lab) :is([role=menuitem],[role=option]){font-weight:400!important}
:where(html[data-au-controls],.onboarding-lab) :is([role=menuitem],[role=option]):is(:hover,[aria-selected=true]){background:var(--au-control-hover)!important;color:var(--au-control-gold)!important}
@media(prefers-reduced-motion:reduce){:where(html[data-au-controls],.onboarding-lab) :is(button,a.button,summary,select){transition:none!important}}
}