/* global standards */
:root {
	--border-color-50: rgb(50 50 50);
	--button-border: rgb(60 60 60);
	--button-border-hover: rgb(70 70 70);
	
	/* archive picker row specs */
	--picker-row-height: 34px;
	--visible-rows: 7;
		
	--bg-dark: #1a1a1a;
	--bg-hover: #333333;
	--text-light: #e0e0e0;
	--border-color: rgb(68 68 68);

	--gray: rgb(200 200 200);
	--red: rgb(255 41 117);
	--orange: rgb(255 145 27);
	--yellow: rgb(255 234 66); /* --yellow: rgb(255, 198, 66); */
	--green: rgb(0 255 173);
	--blue: rgb(0 195 255);
	--pink: rgb(255 110 204);
}

@media (min-width: 1025px) {
  :root {
	--visible-rows: 9; /* Taller picker for desktop */
  }
}

*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* For older Android/iOS versions */
    outline: none; /* Optional: removes the focus outline, use with caution for accessibility */
}

html {
	background-color:rgb(16 16 16);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; /* The Firefox equivalent for Mac */
}

html,
body {
	width: 100%;
	height: 100%;
	/* background-color: #161616; */
	/* background-color: rgb(16 16 16); */
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	border: none;
	overflow: hidden;
	display:flex;
	justify-content:center;
}

.centext {
	text-align:center;
}

.error {
	color:rgb(255, 100, 100);
}

gray,
.gray {
	color: var(--gray);
}

red,
.red {
	color: var(--red);
}

orange,
.orange {
	color: var(--orange);
}

yellow,
.yellow {
	color: var(--yellow);
}

green,
.green {
	color: var(--green);
}

blue,
.blue {
	color: var(--blue);
}

pink,
.pink {
	color: var(--pink);
}

.smaller {
	font-size:smaller;
}

div.rel {
	position:relative;
}

/* html {
  font-size: 75%;
  font-size: 100%;
} */

* {
	box-sizing: border-box;
}

.grid {
	display:grid;
}

.flex {
	display:flex;
}

.flex .f1 {
	flex:1;
}

.flex .f2 {
	flex:2;
}

.flex .f3 {
	flex:3;
}

.flex .f4 {
	flex:4;
}

.flex .f5 {
	flex:5;
}

.flex .f6 {
	flex:6;
}

.flex .f7 {
	flex:7;
}

.flex .f8 {
	flex:8;
}

.flex.row {
	flex-direction:row;
	align-items:center;
}

.flex.col {
	flex-direction:column;
}

.flex.gap.rem05 {
	gap:0.5rem;
}
.flex.gap.rem1 {
	gap:1rem;
}
.flex.gap.rem2 {
	gap:2rem;
}
.flex.gap.rem3 {
	gap:3rem;
}
.flex.gap.rem4 {
	gap:4rem;
}
.flex.gap.rem5 {
	gap:5rem;
}
.flex.gap.rem6 {
	gap:6rem;
}
.flex.gap.rem7 {
	gap:7rem;
}
.flex.gap.rem8 {
	gap:8rem;
}

.flex.justify.center {
	justify-content:center;
}

.flex.align.center {
	align-items:center;
}

.flex.justify.between {
	justify-content: space-between;
}

.flex.align.start {
	align-items:flex-start;
}

.flex.justify.start {
	justify-content:flex-start;
}

.animate__animated.animate__fadeInDown {
	--animate-duration: 0.3s;
}

.hide {
	display: none !important;
}

.invis {
	opacity: 0 !important;
	color: transparent !important;
}

.hand,
.button {
	cursor: pointer;
}

.ph-light,
.ph-thin {
	vertical-align: middle;
}

mark {
	background-color: transparent;
}

mark.add {
	color: rgb(0, 194, 255);
}

mark.remove {
	color: rgb(255, 110, 204);
}

mark.change {
	color: rgb(255, 198, 66);
}

.divbot {
	border-bottom: 1px solid var(--border-color-50);
}

.divtop {
	border-top: 1px solid var(--border-color-50);
}

.divleft {
	border-left: 1px solid var(--border-color-50);
}

.divrite {
	border-right: 1px solid var(--border-color-50);
}

.report {
	position: absolute;
	top:10px;
	left:10px;
	height:40px;
	width:200px;
	z-index:9000;
	background-color:yellow;
	color:rgb(181, 60, 3);
	display: flex;
	align-items: center;
	justify-content:center;
	font-size:1.3em;
}

input {
	border: 1px solid var(--button-border);
	background-color: rgb(255 255 255 / 5%);
	color: rgb(255 255 255 / 78%);
	font-size: 1.3rem;
	font-weight: 300;
	text-align:center;
	outline:none;
	transition: border 0.2s;
}

input:focus {
	border:1px solid rgb(90 90 90);
}

.btn {
	border: 1px solid var(--button-border);
	background-color: rgb(255 255 255 / 5%);
	color: rgb(255 255 255 / 78%);
	font-size: 1.2rem;
	font-weight: 300;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, border 0.2s, background-color 0.2s;
}

.rect {
	border-radius:0.5rem;
	padding:0.25rem 1rem;
}

.btn.round {
	border-radius: 100%;
	width: 2.25rem;
	height: 2.25rem;
	z-index: 2;
}

.btn.round.close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index:unset;
}

.btn.round.close img {
	width: 50%;
	height: 50%;
	opacity: 0.8;
}

.btn:not(.disabled):hover {
	border: 1px solid rgb(70 70 70);
}

.btn.rect:not(.disabled):hover {
	background-color:rgb(255 255 255 / 8%);
}

.btn.round:not(.disabled):hover {
	transform: scale(1.15);
}

.btn.round.mini {
	width: 1.4rem;
    height: 1.4rem;
    font-size: small;
    /* line-height: 5.9rem; */
    position: absolute;
}

.btn.round.mini.why {
	display: inline-flex;
}

.outLeft {
	animation: outLeft 0.4s;
}

@keyframes outLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.inFromRight {
	animation: inFromRight 0.4s;
}

@keyframes inFromRight {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}

.pushLeft {
	animation: pushLeft 0.4s;
}

@keyframes pushLeft {
	0% {
		transform: translateX(0);
	}

	5% {
		transform: translateX(5%);
	}

	100% {
		transform: translateX(-100%);
	}
}

.shimmer-box {
  display: inline-block;
  width: 80px; /* Fixed width prevents length guessing */
  height: 1.2em;
  vertical-align: middle;
  background: #3a3a3a;
  background-image: linear-gradient(
    -45deg, 
    #3a3a3a 0%, 
    #4a4a4a 50%, 
    #3a3a3a 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-dark {
    animation: none;
    background: #4a4a4a; /* Static placeholder */
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-blur {
  /* Blur effect */
  filter: blur(4px);
  
  /* Shimmer setup */
  color: rgba(255, 255, 255, 0.1); /* Text transparency for shimmer visibility */
  background: linear-gradient(
    90deg, 
    #ccc 25%, 
    #fff 50%, 
    #ccc 75%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Shimmer Animation */
  animation: shimmer 2s infinite linear;
  display: inline-block;
}
.shimmer-blur-dark {
  /* Blur effect */
  filter: blur(5px);
  
  /* Shimmer setup for Dark Backgrounds */
  color: rgba(255, 255, 255, 0.05); /* Very faint text */
  background: linear-gradient(
    90deg, 
    #333 25%, 
    #eee 50%, 
    #333 75%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Animation */
  animation: shimmer 2.5s infinite linear;
  display: inline-block;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}