/* Grace Fellowship Church - Custom Stylesheet (Tailwind CSS v4.3 + AngularJS v1.8.2) */
:root {
      --tw-version: "4.3";
    }
    body {
      font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
      background-color: #faf8f5;
      color: #1e293b;
      overflow-x: hidden;
    }
    .font-serif-display {
      font-family: 'Playfair Display', Georgia, serif;
    }
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
    .nav-active {
      color: #b45309 !important;
      background-color: #fef3c7 !important;
      font-weight: 600;
    }
    .drawer-nav-active {
      color: #92400e !important;
      background-color: #fef3c7 !important;
      border-left: 4px solid #d97706 !important;
      font-weight: 700;
    }
    .smooth-fade {
      animation: fadeIn 0.28s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Chord-Over-Lyric Stacked Layout (Chords strictly above exact lyric word) */
    .chord-lyric-pair {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      margin-right: 0.35rem;
      margin-bottom: 0.45rem;
      vertical-align: bottom;
    }
    .chord-badge-top {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 700;
      font-size: 0.76rem;
      line-height: 1.1;
      color: #92400e;
      background-color: #fef3c7;
      border: 1px solid #f59e0b;
      border-radius: 0.35rem;
      padding: 0.12rem 0.38rem;
      margin-bottom: 0.22rem;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
      box-shadow: 0 1px 2px rgba(180, 83, 9, 0.12);
    }
    .chord-badge-top:hover {
      background-color: #f59e0b;
      color: #0f172a;
      transform: translateY(-1px);
    }
    .chord-spacer-empty {
      height: 1.35rem;
      margin-bottom: 0.22rem;
      visibility: hidden;
      pointer-events: none;
    }
    .lyric-word-bottom {
      line-height: 1.35;
      color: #0f172a;
      font-weight: 500;
      white-space: pre-wrap;
    }