/* MIZO polish (Nov 2026): a thin layer of motion and finish on top of mizo.css and mizo-ux.css, nothing structural.
   Remove this file's <link> in src/app/layout.tsx to go back to the previous look. Respects reduced motion (mizo-ux.css). */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--glass:color-mix(in srgb,var(--color-bg) 72%,transparent)}

/* App feel: no grey tap flash on phones, crisper text, accent-coloured selection and checkboxes */
html{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scrollbar-gutter:stable}
::selection{background:color-mix(in srgb,var(--color-accent) 35%,transparent)}
input[type=checkbox],input[type=radio],progress{accent-color:var(--color-accent)}
button,a,.chip,.rail-item,.subnav-btn{touch-action:manipulation}

/* Thin, quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-text) 18%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-text) 16%,transparent);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--color-text) 28%,transparent)}

/* Pages settle in softly, and their sections follow one after another */
.page{animation:pagein .5s var(--ease-out) backwards}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page>*{animation:rise .55s var(--ease-out) backwards}
.page>*:nth-child(2){animation-delay:.04s}.page>*:nth-child(3){animation-delay:.08s}.page>*:nth-child(4){animation-delay:.12s}.page>*:nth-child(5){animation-delay:.16s}.page>*:nth-child(n+6){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* Surfaces: a hairline of light along the top edge, like glass catching the light */
.panel,.role-card,.loc-card,.emp-tile,.kind{box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--color-text) 5%,transparent)}
html[data-mode="light"] .panel{box-shadow:var(--shadow-sm),0 1px 2px rgba(20,22,40,.04),0 8px 24px -12px rgba(20,22,40,.08)}

/* Things you can press respond: a quick lift on hover, a small press-in when tapped */
.btn{transition:background .18s,color .18s,border-color .18s,box-shadow .2s,transform .18s var(--ease-spring)}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:.06s}
.btn-primary{box-shadow:0 1px 0 color-mix(in srgb,#fff 18%,transparent) inset,0 6px 18px -8px color-mix(in srgb,var(--color-accent) 70%,transparent)}
.btn-primary:hover:not(:disabled){box-shadow:0 1px 0 color-mix(in srgb,#fff 22%,transparent) inset,0 10px 24px -10px color-mix(in srgb,var(--color-accent) 85%,transparent)}
.btn:disabled{transition:none}
.chip,.setup-steps button,.more-item,.integ-item{transition:border-color .18s,background .18s,color .18s,transform .18s var(--ease-spring)}
.chip:active,.setup-steps button:active,.more-item:active{transform:scale(.96)}
.metric,.loc-card,.emp-tile,.kind,.role-card{transition:box-shadow .25s var(--ease-out),transform .25s var(--ease-out)}
.metric:hover,.loc-card:hover,.emp-tile:hover,.kind:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.metric:active,.loc-card:active,.emp-tile:active,.kind:active{transform:translateY(0) scale(.99);transition-duration:.08s}

/* Navigation: the active marker grows in, and icons nudge when chosen */
.rail-item{transition:color .2s,background .2s,transform .18s var(--ease-spring)}
.rail-item:active{transform:scale(.94)}
.rail-item i{transition:transform .3s var(--ease-spring)}
.rail-item.on i{transform:translateY(-1px) scale(1.06)}
.rail-item.on::before{animation:markin .35s var(--ease-out)}
@keyframes markin{from{transform:scaleY(0);opacity:0}}
.subnav-btn{transition:color .2s,background .2s}
.subnav-btn.on::after{animation:tabin .35s var(--ease-out);transform-origin:center}
@keyframes tabin{from{transform:scaleX(.2);opacity:0}}

/* Fields: a soft accent glow when you type in them */
.input{transition:border-color .18s,box-shadow .18s,background .18s}
.input:focus,.input:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 22%,transparent);outline:none}
:focus-visible{outline-offset:3px;border-radius:var(--radius-sm)}

/* Tables: rows highlight smoothly */
.mtable tbody tr{transition:background .2s}

/* Pop-ups and sheets: frosted backdrop and a gentle spring */
.mdl-backdrop{backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);animation:fade .25s var(--ease-out)}
.mdl{animation:pop .38s var(--ease-spring)}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}}
.drawer{transition-timing-function:var(--ease-out)!important}
.more-sheet{animation:sheetin .38s var(--ease-out)}
@keyframes sheetin{from{transform:translateY(100%)}}

/* Toasts: glass, and they spring up */
.toast{background:color-mix(in srgb,var(--color-surface) 82%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transition:opacity .3s var(--ease-out),transform .45s var(--ease-spring);border-radius:999px;padding:.75rem 1.2rem}

/* Top bar: a touch more glass */
.topbar{background:var(--glass);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}

/* Loading placeholders shimmer a little more smoothly */
.skel i{animation-timing-function:ease-in-out}

/* Phones: a frosted tab bar like a native app, with a pill behind the chosen tab */
@media (max-width:760px){
.rail{background:color-mix(in srgb,var(--color-bg) 78%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-top-color:color-mix(in srgb,var(--color-text) 7%,transparent)}
.rail-item.on{background:none}
.rail-item.on i{transform:none}
.rail-item.on::before{left:12%;right:12%;top:.25rem;bottom:auto;height:1.85rem;width:auto;border-radius:1.1rem;background:color-mix(in srgb,var(--color-accent) 18%,transparent);box-shadow:none;z-index:-1;animation:pillin .35s var(--ease-spring)}
@keyframes pillin{from{transform:scale(.6);opacity:0}}
.content{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
.btn{min-height:2.75rem}
}

/* Review fixes (Nov 2026): things that overflowed or crowded on a phone */
@media (max-width:760px){
.chip{white-space:normal;text-align:left;flex:0 1 auto;max-width:100%}
.dialog-actions{flex-wrap:wrap}
.sim-cmp{flex-wrap:wrap;row-gap:.2rem}
.toast{max-width:calc(100vw - 2rem);width:max-content;bottom:calc(5.25rem + env(safe-area-inset-bottom));border-radius:var(--radius-lg)}
}