/* THIS IS FROM CHAT GPT: */

    :root{
      --header-h: 56px;
      --dock-h: 70px;   /* visual reserve inside MAIN */
      --footer-h: 40px;
    }

    html, body { height: 100%; overflow: hidden; background: rgb(255,210,168); }

    /* HEADER (red, 60px) */
    header#site-header{
      position: fixed; inset: 0 0 auto 0;
      height: var(--header-h);
      z-index: 1030;
      display: flex; align-items: center;
      background: rgb(255,210,168);
      color: #fff;
      border-bottom: 1px solid rgba(0,0,0,.15);
    }
    #menu-bar .btn, #user-menu .btn{
		border: 0px;
		font-size:.8rem; font-variant: small-caps;
    }
    #menu-bar .btn:hover, #user-menu .btn:hover{
      background: rgba(255,255,255,.15); color:#242;
    }

    /* MAIN (independent vertical scroll) */
    main#content{
      position: fixed;
      top: var(--header-h);
      left: 0; right: 0;
      bottom: var(--footer-h);
      padding-top: 0px;
      padding-bottom: 0px; /* was 10 */
      overflow-y: auto; overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* Reserve space inside main so content doesn't hide behind the floating dock */
    .content-wrap{ padding: 5px; } /* was 1rem; } */

    /* FLOATING DOCK (icons overlay, anchored just above footer) */


/* Base dock floating above footer */
.dock-float {
  position: fixed;
  left: 30%; right: 30%;
  top: 5px;
  z-index: 1040;
  display: flex; justify-content: center;
  transition: all .25s ease;
}

/* Dock bar */
.dock-bar {
  display: flex; gap: 14px;
  padding: 6px 10px;
  background: rgba(199,249,245,.92);
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  transition: all .25s ease;
}

/* Dock items default (expanded) */
.dock-item {
  width: 75px; height: 60px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dock-item i { font-size: 1.5rem; }
.dock-label {
  font-size:.65rem; font-variant: small-caps;
  margin-top:2px; color:#333;
}

/* Hover effect (expanded mode only) */
.dock-item:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  background: rgba(0,0,0,.35);
}

/* === SHRUNK STATE (default) === */
.dock-float.shrunk .dock-bar {
  padding: 2px 8px;
  border-radius: 6px;
}
.dock-float.shrunk .dock-item {
  width: 28px; height: 28px;
  flex-direction: row;
}
.dock-float.shrunk .dock-item i {
  font-size: 1rem;
}
.dock-float.shrunk .dock-label {
  display: none;
}

/* Expand dock when hovering footer or dock itself */
#site-header:hover + .dock-float,
#site-header:focus-within + .dock-float,
.dock-float:hover,
.dock-float:focus-within {
  height: 75px;
}
    /* FOOTER (40px) */
    footer#site-footer{
      position: fixed; inset: auto 0 0 0;
      height: var(--footer-h);
      z-index: 1020;
      display: flex; align-items: center;
      background: rgb(174,109,79);
      border-top: 1px solid rgba(255,255,255);
      border-bottom: 2px solid rgba(0,0,0);
      padding: 0 .75rem;
    }



/* Footer layout: space-between to keep left/right, center flex item in the middle */
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .75rem;
  position: relative;
}

/* Footer center slot */
.footer-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size:.6rem; color:#fff;
}

/* Dock hint bar */
.dock-hint {
  width: 150px;
  height: 12px;
  background: #000;
  border-radius: 5px;
  opacity: 0.25;
}    .footer-left{ white-space:nowrap; font-size:.9rem; color:#fff; }
    .footer-right{ margin-left:auto; max-width:360px; width:100%; color:#fff; }

/* END CHAT GPT */

.text-funeral
	{
	color: rgb(255,121,40,1);
	}
.bg-funeral
	{
	background: rgb(255,121,40,1);
	}
.widget-red-car
	{
	border: 1px solid #f00;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #600;
	color: #f66;
	}
.lite-red-bg 
	{
	background-color: #fcc !important;
	}
.widget-green-car
	{
	border: 1px solid #0f0;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #060;
	color: #3c3;
	}
.lite-green-bg 
	{
	background-color: #efe !important;
	}
.widget-orange-car
	{
	border: 1px solid #f90;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #960;
	color: #f90;
	}
.lite-orange-bg 
	{
	background-color: #fda !important;
	}
.widget-dark-map
	{
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #336;
	color: #ccf;
	}
.widget-yellow
	{
	border: 1px solid yellow;
	border-radius: 3px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: rgba(255, 193, 7, 1);
	}
.lite-yellow-bg 
	{
	background-color: #ffc !important;
	}
.widget-blue
	{
	border: 1px solid #00f;
	border-radius: 3px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: blue;
	color: white;
	}
.lite-blue-bg 
	{
	background-color: #cff !important;
	}
div.littlebreak {
	height: 5px;
}
.pad2 
	{
	padding: 2px !important;
	}

.pad5 
	{
	padding: 5px !important;
	}



.odo-white
	{
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	color: #fff;
	font-weight: 700;
	}
.odo-red
	{
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	color: #f66;
	font-weight: 700;
	}
.odo-green
	{
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	color: #0f6;
	font-weight: 700;
	}
.odo-orange
	{
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	color: orange;
	font-weight: 700;
	}
.odometer {
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	color: #fff;
	font-weight: 700;
	display: inline-flex;
	justify-content: flex-end;
	gap: 1px;
}

.odo-digit {
	position: relative;
	width: 1ch;
	height: 1.2em;
	overflow: hidden;
	text-align: center;
}

.odo-strip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform 0.35s ease-in-out;
}

.odo-strip div {
	height: 1.2em;
	line-height: 1.2em;
}
.widget-white-car
	{
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	color: #000;
	}
.lite-white-bg 
	{
	background-color: #ddd !important;
	}
.redlined {
	border: 1px solid red !important;
	}
.widget-blue-car
	{
	border: 1px solid #00f;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: blue;
	color: #99f;
	}

.txs {
  	padding: .2rem .2rem !important;
	font-size: 9pt !important;
	font-family: "Courier New", Courier, mono;
}
.unpad 
	{
	padding: 0 !important;
	}

.unmargin 
	{
	margin: 0 !important;
	}

.code-red {
	color: red;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
}

.dead-red {
	color: red;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	text-decoration: line-through;
}

.code-green {
	color: green;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
}

.code-blue {
	color: blue;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
}

.code-black {
	color: black;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
}

.code-lite {
	color: black;
	font-family: "Courier New", Courier, mono;
}

.code-white {
	color: white;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
}

.lite-cyan-bg 
	{
	background-color: #ccf !important;
	}



.widget-teal-car
	{
	border: 1px solid #2fc;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: rgba(16,149,130,1);
	color: #fff;
	}

.widget-copper-car
	{
	border: 1px solid #fd5;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: rgba(174,109,79,1);
	color: #fff;
	}

.widget-black-car
	{
	border: 1px solid #00f;
	border-radius: 3px;
	padding: 2px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #666;
	color: #fff;
	}


.copper-text
	{
	color: #ae6d07 !important;
	}

.teal-text
	{
	color: #10958b !important;
	}
.fems-black
	{
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	color: #000;
	font-weight: 700;
	}
.fems-white
	{
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	color: #fff;
	font-weight: 700;
	}

.soft-blue 
	{
	background-color: rgba(31, 145, 243, 0.1) !important;
	}

.soft-cyan 
	{
	background-color: rgba(31, 243, 243, 0.1) !important;
	}

.soft-red 
	{
	background-color: rgba(251, 72, 58, 0.1) !important;
	}

.soft-green 
	{
	background-color: rgba(43, 152, 43, 0.1) !important;
	}

.soft-orange 
	{
	background-color: rgba(255, 150, 0, 0.1) !important;
	}

.soft-yellow 
	{
	background-color: rgba(255, 232, 33, 0.1) !important;
	}

.soft-dark 
	{
	background-color: rgba(153, 153, 153, 0.1) !important;
	}

.lite-teal-bg
	{
	background-color:#bff8f0;
	}

.morris-hover
	{
	position: absolute;
	z-index: 1000;
	}

.morris-hover.morris-default-style
	{
	background: rgba(0, 0, 0, 0.85);
	border: 1px solid #fff;
	border-radius: 6px;
	color: #fff;
	padding: 8px 12px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.4);
	}