*, *::before, *::after {
    box-sizing: border-box; /* FIXME: need this to prevent white vertical bar */
}

html,body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    min-height: 100vh;
    overflow-x: auto;
}

body, aux-body {
    font-family: Adobe Barlow, Lucida, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    outline: none;
}

/* To fix issue: click data fields, scroll-back-to-left, touch+hold shells (with menu guide on) */
html, body, div, p, span {
   -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
/* End fix */

/****/

__html {
  /* 
    Mobile Target:  14px base size at a 375px wide screen
    Desktop Target: 18px base size at a 1440px wide screen
    
    The Math: 12.6px + 0.38vw creates a smooth incline between 375px and 1440px.
    Using 'rem' in the preferred value ensures browser zoom still works for accessibility.
  */
    font-size: clamp(14px, 0.7875rem + 0.38vw, 18px);
}

/* ==========================================================================

SCALABLE LINE-HEIGHTS (The "Why")
   ==========================================================================
   As text gets smaller on mobile, it needs slightly MORE line-height to stay
   readable. As it gets huge on desktop, it needs LESS line-height so the
   sentences don't look disconnected.

   Using unitless numbers (like 1.2) automatically scales with the font size.
*/
__body {
  __font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5; /* Default body line-height */
  __color: #333;
}

__h1, __h2, __h3 {
  /* Headings get tighter line heights because they are larger */
  line-height: 1.2;
  margin-top: 0;
}

/* ==========================================================================

PROPORTIONAL TYPOGRAPHY
   ========================================================================== */
__h1 { font-size: 2.5rem; }   /* Scales fluidly: ~35px on mobile to ~45px on desktop */
__h2 { font-size: 1.875rem; } /* Scales fluidly: ~26px on mobile to ~34px on desktop */
__p  { font-size: 1rem; }     /* Matches the exact fluid root size */

/* ==========================================================================

FLUID MARGINS & VERTICAL RHYTHM
   ========================================================================== 
   By defining your margins and padding in 'rem' units, your layout spacing 
   grows and shrinks right along with your text size. This keeps your vertical
   rhythm perfect across all screen sizes automatically.
*/
.__article-content > * + * {
    /* Elements following elements get a top-margin that scales fluidly */
    margin-top: 1.25rem; 
}

__h1, __h2 {
    /* Give headers a bit more breathing room above them */
    margin-bottom: 0.5rem;
}

/****/

.viewport-wrapper {
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0px; 
}
.page-layer {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    width: max-content;
    min-width: 100vw;
    padding: 0px;
}

.header {
    display: grid;
    grid-template-columns: 100vw 1fr;
    position: sticky;
  __top: 0;
    left: 0;
    z-index: 100;
    padding: 0px;
    height: 128px;
    transition: height 0.3s ease;
}
.header.shrunk {
    height: 60px;
}
.main {
    padding-top: 0px;
    padding: 20px;
}
.footer {
    display: grid;
    grid-template-columns: 100vw 1fr;
    position: sticky;
    left: 0;
    padding: 0px;
}
.footer {
    text-align: center;
}

.aux-small-print { font-family: Adobe Barlow, Lucida, sans-serif; font-size: 12px; font-weight: 300; }

input, .aux-input {
    box-sizing: border-box;
    border-radius: .25rem;
  __border-radius: 2px;
    border: 1px solid #000;
	font-family: IBM Plex Mono, Lucida Console, monospace;
    font-size: 1rem;
    font-weight: bold;
    vertical-align: middle;
}
input[type="checkbox"], .aux-input[type="checkbox"] { /* <input type=(checkbox|radio|range) or <progress */
    accent-color: #468105;
}
/*input[type="text"]:focus, input[type="text"]:focus-visible, .aux-input[type="text"]:focus, .aux-input[type="text"]:focus-visbile {*/
input[type="text"]:focus, input[type="text"]:focus-visible, .aux-input[type="text"]:focus, .aux-input[type="text"]:focus-visbile {
    outline: 2px solid #468105;
    outline-offset: 0px;
}

.aux-input-wide, .aux-select-wide {
    box-sizing: border-box;
    border-radius: .25rem;
  __border-radius: 2px;
    border: 1px solid #000;
    width: 100%; /* Or any uniform width like 250px */
    padding: 2px;
}
.aux-input-wide[type="text"]:focus, .aux-input-wide[type="text"]:focus-visible {
  __outline: 2px solid #468105;
  __outline-offset: 0px;
}

/* https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box */
__select, .__aux-select {
    width: 100%;
  __text-align-last: center;
  __padding-left: 29px;
    font-family: IBM Plex Sans, Lucida, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
    border-radius: .25rem;
  __border-radius: 2px;
    border: 1px solid #000;
    width: 100%; /* Or any uniform width like 250px */
    padding: 2px;
/*border: 1px solid #ccc;*/
}
select, select:disabled, .aux-select, .aux-select:disabled {
   -webkit-appearance: none;
   -moz-appearance: none;
    appearance: none;
  __text-align-last: center;
  __padding-left: 29px;
    font-family: IBM Plex Sans, Lucida, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 4px 35px 8px 5px; /* Top, Right, Bottom, Left */
    
    border: 1px solid #000;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23468105' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Positions arrow on the right */
    background-size: 16px;
    cursor: pointer;
    
  __box-sizing: border-box;
    width: 100%;
}
select:focus, select:focus-visible, .aux-select:focus, .aux-select:focus-visible {
    outline: 2px solid #468105;
    outline-offset: 0px;
}
.aux-select-wide:focus, .aux-select-wide:focus-visible {
    outline: 2px solid #468105;
    outline-offset: 0px;
}

/* https://stackoverflow.com/questions/5235142/how-do-i-disable-the-resizable-property-of-a-textarea */
textarea, .aux-textarea { resize: none; } /* font-family: IBM Plex Sans, Lucida, sans-serif; font-size: 1rem; font-weight: bold; outline: none; } */

.align-left {
    text-align: left; /* Default behavior in left-to-right written languages, but explicit */
}
/*.align-left {
    text-align: start; *//* Aligns to the starting edge of the text direction (left in LTR) *//*
}*/

a, .aux-a {
    font-family: IBM Plex Sans, Lucida, sans-serif;
    color: #468105;
}
a, .aux-inverse-a {
    font-family: IBM Plex Sans, Lucida, sans-serif;
    color: white;
}
a, .aux-a:link, a,.aux-a:visited {
    text-decoration: none;
    white-space: nowrap;
}
a, .aux-a:hover, a:active { text-decoration: underline; }
a, .aux-a:focus { outline: none; text-decoration: underline; }

div, .aux-div {
    padding: 2px;
    vertical-align: middle;
}

td, .aux-td {
    display: table-cell;
}
tr, .aux-tr {
    display: table-row;
}
table, .aux-table {
    display: table;
    padding: 2px;
}

.callout-container {
    position: relative;
    display: inline-block;
}

.popup-callout {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background-color: #1e293b; /* Sleek dark slate */
    color: #ffffff;
    text-align: left;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box; 
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 100%; 
    transform: translateY(-50%) translateX(15px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* --- DEFAULT: LEFT-POINTING ARROW --- */
.popup-callout::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent #1e293b transparent transparent;
}

/* --- FALLBACK STATE: POSITIONED ABOVE --- */
/* Applied dynamically via JavaScript if it would overflow the screen */
.popup-callout.fallback-top {
    top: auto;
    left: 50%;
    bottom: 130%;
    transform: translateX(-50%) translateY(0);
}

/* Flip arrow to point down for fallback state */
.popup-callout.fallback-top::after {
    top: 100%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    border-color: #1e293b transparent transparent transparent;
}

/* --- ACTIVE/VISIBILITY VISUAL STATES --- */
/* Handles gentle slide-in micro-interactions */
.popup-callout.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(10px);
}

.popup-callout.fallback-top.active {
    transform: translateX(-50%) translateY(-5px);
}

/* https://css-tricks.com/snippets/css/text-rotation/ */
.rotate {
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    white-space: nowrap;
    transform-origin: 0 0;
    transform: rotate(270deg);
}
.container {
    display: grid;
}

.content, .overlay {
    grid-area: 1 / 1;
}
.NOT-IN-USE-button {
    background-color: white;
    color: #468105;
    padding: 5px 10px;
    border: 2px solid #468105;
    outline: 2px solid white;
    outline-offset: 0px;
  /*cursor: pointer;*/
  /*text-align: center;*/
    font-family: IBM Plex Sans, Lucida, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}
.NOT-IN-USE-button-focused {
    background-color: #468105;
    color: white;
    padding: 5px 10px;
    border: 2px solid white;
    outline: 2px solid #468105;
    outline-offset: 0px;
  /*cursor: pointer;*/
  /*text-align: center;*/
    font-family: IBM Plex Sans, Lucida, sans-serif;
  __font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}
.aux-button {
    background-color: #FFFFFF;
    border: 1px solid rgb(209,213,219);
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "IBM Plex Sans","Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;/*.875rem;*/
    font-weight: 600;
    line-height: 1.25rem;
    padding: .75rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
   -webkit-user-select: none;
    touch-action: manipulation;
}
.aux-button:hover {
    background-color: rgb(249,250,251);
    outline: 2px solid #468105;/**/
  __outline-offset: 0px;
}
.aux-button:focus,.aux-button:focus-visible {
    outline: 2px solid #468105;
    outline-offset: 0px;
}
/*
.table {
    display: table;
}*//*
.table-row {
    display: table-row;
}*//*
.table-cell {
    display: table-cell;
    padding: 5px;
}*/

/* https://getcssscan.com/css-buttons-examples */

.button-38 {
    background-color: #FFFFFF;
    border: 0;
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "IBM Plex Sans","Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;/*.875rem;*/
    font-weight: 600;
    line-height: 1.25rem;
    padding: .75rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    cursor: pointer;
    user-select: none;
   -webkit-user-select: none;
    touch-action: manipulation;
}
.button-38:hover {
    background-color: rgb(249,250,251);
}
.button-38:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.button-38:focus-visible {
    box-shadow: none;
}

.button-39,.__aux-button {
    background-color: #FFFFFF;
    border: 1px solid rgb(209,213,219);
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "IBM Plex Sans","Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;/*.875rem;*/
    font-weight: 600;
    line-height: 1.25rem;
    padding: .75rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
   -webkit-user-select: none;
    touch-action: manipulation;
}
.button-39:hover,.__aux-button:hover {
    background-color: rgb(249,250,251);
}
.button-39:focus,.__aux-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.button-39:focus-visible,.__aux-button:focus-visible {
    box-shadow: none;
}

.button-85 {
    padding: 0.6em 2em;
    border: none;
    outline: none;
  /*color: rgb(255, 255, 255);*/
    color: black;
    font-family: "IBM Plex Sans, Lucida, sans-serif";
    font-size: 1rem;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
   -webkit-user-select: none;
    touch-action: manipulation;
}
.button-85:before {
    content: "";
    background: linear-gradient(
        45deg,
        #ff0000,
        #ff7300,
        #fffb00,
        #48ff00,
        #00ffd5,
        #002bff,
        #7a00ff,
        #ff00c8,
        #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
   -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}
@keyframes glowing-button-85 {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}
.button-85:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
  /*background: #222;*/
    background: white;
    left: 0;
    top: 0;
    border-radius: 10px;
}

/* https://learn.microsoft.com/en-us/entra/identity-platform/howto-add-branding-in-apps */
.custom-microsoft-btn {
    white-space: nowrap;
    display: flex;
    align-items: center;
    background-color: #ffffff; /* Use #000000 for a dark-themed button */
    color: #5e5e5e; /* Use #ffffff for dark-themed button */
    border: 1px solid #8c8c8c;
    border-radius: 2px;
    padding: 10px 12px;
    font-family: "Segoe UI", Arial, sans-serif;
  __font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.custom-microsoft-btn:hover {
    background-color: #f3f3f3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ms-logo {
  __display: flex;
    margin-right: 12px;
}

.aux-blurry {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background for the overlay */
    display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
    z-index: 9998; /* Ensure it's on top of other content */
    backdrop-filter: blur(1px); /* The key to blurring the background */
   -webkit-backdrop-filter: blur(1px); /* For WebKit browsers */
  /*display: none;*/ /* Initially hidden */
}