/* -- Clear user agent style -- */
html,body,div,span,h1,h2,h3,p,a,img,sup,ol,ul,li,button,article,aside,canvas,figure,footer,header,main,section { -webkit-appearance:initial; appearance:initial; box-sizing:border-box; margin-block:0; margin-inline:0; padding-block:0; padding-inline:0; border:0; font:inherit; font-size:100%; font-weight:inherit; vertical-align:baseline; }
body { line-height:1; }
article, aside, section, footer, header, main { display:block; }
ol, ul { list-style:none; }
* { box-sizing:border-box; }

:any-link { text-decoration:none; color:inherit; }
:focus-visible { -webkit-appearance:initial; appearance:initial; outline:none; }
::-webkit-scrollbar { background:transparent; height:0; width:0; } 

[data-svg] { contain:strict; contain-intrinsic-size:24px; flex:none; display:flex; justify-content:center; align-items:center; stroke:inherit; fill:inherit; }
[data-svg] > svg { max-width:100%; max-height:100%; position:absolute; stroke:inherit; fill:inherit; transition:fill 150ms var(--easing-emphasized); }
[data-svg]:empty { content-visibility:hidden; }
.divider { z-index:2; width:100%; height:1px; background-color:var(--outline-variant); margin:8px 0; }

html:not(.color-scheme-dark) [role=menu] > #into-dark-mode { display:flex!important; } 
html.color-scheme-dark [role=menu] > #into-light-mode { display:flex!important; }

html { background:var(--surface-bright); }
body { overscroll-behavior:contain; user-select:none; position:relative; inset:0; min-height:100dvh; height:100%; max-height:100lvh; min-width:360px; width:min(430px,100vw); max-width:100vw; margin-inline:auto; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch;  }
body { color:var(--on-surface); background-color:var(--surface-bright); font:var(--bodyL); letter-spacing:normal; transition:box-shadow 300ms var(--easing-legacy), background 200ms var(--easing-legacy), color 150ms var(--easing-legacy), opacity 150ms var(--easing-emphasized); }

body.standalone { touch-action:none; contain:content; height:100lvh; overflow:hidden; }
body.standalone > main { overscroll-behavior:contain; overflow-y:scroll; height:calc(100dvh - 56px); }

header { contain:content; flex:none; z-index:2; user-select:none; touch-action:pan-y; position:relative; inset:0 0 auto 0; width:min(100%,100vw); max-width:100vw; height:64px; max-height:64px; margin:0; font:var(--titleL); letter-spacing:var(--titleL-spacing); display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border:0 none; will-change:background-color,color,box-shadow; transition:background 200ms var(--easing-legacy), color 150ms var(--easing-legacy), box-shadow 150ms var(--easing-emphasized), z-index 10ms linear 350ms; }
main { contain:layout; position:relative; overflow-x:clip; z-index:1; flex:1; width:min(100%,100vw); max-width:100vw; padding:16px; margin:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; transition:background 200ms var(--easing-legacy), color 150ms var(--easing-legacy), opacity 150ms var(--easing-emphasized); }

footer { contain:content; flex:none; z-index:2; user-select:none; position:fixed; inset:auto 0 0 0; width:min(100%,100vw); max-width:100vw; height:64px; max-height:64px; margin:0; background-color:var(--surface-container); display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border:0 none; transition:background 200ms var(--easing-legacy), color 150ms var(--easing-legacy), box-shadow 150ms var(--easing-emphasized); }
footer > .tab { flex:1; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; column-gap:8px; }
footer > .tab > [data-svg] { flex:none; width:24px; }
footer > .tab > label { flex:1; height:20px; font:var(--titleS); }


/* ------------  buttons :: generic  ------------ */
button { position:relative; display:inline-flex; justify-content:center; align-items:center; flex:none; border:none; border-radius:20px; user-select:none; font:var(--labelL); letter-spacing:var(--labelL-spacing); padding:0 24px; margin:0; min-width:64px; width:fit-content; height:40px; white-space:nowrap; gap:8px; line-height:18px; }
button { background-color:var(--surface-container-low); color:var(--primary); fill:var(--primary); transition:fill 200ms var(--easing-emphasized), color 200ms var(--easing-emphasized), background-color 200ms var(--easing-emphasized), border-color 200ms var(--easing-emphasized); }
button:not(.FAB) > [data-svg] { margin-inline-start:-4px; height:18px; width:18px; }
button.text { background-color:transparent; color:var(--primary); padding-inline:16px; }
button.filled { background-color:var(--primary-container); color:var(--on-primary); fill:var(--on-primary); }
button.text-alt { background-color:transparent; color:var(--secondary); padding-inline:16px; }
button.outlined { background-color:transparent; background:transparent; color:var(--primary); fill:var(--primary); border:1px solid var(--outline); }
button.filled-tonal { background-color:var(--secondary-container); color:var(--primary); fill:var(--primary); border:1px solid var(--secondary-brightest); }


button.icon { width:40px; min-width:unset; height:40px; min-height:unset; padding:8px; border-radius:50%; fill:var(--on-surface-variant); background-color:transparent; border:0 none transparent; }
button.icon > svg { max-width:24px; max-height:24px; }

/* ------------  buttons :: FAB  ------------ */
button.FAB { flex:none; min-width:unset; gap:unset; width:56px; height:56px; padding:16px; border-radius:16px; box-shadow:var(--elevation-3-shadow); transition:max-width 250ms var(--easing-emphasized), top 200ms var(--easing-emphasized); }
button.FAB > [data-svg] { flex:none; fill:inherit; width:24px; height:24px; aspect-ratio:1; padding:0; margin:0; }
button.FAB:is(:active,:focus) { box-shadow:var(--elevation-1); }
button.FAB.extended { display:flex; /*min-width:80px;*/ max-width:calc(100vw - 32px); width:fit-content; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:8px; }
button.FAB.extended > :not([data-svg]) { flex:1; width:fit-content; padding:0; }

main ~ button.FAB:is(.right,.bottom) { position:fixed; z-index:3; top:calc(100dvh - 56px - 16px); right:16px; }
button.FAB.filled { box-shadow:inset 0 96px rgba(var(--on-primary-container-rgb),.08), var(--elevation-3-shadow); }

/* ------------  scrim :: generic  ------------ */
.scrim { position:fixed; contain:content; opacity:0; z-index:0; inset:0; backdrop-filter:saturate(0.32) brightness(0.44); transition:opacity 75ms var(--easing-emphasized); }
.scrim[aria-hidden=false] { opacity:1; z-index:4; }
.scrim[aria-hidden=false] ~ :is(header, footer, .FAB) { pointer-events:none; }
.scrim[aria-hidden=false] ~ main { pointer-events:none; opacity:.48; transition:opacity 150ms var(--easing-emphasized); }

/* ------------  navigation :: drawer modal  ------------ */
.nav-drawer { contain:content; position:absolute; z-index:1; top:0; bottom:0; left:0; width:min(360px, calc(100vw - 56px)); max-height:100dvh; transform:translateX(-100%); padding-inline:12px; border-radius:0 16px 16px 0; background:var(--surface-container-low); box-shadow:0 0; transition:transform 300ms var(--easing-emphasized), box-shadow 150ms var(--easing-emphasized); }
.scrim[aria-hidden=false] > .nav-drawer { transform:translateX(0%); box-shadow:var(--elevation-1-shadow); transition:transform 450ms var(--easing-emphasized-decelerate), box-shadow 150ms var(--easing-emphasized) 100ms; }
.nav-drawer > [role=menu] { min-width:280px; }
.nav-drawer > h2 { font:var(--titleS); letter-spacing:var(--titleS-spacing); color:var(--on-surface-variant); height:56px; line-height:56px; padding-inline:16px 24px; }
.nav-drawer :is(ul,ol,[role=list],[role=menu]) { user-select:none; width:100%; display:flex; flex-flow:column nowrap; flex:none; /*transition:opacity 350ms var(--easing-emphasized);*/ }
.nav-drawer :is(li,[role=listitem],[role=menuitem]) { user-select:none; position:relative; font:var(--labelL); letter-spacing:var(--labelL-spacing); fill:var(--on-surface-variant); color:var(--on-surface-variant); padding-inline:16px 24px; width:auto; height:56px; white-space:nowrap; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border-radius:28px; }
.nav-drawer :is(li,[role=listitem],[role=menuitem]).divider { flex:none; height:1px; display:block; }
.nav-drawer :is(li,[role=listitem],[role=menuitem]) > .icon:first-child { flex:none; height:24px; width:24px; fill:inherit; }
.nav-drawer :is(li,[role=listitem],[role=menuitem]) > .label { flex:1; padding-inline:12px 0; overflow-x:hidden; color:inherit; }
.nav-drawer :is(li,[role=listitem],[role=menuitem]):is(:hover,:active,:focus,[aria-current=true]) { background-color:var(--secondary-container); color:var(--on-secondary-container); fill:var(--on-secondary-container); }
.nav-drawer :is(li,[role=listitem],[role=menuitem])[aria-current=true] { pointer-events:none; }

/* ------------  top bar :: generic  ------------ */
header { background-color:var(--primary-container); color:var(--on-primary-container); fill:var(--inverse-primary-container); justify-content:space-between; }
header > button[data-svg].icon { flex:none; width:48px; height:48px; padding:12px; margin-inline:0; fill:inherit; transition:fill 150ms var(--easing-emphasized); }
header > button[data-svg].icon:first-child { margin-inline:4px; }
header > button[data-svg].icon:last-child { margin-inline:0 4px; }
header > :is(.title, h1) { flex:1; text-align:center; margin-inline:0 12px; font:var(--titleL); letter-spacing:var(--titleL-spacing); }

header.scrolling { background-color:var(--primary-container-elevated); color:var(--on-primary-container-elevated); fill:var(--on-primary-container-elevated); box-shadow:var(--elevation-1-shadow); transition:background 300ms var(--easing-legacy-decelerate), color 200ms var(--easing-emphasized), box-shadow 300ms var(--easing-emphasized); }
header:is([aria-hidden=true],[aria-expanded=false]) { height:0; }

/* ------------  dialog  ------------ */
.scrim[aria-hidden] > [role=alertdialog] { --dialog-height:fit-content; pointer-events:none; contain:content; flex:none; position:absolute; z-index:1; top:0; right:0; bottom:72px; left:0; min-width:280px; width:100%; max-width:min(560px, calc(100% - 48px)); max-height:fit-content; padding-inline:24px; padding-block:24px 16px; border-radius:28px; margin-inline:auto; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; transform-origin:top; }
.scrim[aria-hidden] > [role=alertdialog] { background-color:var(--surface-container-lowest); box-shadow:var(--elevation-3); color:var(--neutral24); fill:var(--neutral24); } 
.scrim[aria-hidden] > [role=alertdialog] .icon { flex:none; height:40px; width:40px; padding:8px; margin-block:-8px 0; fill:inherit; }
.scrim[aria-hidden] > [role=alertdialog] .headline { flex:none; width:fit-content; font:var(--headlineS); letter-spacing:var(--headlineS-spacing); text-align:center; color:inherit; }
.scrim[aria-hidden] > [role=alertdialog] .supportingText { flex:none; font:var(--bodyM); letter-spacing:var(--bodyM-spacing); margin-block:16px 0; color:inherit; }
.scrim[aria-hidden] > [role=alertdialog] .supportingText > div:not(:first-child) { margin-block:8px 0; }
.scrim[aria-hidden] > [role=alertdialog] .actions { flex:none; align-self:flex-end; margin-block:16px 0; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:16px; }
.scrim[aria-hidden] > [role=alertdialog] .actions > button { pointer-events:all; margin-block:8px 0; }
.scrim[aria-hidden] > [role=alertdialog] .actions > button.text:only-child { margin-block:0; }

.scrim[aria-hidden=true] > [role=alertdialog] { opacity:0; height:1px; padding-block:0; box-shadow:0 0; top:-100dvh; }
.scrim[aria-hidden=false] > [role=alertdialog] { opacity:1; top:calc( (100dvh - var(--dialog-height) - 72px) *.5 ); height:var(--dialog-height); transition:opacity 275ms var(--easing-emphasized-decelerate), top 375ms var(--easing-emphasized-decelerate), height 250ms var(--easing-emphasized) 125ms, padding 150ms var(--easing-emphasized), box-shadow 150ms var(--easing-emphasized); }

/* ------------  snackBar  ------------ */
aside.snackbar { contain:content; position:fixed; z-index:8; bottom:-48px; left:16px; right:16px; border-radius:4px; transform:translateY(0px); width:auto; max-width:560px; height:0; opacity:0; padding-inline:16px 8px; overflow:hidden; background:var(--inverse-surface); color:var(--on-inverse-surface); font:var(--bodyM); letter-spacing:var(--bodyM-spacing); line-height:48px; box-shadow:var(--elevation-3); will-change:transform, opacity, height; transition:transform 300ms var(--easing-emphasized), opacity 150ms var(--easing-emphasized), height 150ms var(--easing-emphasized); }
aside.snackbar:not([inert])[aria-expanded=true] { height:48px; opacity:1; transform:translateY(-96px); }
aside.snackbar[aria-expanded=false] { height:0; opacity:0; transform:translateY(0px); }

/* ------------  list & items list  ------------ */
:is(ul,ol)[role=list] { width:100%; padding-inline:16px 24px; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) { width:100%; min-height:56px; height:fit-content; max-height:88px; padding-block:8px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:16px; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > [data-svg]:is(.icon,:first-of-type) { user-select:none; flex:none; width:24px; height:24px; fill:var(--on-surface-variant); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > [data-svg]:is(.iconL,.avatar) { user-select:none; flex:none; width:40px; height:40px; fill:var(--on-surface-variant); background-color:var(--primary-container); border-radius:50%; padding:8px; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > img:first-of-type { user-select:none; flex:none; width:56px; height:56px; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > .contentTxt { user-select:none; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:flex-start; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > .contentTxt > div:is(:first-child, .headline) { flex:1; font:var(--bodyL); letter-spacing:var(--bodyL-spacing); color:var(--on-surface); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > .contentTxt > div:is(:last-child,.supportingText) { flex:1; font:var(--bodyM); letter-spacing:var(--bodyM-spacing); color:var(--on-surface-variant); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > .trailingText { user-select:none; flex:none; width:fit-content; font:var(--labelS); letter-spacing:var(--labelS-spacing); color:var(--on-surface-variant); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > [data-svg]:is(.trailingIco,:last-of-type) { user-select:none; flex:none; width:24px; height:24px; fill:var(--on-surface); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]) > [data-svg]:is(.trailingIco,:last-of-type):selected { fill:var(--primary); }

:is(ul,ol)[role=list] > :is(li,[role=listitem]):disabled { user-select:none; pointer-events:none; opacity:0.38; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]):hover > :is(.contentTxt > div:last-child,[data-svg].trailingIco,[data-svg]:last-of-type) { fill:var(--on-surface-variant); color:var(--on-surface-variant); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]):hover > .contentTxt > div:first-child { color:var(--on-surface); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]):is(:focus,:active) > :is(.contentTxt > div:last-child,[data-svg].trailingIco,[data-svg]:last-of-type) { fill:var(--on-surface-variant); color:var(--on-surface-variant); }
:is(ul,ol)[role=list] > :is(li,[role=listitem]):is(:focus,:active) > div:first-child { color:var(--on-surface); }

:is(ul,ol)[role=list] > :is(li,[role=listitem]).one-line { height:56px; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]).two-line { height:72px; }
:is(ul,ol)[role=list] > :is(li,[role=listitem]).three-line { height:88px; padding-block:12px; }

:is(ul,ol)[role=list] { padding-inline:8px; }