/* IC Troo color-layout-measure native styling */
/* Color - scheme aware */
:root{
    --fg-main: #DDD; --fg-soft: #AAA;
    --hl-main: oklch(82.8% 0.189 84.429); --hl-soft: oklch(50.8% 0.118 165.612);
    --bg-main: oklch(13% 0.028 261.692); --bg-soft: oklch(27.8% 0.033 256.848);
    /* 3 tone branding color */
    --br-fg: #90f; --br-bg: #60f; --br-mid: oklch(28.2% 0.091 267.935);
}
@media (prefers-color-scheme: light) {
    :root{
        --fg-main: #333; --fg-soft: #666;
        --hl-main: #60F; --hl-soft: #90F;
        --bg-main: #FFF; --bg-soft: #DDD;
        --br-fg: #ffb900; --br-bg: #007a55;--br-mid: #939;
    }
}
.fb-fg{color:var(--br-fg);} .fb-bg{color:var(--br-bg);} .fb-mid{color:var(--br-mid);}
.fg-main{color:var(--fg-main);} .fg-soft{color:var(--fg-soft);}
.hl-main{color:var(--hl-main);} .hl-soft{color:var(--hl-soft);}
.bg-main{background-color:var(--bg-main);} .bg-soft{background-color:var(--bg-soft);}
.bb-fg{background-color:var(--br-fg);} 
.bb-bg{background-color:var(--br-bg);} 
.bb-mid{background-color:var(--br-mid);}
.bb-hl-main{background-color:  color-mix(in oklab, var(--hl-main) 20%, transparent);}
.bb-hl-soft{background-color:  color-mix(in oklab, var(--hl-soft) 20%, transparent);}

body{background-color:var(--bg-main);color:var(--fg-main);fill:var(--bg-main);stroke: var(--fg-main);}
a{text-decoration: none;color:var(--hl-soft);&:hover{color:var(--hl-main);}}
button{
    color:var(--hl-soft);
    border:1px solid var(--hl-soft);padding:var(--gap-s) var(--gap-m);
    background-color:  color-mix(in oklab, var(--hl-soft) 20%, transparent);
    &:hover{color:  var(--bg-main);background-color:  var(--hl-soft);}
}
a:hover,button:hover{cursor:pointer}
/* Layout - no-margin and padding, full-page body-items grid placement:nav,header,main,footer */
*{margin: 0;padding: 0;box-sizing: border-box;}
ul,ol{list-style: none;}

.hidden{display:none !important;}
.grid { display: grid; }
.flex { display: flex; }
.flex-col{flex-direction: column;}
.flex-row{flex-direction: row;}
.flex-wrap{flex-wrap: wrap;}
.align-start {align-items: start;}
.align-center {align-items: center;}
.align-baseline {align-items: baseline;}
.justify-start{justify-content: start;}
.justify-end{justify-content: end;}
.justify-center{justify-content: center;}
.justify-around{justify-content: space-around;}
.justify-evenly{justify-content: space-evenly;}
.justify-between{justify-content: space-between;}

body.sys{
    width: 100dvw;height: 100dvh;
    display: grid;
    grid-template-areas: "clmnav" "clmhead" "clmmain" "clmfoot";
    grid-template-columns: 1fr;
    grid-template-rows:  auto auto 1fr auto;
    nav{grid-area:clmnav;}
    header{grid-area:clmhead;}
    main{grid-area:clmmain;}
    footer{grid-area:clmfoot;}
    nav,header,footer{display:flex;justify-content: space-between;}
}
/* The md: breakpoint */
@media (min-width: 768px) {
    body.sys{
        grid-template-areas: "clmnav clmhead" "clmnav clmmain" "clmfoot clmfoot";
        grid-template-columns: clamp(123px,235px,20vw) 1.618fr;
        grid-template-rows: auto 1fr auto;
        nav{flex-direction: column;}
    }
    .md\:show { display: inline !important; }
}
/* The lg: breakpoint */
@media (min-width: 1280px) {
    .lg\:hidden { display: none; }
}

/* Measurement - golden ratio increment */
:root{
    --gr-xs: 0.21rem; --gr-s: 0.33rem; --gr-m: 0.55rem; --gr-l: 0.88rem; --gr-xl: 1.43rem;
    --pix-xs:6px;--pix-s:9.7px;--pix-m:15.70px;--pix-l:25.41px;--pix-xl:41.12px;
}
.g-xs{gap:var(--gr-xs);} .g-s{gap:var(--gr-s);} .g-m{gap:var(--gr-m)} .g-l{gap:var(--gr-l)} .g-xl{gap:var(--gr-xl)}
.m-xs{gap:var(--gr-xs);} .m-s{margin:var(--gr-s);} .m-m{margin:var(--gr-m)} .m-l{margin:var(--gr-l)} .m-xl{margin:var(--gr-xl)}
.mt-xs{margin-top:var(--gr-xs);}.mb-xs{margin-bottom:var(--gr-xs);}
.mr-xs{margin-right:var(--gr-xs);}.ml-xs{margin-left:var(--gr-xs);}
.mx-xs{margin-left:var(--gr-xs);margin-right:var(--gr-xs);}
.my-xs{margin-top:var(--gr-xs);margin-bottom:var(--gr-xs);}
.mt-s{margin-top:var(--gr-s);}.mb-s{margin-bottom:var(--gr-s);}
.mr-s{margin-right:var(--gr-s);}.ml-s{margin-left:var(--gr-s);}
.mx-s{margin-left:var(--gr-s);margin-right:var(--gr-s);}
.my-s{margin-top:var(--gr-s);margin-bottom:var(--gr-s);}
.mt-m{margin-top:var(--gr-m);}.mb-m{margin-bottom:var(--gr-m);}
.mr-m{margin-right:var(--gr-m);}.ml-m{margin-left:var(--gr-m);}
.mx-m{margin-left:var(--gr-m);margin-right:var(--gr-m);}
.my-m{margin-top:var(--gr-m);margin-bottom:var(--gr-m);}
.mt-l{margin-top:var(--gr-l);}.mb-l{margin-bottom:var(--gr-l);}
.mr-l{margin-right:var(--gr-l);}.ml-l{margin-left:var(--gr-l);}
.mx-l{margin-left:var(--gr-l);margin-right:var(--gr-l);}
.my-l{margin-top:var(--gr-l);margin-bottom:var(--gr-l);}
.mt-xl{margin-top:var(--gr-xl);}.mb-xl{margin-bottom:var(--gr-xl);}
.mr-xl{margin-right:var(--gr-xl);}.ml-xl{margin-left:var(--gr-xl);}
.mx-xl{margin-left:var(--gr-xl);margin-right:var(--gr-xl);}
.my-xl{margin-top:var(--gr-xl);margin-bottom:var(--gr-xl);}
.p-xs{gap:var(--gr-xs);} .p-s{padding:var(--gr-s);} .p-m{padding:var(--gr-m)} .p-l{padding:var(--gr-l)} .p-xl{padding:var(--gr-xl)}
.pt-xs{padding-top:var(--gr-xs);}.pb-xs{padding-bottom:var(--gr-xs);}
.pr-xs{padding-right:var(--gr-xs)}.pl-xs{padding-left:var(--gr-xs)}
.px-xs{padding-left: var(--gr-xs);padding-right: var(--gr-xs);}
.py-xs{padding-top:var(--gr-xs);padding-bottom:var(--gr-xs);}
.pt-s{padding-top:var(--gr-s);}.pb-s{padding-bottom:var(--gr-s);}
.pr-s{padding-right:var(--gr-s)}.pl-s{padding-left:var(--gr-s)}
.px-s{padding-left: var(--gr-s);padding-right: var(--gr-s);}
.py-s{padding-top:var(--gr-s);padding-bottom:var(--gr-s);}
.pt-m{padding-top:var(--gr-m);}.pb-m{padding-bottom:var(--gr-m);}
.pr-m{padding-right:var(--gr-m)}.pl-m{padding-left:var(--gr-m)}
.px-m{padding-left: var(--gr-m);padding-right: var(--gr-m);}
.py-m{padding-top:var(--gr-m);padding-bottom:var(--gr-m);}
.pt-l{padding-top:var(--gr-l);}.pb-l{padding-bottom:var(--gr-l);}
.pr-l{padding-right:var(--gr-l)}.pl-l{padding-left:var(--gr-l)}
.px-l{padding-left: var(--gr-l);padding-right: var(--gr-l);}
.py-l{padding-top:var(--gr-l);padding-bottom:var(--gr-l);}
.pt-xl{padding-top:var(--gr-xl);}.pb-xl{padding-bottom:var(--gr-xl);}
.pr-xl{padding-right:var(--gr-xl)}.pl-xl{padding-left:var(--gr-xl)}
.px-xl{padding-left: var(--gr-xl);padding-right: var(--gr-xl);}
.py-xl{padding-top:var(--gr-xl);padding-bottom:var(--gr-xl);}