/* ============================================================
      CASELAW.VN — DESIGN SYSTEM  (Navy Professional)
      ============================================================ */

      /* Reading progress bar */
      #reading-bar {
          position: fixed; top: 0; left: 0; height: 3px; width: 0%;
          background: linear-gradient(90deg, #1C5CAA 0%, #4A8FD8 100%);
          z-index: 9999; border-radius: 0 2px 2px 0;
          transition: width .08s linear;
      }

      #left-collapsed-inner a.collapsed-icon-btn {
        background-color:#F1F5F9;
        font-weight:800;
        color:#64748B
      }
      #left-collapsed-inner a.collapsed-icon-btn.active {
        background-color:#1C5CAA;
        color: white;
      }

      .author-bio p {
        font-size: 13px;
      }

      /* Material icons helper */
      .ms { font-family: "Material Symbols Outlined" !important; font-weight: normal;
              font-style: normal; font-size: 20px; line-height: 1;
              letter-spacing: normal; text-transform: none; display: inline-block;
              white-space: nowrap; word-wrap: normal; direction: ltr;
              font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }


      #article-main * {
        font-family: 'Inter', sans-serif; !important;
      }

      #article-main [style*="font-family"] {
        font-family: "Inter", sans-serif !important;
      }
      /* Article prose */
      .prose-article p {
          font-family: 'Inter', sans-serif;
          font-size: 1.08rem; line-height: 1.85;
          color: #1e293b; margin-bottom: 1.4rem;
      }
      .dark .prose-article p { color: #cbd5e1; }

      .prose-article h2 {
          font-family: 'Inter', sans-serif;
          font-size: 1.35rem; font-weight: 800;
          color: #0F172A;
          margin-top: 2.5rem; margin-bottom: 1rem;
          padding-bottom: 0.6rem;
          border-bottom: 2px solid #F1F5F9;
          letter-spacing: -.02em; line-height: 1.3;
          scroll-margin-top: 84px;
          display: flex; align-items: center; gap: 10px;
      }
      .dark .prose-article h2 { color: #f1f5f9; border-bottom-color: #1e293b; }

      .prose-article h2 .h2-accent {
          display: inline-block; width: 4px; height: 20px; flex-shrink: 0;
          background: linear-gradient(to bottom, #1C5CAA, #2D6BC6);
          border-radius: 99px;
      }

      .prose-article blockquote {
          margin: 2rem 0;
          padding: 1.2rem 1.5rem;
          background: linear-gradient(135deg, #EFF6FF 0%, rgba(239,246,255,.4) 100%);
          border-left: 4px solid #1C5CAA;
          border-radius: 0 10px 10px 0;
          position: relative;
          font-style: italic; color: #334155;
          font-family: 'Inter', sans-serif; font-size: 1.05rem; line-height: 1.75;
      }
      .dark .prose-article blockquote { background: rgba(28,92,170,.1); color: #94a3b8; }

      .prose-article blockquote::before {
          content: '\201C'; position: absolute;
          top: -6px; left: 14px;
          font-size: 52px; color: #1C5CAA; opacity: .13;
          font-family: 'Inter', sans-serif; line-height: 1;
      }

      /* TOC active */
      .toc-link.active {
          color: #1C5CAA !important;
          background: rgba(28,92,170,.07);
          border-left: 2px solid #1C5CAA;
          font-weight: 700;
      }
      .toc-link.active .toc-num { background: #1C5CAA !important; color: white !important; }

      /* Insight box pulse */
      @keyframes  pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(1.25); } }
      .pulse { animation: pulse-dot 1.6s infinite; }

      /* Card fade-in */
      @keyframes  fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
      .fade-up { animation: fadeUp .4s ease forwards; }
      .fade-up-2 { animation: fadeUp .4s ease .1s both; }
      .fade-up-3 { animation: fadeUp .4s ease .18s both; }

      /* Doc card hover preview */
      .doc-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left:0; right:0; z-index: 60; pointer-events: none; }
      .doc-card:hover .doc-tooltip { display: block; }

      /* Popover */
      @keyframes  popIn { from { opacity:0; transform:scale(.95) translateY(6px); } to { opacity:1; transform:scale(1) translateY(0); } }
      .popover-open { display: block; animation: popIn .18s ease forwards; }

      /* =====================================================
          SIDEBAR — MOTION SYSTEM
          Uses width + opacity + transform animation via GSAP
      ===================================================== */

      /* Layout: switch to flex so sidebar width change reflows article */
      #page-layout {
          display: flex;
          gap: 24px;
          align-items: flex-start;
          max-width: 1300px;
          margin: 0 auto;
          padding: 28px 20px 80px;
      }

      /* Sidebar wrappers — width is animated by JS */
      #left-sidebar {
          flex-shrink: 0;
          width: 264px;
          overflow: hidden;         /* clip content during width animation */
          min-width: 0;
          position: sticky;
          top: 78px;
          align-self: flex-start;
      }

      #right-sidebar {
          flex-shrink: 0;
          width: 284px;
          overflow: hidden;
          min-width: 0;
          position: sticky;
          top: 78px;
          align-self: flex-start;
      }

      /* Article grows to fill space */
      #article-main { flex: 1; min-width: 0; }

      /* ---- Expanded inner content ---- */
      #left-expanded, #right-sidebar-content {
          opacity: 1;
          transform: translateX(0);
          /* transitions handled by GSAP */
      }

      /* ---- Collapsed inner (icon strip) ---- */
      #left-collapsed-inner, #right-collapsed-inner {
          opacity: 0;
          pointer-events: none;
          position: absolute; top: 0; left: 0; right: 0; bottom: 0;
          display: flex; flex-direction: column; align-items: center;
          padding: 12px 0 16px;
          gap: 6px;
          min-height: 300px;
      }

      /* Sidebar card wrapper (holds both expanded + collapsed absolutely) */
      .sidebar-card-wrap {
          position: relative;
          background: white;
          border-radius: 12px;
          border: 1px solid #F1F5F9;
          box-shadow: 0 1px 3px rgba(0,0,0,.06);
          overflow: hidden;
      }
      .dark .sidebar-card-wrap { background: #0f172a; border-color: #1e293b; }

      /* Collapsed icon button */
      .collapsed-icon-btn {
          width: 36px; height: 36px;
          display: flex; align-items: center; justify-content: center;
          border-radius: 10px;
          cursor: pointer;
          transition: background .15s ease, transform .15s ease;
          position: relative;
      }
      .collapsed-icon-btn:hover { transform: scale(1.08); }

      /* Tooltip for collapsed icon */
      .collapsed-icon-btn .tip {
          position: absolute; left: calc(100% + 10px); top: 50%;
          transform: translateY(-50%) translateX(-4px);
          background: #0B1F3F; color: white;
          font-size: 11px; font-weight: 600;
          padding: 4px 10px; border-radius: 6px;
          white-space: nowrap;
          max-width: 220px;
          pointer-events: none;
          opacity: 0;
          transition: opacity .15s ease, transform .15s ease;
          z-index: 100;
      }
      .collapsed-icon-btn .tip::before {
          content: '';
          position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
          border: 5px solid transparent;
          border-right-color: #0B1F3F;
      }
      .collapsed-icon-btn:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }

      /* Right sidebar collapsed tooltip on left */
      #right-collapsed-inner .collapsed-icon-btn .tip,
      #right-collapsed .collapsed-icon-btn .tip {
          left: auto; right: calc(100% + 10px);
          transform: translateY(-50%) translateX(4px);
      }
      #right-collapsed-inner .collapsed-icon-btn .tip::before,
      #right-collapsed .collapsed-icon-btn .tip::before {
          right: auto; left: 100%;
          border-right-color: transparent;
          border-left-color: #0B1F3F;
      }
      #right-collapsed-inner .collapsed-icon-btn:hover .tip,
      #right-collapsed .collapsed-icon-btn:hover .tip {
          transform: translateY(-50%) translateX(0);
      }

      /* Progress dot in collapsed */
      .collapsed-progress-dot {
          width: 6px; height: 6px; border-radius: 50%;
          position: absolute; top: 4px; right: 4px;
      }

      /* Mode button */
      .mode-btn.active { background: white; color: #1C5CAA; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
      .dark .mode-btn.active { background: #1e293b; color: #4A8FD8; }

      /* ── Modal animation ── */
      @keyframes  popIn {
          from { opacity: 0; transform: scale(.92) translateY(8px); }
          to   { opacity: 1; transform: scale(1) translateY(0); }
      }

      /* ── Global border reduction: cards use shadow not border ── */
      .sidebar-card-wrap { border: none !important; box-shadow: 0 1px 8px rgba(0,0,0,.07); }
      .dark .sidebar-card-wrap { box-shadow: 0 1px 8px rgba(0,0,0,.3); }

      /* Custom scrollbar */
      ::-webkit-scrollbar { width: 5px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
      ::-webkit-scrollbar-thumb:hover { background: #1C5CAA; }

      .w-700{
        width: 700px;
      }
  
/* v2 only: LegacyTwDocument renders the Bootstrap login modal, which live's Tailwind layout does not have and
   which has no Bootstrap CSS here to hide it (bootstrap.min.css: .modal{display:none}). */
#myModal.modal:not(.in){display:none}
/* live prints the top bar's own <style> in <body>, after this sheet, so it wins over .bg-navy above */
.bg-top-info{background-color:#2c3e50}