/* grid */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: 12px;
  margin: 16px 0 24px;
  width: 100%;
}

/* ensure perspective + 3d */
.tile {
  position: relative;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  margin: 0;
  padding: 0;
}

.tile-inner {
  position: relative;
  width: 100%;
  height: 220px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .5s ease;
  will-change: transform;
}

/* ✳️ stronger selector + !important to beat any global transform rules */
.tile.flipped > .tile-inner {
  transform: rotateY(180deg) !important;
}

.tile-face {
  position: absolute;
  inset: 0;
  background: #1e1e1e;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  padding: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
  word-wrap: break-word;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  box-shadow: none;
}

/* keep the back face separate & explicit */
.tile-face.tile-back {
  transform: rotateY(180deg);
  background: #141414;
}

.tile-header { color: #b0b0b0; font-size: 0.85rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.tile-value  { font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.tile-value.up   { color: #38a169; }   /* green-ish */
.tile-value.down { color: #e53e3e; }   /* red-ish */
.tile-sub    { color: #9aa0a6; font-size: .9rem; margin-top: 4px; }
.tile-info   { color: #c9c9c9; font-size: .95rem; line-height: 1.45; }
.tile-info ul { margin: 8px 0 0 18px; }

/* Removed the hover-based flipping behavior */

/* Specificity bump + safety */
.tiles-grid .tile { perspective: 1000px; -webkit-perspective: 1000px; }
.tiles-grid .tile .tile-inner {
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .5s ease; will-change: transform;
  height: 220px;
}
.tiles-grid .tile.flipped .tile-inner { transform: rotateY(180deg) !important; }

.tiles-grid .tile .tile-face { 
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tiles-grid .tile .tile-face.tile-back { transform: rotateY(180deg); }

/* simple visual cue to confirm the class toggles */
.tiles-grid .tile.flipped { outline: 1px dashed #666; outline-offset: 2px; }

/* P/E color bands (tint the FRONT face; back stays neutral for readability) */
.tile.pe-low .tile-front {
  background: #132a17;                /* deep green tint */
  border-color: #1f6f3f;
}
.tile.pe-fair .tile-front {
  background: #2a2a13;                /* olive / fair */
  border-color: #7d7a2a;
}
.tile.pe-high .tile-front {
  background: #2a1f13;                /* amber / getting expensive */
  border-color: #b8741a;
}
.tile.pe-veryhigh .tile-front {
  background: #2a1414;                /* red tint */
  border-color: #c23c3c;
}

.tile-caption { font-size: 0.85rem; margin-top: 4px; color: #9aa0a6; }

/* TREASURY YIELD CURVE (original block kept for compatibility) */
/* Make selected tiles span 2 columns and taller */
.tile.wide { grid-column: span 2; }
.tile.wide .tile-inner { height: 200px; }

/* SVG styles (baseline) */
.curve-svg { width: 100%; height: 110px; }
.curve-axis { stroke: #9aa0a6; stroke-width: 1; }
.curve-tick { stroke: #9aa0a6; stroke-width: 1; opacity: .6; }
.curve-label { fill: #9aa0a6; font-size: 10px; }
.curve-line { stroke: #ffd84d; stroke-width: 2; fill: none; } /* yellow line */


/* ============================= */
/* Overrides / Enhancements      */
/* ============================= */

/* Bigger layout for the yield curve tile */
.tiles-grid .tile.wide-curve { grid-column: span 2; }
.tiles-grid .tile.wide-curve .tile-inner { height: 230px; } /* more room than 140px */
.tiles-grid .tile.wide-curve .yc-chart   { height: 150px; } /* chart gets most space */

/* Hide the large value line specifically on tiles that don't have a single number */
.tiles-grid .tile.no-value .tile-value { display: none; }
.tiles-grid .tile.no-value .tile-sub   { margin-top: 6px; }

/* SVG styling */
.curve-svg   { width: 100%; height: 100%; }
.curve-axis  { stroke: #2a2a2a; stroke-width: 1; }
.curve-tick  { stroke: #2a2a2a; stroke-width: 1; opacity: .5; }
.curve-label { fill: #9aa0a6; font-size: 10px; dominant-baseline: middle; }

/* Pop the line (yellow + subtle glow) */
.curve-line  {
  stroke: #FFD84D;
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(255, 216, 77, .6));
}

/* Dots on each node */
.curve-dot { fill: #FFD84D; }

/* Optional: collapse to 1 col on narrow screens */
@media (max-width: 640px) {
  .tiles-grid .tile.wide-curve { grid-column: span 1; }
  .tiles-grid .tile {
    min-height: 200px;
  }
  .tile-inner {
    height: auto;
    min-height: 180px;
  }
}