/* Shared website/portal colour vocabulary. Functional typography, company branding,
   status colours and the orange ADMIN identity remain distinct. */
:root{--visual-blue:#e2ecfc;--visual-violet:#eee7fa;--visual-warm:#fff0e6;--visual-edge:#c5d5ed;--visual-header:#edf3fc;--visual-shadow:0 4px 16px #1c3f6c0a;--paper:#edf2fa;--radius-md:12px}
:root[data-theme=dark]{--visual-blue:#1c304c;--visual-violet:#2c2744;--visual-warm:#392c25;--visual-edge:#405572;--visual-header:#1c2a40;--visual-shadow:0 4px 16px #00000026;--paper:#0f1726}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--visual-blue:#1c304c;--visual-violet:#2c2744;--visual-warm:#392c25;--visual-edge:#405572;--visual-header:#1c2a40;--visual-shadow:0 4px 16px #00000026;--paper:#0f1726}}
.app .side{background:linear-gradient(165deg,var(--night),color-mix(in srgb,var(--night) 80%,#244a7c));border-right:1px solid #385273}
.app .top{background:var(--visual-header);border-bottom-color:var(--visual-edge)}
.app .panel,.app .chart,.ob-card,.it-card,.signin .box,.la-card,.ans-card,.record-entry,.uploads-detail,.guided-import{border-color:var(--visual-edge);border-radius:12px;box-shadow:var(--visual-shadow)}
.panel>header,.ob-card .ob-qhead,.drawer .dhead,.record-entry .dhead,.uploads-detail .dhead{background:var(--visual-header);background:color-mix(in srgb,var(--brand) 11%,var(--surface));border-bottom:1px solid var(--visual-edge);border-radius:11px 11px 0 0}
.ob-card .ob-qhead{padding-bottom:20px}.ob-card .ob-qfoot,.drawer .dfoot,.record-entry .dfoot{background:var(--visual-header)}
:is(.app,.snapshot) .tile,.reports-totals>div,.inspection-counts>div{background:var(--visual-blue);border-color:var(--visual-edge);box-shadow:var(--visual-shadow)}
:is(.app,.snapshot) .tile:nth-child(3n+2),.reports-totals>div:nth-child(3n+2),.inspection-counts>div:nth-child(3n+2){background:var(--visual-violet)}
:is(.app,.snapshot) .tile:nth-child(3n),.reports-totals>div:nth-child(3n),.inspection-counts>div:nth-child(3n){background:var(--visual-warm)}
:is(.app,.snapshot) .tile:hover{border-color:var(--brand)}:is(.app,.snapshot) .tile[aria-pressed=true]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
:is(.app,.snapshot) .charts .chart{background:var(--visual-blue);border-color:var(--visual-edge)}:is(.app,.snapshot) .charts .chart:nth-child(2n){background:var(--visual-violet)}
.panel th,.reports-page th,.uploads-page th{background:var(--visual-header)}
.panel td.empty{background:var(--visual-header)}
.ob-shell .ob-hstep{background:var(--visual-blue);border-color:var(--visual-edge)}.ob-shell .ob-hstep:nth-child(2){background:var(--visual-violet)}.ob-shell .ob-hstep:nth-child(3){background:var(--visual-warm)}
.ob-shell .ob-note:not(.warn):not(.good){background:var(--visual-blue)}.ob-steps li.cur button{background:var(--visual-blue)}
.ob-pv .pvbox,.ob-pv .ob-preview,.answerbox{background:var(--visual-header);border-color:var(--visual-edge)}
.launch-account{background:radial-gradient(ellipse at 20% 10%,#dce8fa,transparent 65%),#f0f4fb}.launch-account .la-card{border:1px solid #bdcfe8;border-top:5px solid #1268bd;background:#fff;box-shadow:0 12px 35px #1c3f6c0d}.launch-account .la-private{background:#e2ecfc;color:#315777}
.signin{background:var(--paper)}.signin .box{border-top:5px solid var(--brand)}
.ans-card{border-top:5px solid var(--brand)}
.it-card{border-top:4px solid var(--brand)}
@media(prefers-reduced-motion:reduce){.app .side{background:var(--night)}}
/* These components insert their base styles at render time; keep the shared finish explicit. */
.ob-shell .ob-card{border-color:var(--visual-edge);box-shadow:var(--visual-shadow)}
.ans .ans-card{border-color:var(--visual-edge);border-top:5px solid var(--brand);border-radius:12px;box-shadow:var(--visual-shadow)}
/* Motion follows the same restrained rhythm across marketing and operational screens. */
:root{--motion-fast:160ms;--motion-enter:420ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
@keyframes okairo-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  .app :is(button,a),.ob-shell :is(button,a),.signin button,.launch-account button{transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
  .app .main>.page,.ob-card,.signin .box,.la-card,.ans-card,.it-card{animation:okairo-enter var(--motion-enter) var(--motion-ease) both}
  .drawer,.record-entry{animation:okairo-enter 180ms var(--motion-ease) both}
}
@media(prefers-reduced-motion:reduce){.app *,.ob-shell *,.signin *,.launch-account *,.ans *,.it-card{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Guide between setup stages; typing and failed validation never restart a scene. */
.ob-shell{overflow-x:clip}
@keyframes okairo-setup-forward{from{opacity:0;translate:38px 0}to{opacity:1;translate:0 0}}
@keyframes okairo-setup-back{from{opacity:0;translate:-38px 0}to{opacity:1;translate:0 0}}
@keyframes okairo-step-current{from{scale:.78;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 15%,transparent)}to{scale:1;box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:no-preference){
 .ob-shell .ob-card[data-direction=forward]{animation:okairo-setup-forward 480ms var(--motion-ease) both}
 .ob-shell .ob-card[data-direction=back]{animation:okairo-setup-back 480ms var(--motion-ease) both}
 .ob-shell .ob-progress i{transition:width 550ms var(--motion-ease)}
 .ob-shell .ob-steps li.cur .n{animation:okairo-step-current 550ms var(--motion-ease) both}
}