/* Interactive Dashboard Styles */
:root {
  --warm-grey: #84807C;
  --pomodoro: #FF4500;
  --grey-66: #A8A8A8;
  --layer-two-color: rgb(124, 109, 205); 
  --layer-two-color-old: rgb(134, 129, 185); 
  --layer-two-fade: rgb(194, 191, 220); 
  --layer-two-barely: rgb(234, 233, 244); 
  --layer-one-dimmed: 0.15;
  --layer-two-blue: rgb(64, 51, 248);
  --translate_vertical: 100px;
}


.layer {
  grid-area: stack;
  display: flex;
  gap: 53px; /* Reduced from 80px by 1/3 */
  transition: opacity 0.5s ease;
  pointer-events: none;
  overflow: visible;
}

.layer:hover { 
  z-index: 10; 
}

#layer-one.dimmed, #layer-one .line.faded-out { 
  opacity: var(--layer-one-dimmed) !important; 
}

#layer-two.dimmed .line, #layer-two .line.faded-out { 
  color: var(--layer-two-barely) !important; 
  opacity: 1 !important; 
}

/* Use visibility:hidden instead of display:none so the arrows keep their
   space in the layout — display:none was causing a reflow that snapped
   the main-containers up on hover. */
.dimmed .line::after, .line.faded-out::after,
.dimmed .line::before, .line.faded-out::before { 
  visibility: hidden !important; 
}

.main-container { 
  pointer-events: auto; 
  flex-shrink: 0; 
  min-width: fit-content; 
}

/* Layer One: Left-aligned */
#layer-one {
  justify-content: flex-start;
}

#layer-one .main-container {
  text-align: left;
}

/* Layer Two: Right-aligned */
#layer-two { 
  justify-content: flex-end; 
}

#layer-two .main-container { 
  text-align: right; 
  order: 2; 
}

#layer-two .sub-container { 
  text-align: left; 
  order: 1; 
  flex-grow: 1; 
}

.line {
  font-size: 21.33pt; /* Reduced from 32pt by 1/3 */
  font-weight: 900;
  color: var(--warm-grey);
  line-height: 22.67pt; /* Reduced from 34pt by 1/3 */
  margin-bottom: 0; 
  transition: color 0.5s ease, opacity 0.5s ease;
  cursor: pointer;
  opacity: 0;
  transform: translateY(var(--translate_vertical));
  animation: slideUp 1s ease-out forwards;
  white-space: nowrap;
}

.char { 
  transition: color 0.8s ease; 
}

#layer-one .char.fade { 
  color: var(--grey-66) !important; 
}

#layer-two .char.fade { 
  color: var(--layer-two-fade) !important; 
}

#layer-two .line.active-blue { 
  color: var(--layer-two-blue) !important; 
}

.active-red { 
  color: var(--pomodoro) !important; 
}

#layer-one .line::after { 
  content: " \25B6"; 
  color: var(--pomodoro); 
  font-size: 0.8em; 
  margin-left: 10px; /* Reduced from 15px by 1/3 */
}

#layer-two .line { 
  color: var(--layer-two-color); 
}

#layer-two .line::before { 
  content: "\25C0 "; 
  color: var(--layer-two-blue); 
  font-size: 0.8em; 
  margin-right: 10px; /* Reduced from 15px by 1/3 */
}

.sub-container { 
  opacity: 0; 
  transition: opacity 0.5s ease, transform 0.3s ease; 
  pointer-events: none; 
  flex-grow: 1;
  /* Contribute zero height and zero width to the flex layout so injecting
     content never causes layout shift. overflow:visible ensures content
     is still visible despite height:0. */
  height: 0;
  min-height: 0;
  min-width: 0;
  width: 0;
  align-self: flex-start;
  overflow: visible;
}

/* Fixed width on sub-lines forces them to render at exactly this width
   regardless of the sub-container's flex size. Because the sub-container
   has height:0 and overflow:visible, sub-lines overflow visually without
   affecting the flex layout or moving main-container-two.
   Adjust this value to taste. */
#sub-container-one .sub-line,
#sub-container-two .sub-line {
  width: 320px; /* This is the effective width of the [sub] block. BL */
}

/* Start crucial font-size and line-height parameters for full, nonoverlapping rendering of [sub]. BL */

.sub-line {
  font-size: 13pt; /* Reduced from 24pt */
  font-weight: 900;
  color: var(--warm-grey);
  display: block; 
  line-height: 15pt; /* Reduced from 26pt */
  margin-bottom: 2pt; /* Reduced from 4pt */
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpSub 0.4s forwards;
}

#layer-two .sub-line { 
  font-size: 12pt; /* Reduced from 16pt */
  line-height: 12.8pt; /* Reduced from 18pt */
  color: var(--layer-two-color) !important; 
}

.sub-line-content { 
  display: flex; 
  align-items: flex-start; 
}

.sub-explanation {
  font-size: 9pt; /* Reduced from 14pt */
  font-weight: 500;
  color: black;
  margin-left: 21.33px; /* Reduced from 32px by 1/3 */
  line-height: 9.8pt; /* Reduced from 16pt */
  opacity: 0.7;
}

/* End crucial font-size and line-height parameters for full, nonoverlapping rendering of [sub]. BL */

.sub-line-content::before {
  content: ""; 
  display: inline-block; 
  width: 9.33px; /* Reduced from 14px by 1/3 */
  height: 9.33px; /* Reduced from 14px by 1/3 */
  flex-shrink: 0;
  background: var(--pomodoro); 
  border-radius: 50%;
  margin-right: 12px; /* Reduced from 18px by 1/3 */
  margin-top: 6.67pt; /* Reduced from 10pt by 1/3 */
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  animation: circlePulse 2s infinite ease-in-out;
}

#layer-two .sub-line-content::before { 
  background: var(--layer-two-blue); 
  margin-top: 6pt; /* Reduced from 4pt by 1/3 */
  animation: circlePulseBlue 2s infinite ease-in-out; 
}

@keyframes circlePulse {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.4); 
  }
  70% { 
    transform: scale(1.15); 
    box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); 
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); 
  }
}

@keyframes circlePulseBlue {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(64, 51, 248, 0.4); 
  }
  70% { 
    transform: scale(1.15); 
    box-shadow: 0 0 0 10px rgba(64, 51, 248, 0); 
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(64, 51, 248, 0); 
  }
}

@keyframes slideUp { 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

@keyframes slideUpSub { 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

/* Docs table dimming — triggered when any slide-up item is active */
#docs-table {
  transition: opacity 0.5s ease;
}

body.item-active #docs-table {
  opacity: 0.15;
  pointer-events: none;
}