/* AU ONE STUDIO · base.css — reset, typography, focus, scrollbars, shared motion */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.lu{display:inline-block;vertical-align:middle;flex:none}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter var',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI Variable','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:
    radial-gradient(1200px 600px at 100% -10%,var(--wash-brand),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,var(--wash-info),transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv11";
  overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--link);text-decoration:none}
::selection{background:rgba(107,124,60,.22)}

/* keyboard focus is always visible; pointer focus never leaves a stuck ring.
   v0.9 a11y fix: the ring was box-shadow:var(--ring), which any component
   with its own box-shadow (.btn and every primary/ok/bad variant, .fab,
   .nav button.on, .toggle button.on, .segmented button.on) silently
   overrode — keyboard users had NO visible focus on Approve/Reject/modal
   buttons. outline is its own property; nothing overrides it. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* scrollbars: thin, quiet, only assertive on hover */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--muted2);opacity:.4;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}

/* numbers line up in tables, KPIs and money columns */
.dtable,.kpi .n,.rt-table,.mono{font-variant-numeric:tabular-nums}

/* ---- shared motion vocabulary (referenced across component files) ---- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes shine{to{transform:translateX(100%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Phase 4: exit counterparts to fadein/popin/slidein — modal()/closeModal() and
   toast() in app.js now animate out symmetrically with how they animate in,
   instead of a hard cut (modal) or an inline one-off style.opacity fade (toast). */
@keyframes fadeout{to{opacity:0}}
@keyframes popout{to{opacity:0;transform:scale(.97) translateY(4px)}}
@keyframes slideout{to{opacity:0;transform:translateX(20px)}}
@keyframes sheetdown{to{transform:translateY(100%)}}

/* view transition: re-applied by render() each navigation */
.view-anim{animation:rise var(--dur-3) var(--ease) both}