/* =====================================================
   Arthavedica — Glossary Dashboard CSS (Compact • Polished)
   Matches your HTML • tight spacing • unified widths
===================================================== */

/* ---------- Tokens ---------- */
:root{
  --primary:#060644; --secondary:#274C77; --accent:#D4AF37;
  --violet:#7C3AED; --teal:#06B6D4; --green:#22C55E; --orange:#F97316;
  --dark:#0B0B3B; --gray:#6B7280; --muted:#EEF1F7; --border:#E5E7EB;

  --shadow:0 10px 20px rgba(3,3,43,.10);
  --ring:0 10px 20px rgba(3,3,43,.10);
  --ring-strong:0 16px 34px rgba(3,3,43,.16);
  --transition:.18s ease;

  --radius:14px; --radius-sm:10px; --radius-lg:20px;

  /* Compact scale */
  --g1:6px; --g2:10px; --g3:12px; --g4:14px; --g5:18px; --g6:24px; --g7:32px; --g8:56px;

  --container:1200px;         /* global max width */
  --content:1200px;           /* reading width (your request) */
  --card-min:320px;           /* min card width */

  --card-bg:#ffffff;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--dark);
  background:linear-gradient(180deg,#fff 0%, #fbfbff 100%)
}
img{max-width:100%; display:block}
.page-content{padding-bottom:var(--g7)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #93c5fd; outline-offset:2px; border-radius:10px}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  padding:10px var(--g4); background:#fff; border-bottom:1px solid var(--border);
  width:min(var(--container),100%); margin-inline:auto
}
.breadcrumb a{color:#3b4166; font-weight:700}
.breadcrumb span{color:#9aa0b3}

/* ---------- Hero / Controls ---------- */
.hero{padding:var(--g5) 0 var(--g4); position:relative}
.hero h1{font-size:clamp(1.9rem,3vw,2.4rem); color:var(--primary)}
.hero .row{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--g3); align-items:center}

/* Stats */
.stats{display:flex; gap:8px; flex-wrap:wrap}
.stat{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:10px 12px; background:#fff; border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--ring);
  min-width:180px; flex:0 0 auto; border-left:6px solid rgba(255,25,255,.255);
}
.stat strong{font-size:1.1rem; color:var(--primary)}

/* Hero visual (rings + badge) */
.hero__visual{position:relative; min-height:160px; display:grid; place-items:center}
.hero-ring{width:min(220px,52vw); height:auto; color:#0b0b3b; opacity:.6}
.hero-badge{
  display:inline-flex; gap:.45rem; align-items:center;
  margin-top:-4.5rem;
  background:#fff; color:var(--secondary);
  padding:.42rem .75rem; border-radius:999px; font-weight:700;
  border:1px solid var(--border); box-shadow:var(--ring)
}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem .95rem; border-radius:12px;
     border:1px solid transparent; font-weight:700; cursor:pointer; transition:all var(--transition)}
.btn-primary{background:linear-gradient(135deg,var(--primary),#2a2aad); color:#fff; box-shadow:var(--ring)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--ring-strong)}
.btn-ghost{background:#fff; color:var(--primary); border:1px solid var(--border)}
.btn-soft{background:#f7f8fd; color:#0b0b3b; border:1px solid #e3e7f3}

/* Search box (inside hero) */
.search-box{
  display:flex; gap:8px; align-items:center; margin:12px auto 0;
  width:min(820px,100%); background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--ring); padding:8px
}
.search-box input.av-glo-input{flex:1; border:0; outline:0; padding:12px 10px; font-size:1rem}
.search-box button{
  height:38px; min-width:38px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--border); background:#f8f9fb; color:#2b2f4a; cursor:pointer
}
.search-box button:hover{background:#eef1f7}

/* ---------- Filter container (if used) ---------- */
.filter{
  display:grid; grid-template-columns:.4fr 1fr; gap:var(--g3);
  align-self:center; max-width:var(--container); position:relative; margin:auto;
}

/* ---------- Category Filter ---------- */
.category-filter{margin:var(--g4) var(--g4) 0; width:min(var(--container),100%); margin-inline:auto}
.category-filter h3{margin:0 0 8px; color:var(--primary)}
.category-filter ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.category-filter a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  background:#fff; border:1px solid var(--border); border-radius:999px; color:#233; font-weight:700;
  transition:box-shadow var(--transition), transform var(--transition)
}
.category-filter a:hover{box-shadow:var(--ring); transform:translateY(-1px)}

/* ---------- A–Z Filter ---------- */
.alphabet-filter{margin-top:var(--g4); padding:0 var(--g4); width:min(var(--container),100%); margin-inline:auto}
.alphabet-filter h3{margin:0 0 8px; color:var(--primary)}
.alphabet-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(40px,1fr)); gap:6px}
.alphabet-grid .alpha{
  min-height:30px; display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--border); background:#fff; font-weight:800; color:#2b2f4a; cursor:pointer;
  transition:box-shadow var(--transition), background var(--transition), color var(--transition)
}
.alphabet-grid .alpha:hover{box-shadow:var(--ring)}
.alphabet-grid .alpha.active{background:linear-gradient(135deg,#eef2ff,#e0f7fa); border-color:#cdd6f6}
.alphabet-btn{
  width:2rem; height:2rem; font-size:13px; border:1px solid #ccc; border-radius:6px;
  cursor:pointer; background:#f0f0f0; transition:var(--transition)
}
.alphabet-btn:hover,.alphabet-btn.active{background:var(--primary); color:#fff}

/* ---------- Tag Cloud ---------- */
.tag-cloud{margin:var(--g3) var(--g4) 0; width:min(var(--container),100%); margin-inline:auto}
.tag-cloud h3{margin:0 0 8px; color:var(--primary)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags a,.tags button,.tags span{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; color:#334; font-weight:700;
  transition:box-shadow var(--transition)
}
.tags a:hover,.tags button:hover{box-shadow:var(--ring)}

/* ---------- Glossary Container ---------- */
.glossary-container{padding:var(--g5) var(--g4) var(--g4); width:min(var(--container),100%); margin-inline:auto}
.glossary-content{max-width:var(--content); margin-inline:auto}
.av-glo-title{
  margin:0 0 var(--g3);
  background:linear-gradient(90deg,#0b0b3b,#6b6be9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(1.4rem,2.2vw,1.8rem)
}

/* Results grid */
.av-glo-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr)); gap:var(--g3)}
@media (max-width:1280px){ :root{ --card-min:260px } }
@media (max-width:780px){
  :root{ --card-min:100% }
  .hero .row{grid-template-columns:1fr}
  .hero__visual{display:none}
  .search-box{width:100%}
}

/* Cards */
.av-glo-entry{
  background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,
             linear-gradient(135deg,#c7d2fe,#fde68a,#a7f3d0) border-box;
  border:1px solid transparent; border-radius:var(--radius); box-shadow:var(--ring);
  border-top:6px solid rgba(255,25,255,.25);
  padding:var(--g3); display:flex; flex-direction:column; gap:10px; min-height:100%;
  transition:transform var(--transition), box-shadow var(--transition)
}
.av-glo-entry:hover{transform:translateY(-2px); box-shadow:var(--ring-strong)}
.av-glo-entry-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.av-glo-titlewrap{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.av-glo-term{margin:0; font-size:1.06rem; color:var(--primary); max-width:100%}
.av-glo-ipa{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#6b7280; font-size:.9rem}
.av-glo-speaker{
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--border); background:#f8fafc; cursor:pointer
}
.av-glo-speaker:hover{background:#eef2ff}
.av-glo-btn{
  display:inline-flex; align-items:center; gap:8px; padding:.5rem .75rem;
  border-radius:10px; background:var(--primary); border:1px solid transparent; color:#fff; font-weight:700;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition)
}
.av-glo-btn:hover{transform:translateY(-1px); box-shadow:var(--ring); background:var(--secondary)}
.av-glo-one{margin:.2rem 0 0; color:#3e4157}
.av-glo-term,.av-glo-one{overflow-wrap:anywhere; hyphens:auto}

/* Popular terms */
.popular-terms{margin-top:var(--g5); width:min(var(--container),100%); margin-inline:auto;}
.popular-terms h3{margin:0 0 8px; color:var(--primary)}
.popular-terms ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px;
}
.popular-terms li a{
  display:block; padding:10px 12px; border:1px solid var(--border); border-radius:10px; height: 50px;;
  background:#fff; color:#2b2f4a; font-weight:700; transition:box-shadow var(--transition), transform var(--transition)
}
.popular-terms li a:hover{box-shadow:var(--ring); transform:translateY(-1px)}

/* Alphabet helper */
.alpha--disabled{opacity:.4; pointer-events:none}

/* Status/Error */
.error{margin-top:var(--g3); padding:10px 12px; border:1px solid #fecaca; border-radius:10px; color:#7a0a0a; background:#fff1f1; box-shadow:var(--ring)}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.av-glo-entry{animation:fadeUp .28s ease both}

/* ---------- Dark Mode ---------- */
:root[data-theme="dark"]{
  --border:#1b1f3a; --ring:0 10px 22px rgba(3,3,43,.24); --ring-strong:0 16px 36px rgba(3,3,43,.30);
  --card-bg:#0f1030;
}
:root[data-theme="dark"] body{background:linear-gradient(180deg,#0a0a2a 0%, #0b0b3b 100%)}
:root[data-theme="dark"] .breadcrumb{background:#0b0b3b; border-bottom-color:#1b1f3a}
:root[data-theme="dark"] .breadcrumb a{color:#cfd6ff}
:root[data-theme="dark"] .hero h1{color:#dbe1ff}
:root[data-theme="dark"] .stat{background:#0f1030; border-color:#1b1f3a}
:root[data-theme="dark"] .search-box{background:#0f1030; border-color:#1b1f3a}
:root[data-theme="dark"] .search-box input{color:#e8eaf6; background:transparent}
:root[data-theme="dark"] .alphabet-grid .alpha{background:#0f1030; border-color:#1b1f3a; color:#dbe1ff}
:root[data-theme="dark"] .category-filter a,
:root[data-theme="dark"] .tags a, :root[data-theme="dark"] .tags button, :root[data-theme="dark"] .tags span{
  background:#0f1030; border-color:#1b1f3a; color:#dbe1ff
}
:root[data-theme="dark"] .av-glo-entry{
  background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,
             linear-gradient(135deg,#6366f1,#fde68a,#34d399) border-box;
  border:1px solid transparent
}
:root[data-theme="dark"] .av-glo-btn{background:#0f1030; border-color:#1b1f3a; color:#e8eaf6}
:root[data-theme="dark"] .popular-terms li a{background:#0f1030; border-color:#1b1f3a; color:#e8eaf6}

/* =========================================================
   Detail Page Layout (Learn More)
========================================================= */
.glo-detail-grid{
  display:grid; grid-template-columns:260px 1fr 360px;
  gap:24px; align-items:start; width:min(var(--container),100%);
  margin-top: 2rem; margin-inline:auto;
}
.glo-toc{position:sticky; top:100px}
.glo-search{display:grid; grid-template-columns:1fr 44px; gap:8px; margin-bottom:12px}
.glo-search input{padding:10px; border:1px solid var(--border); border-radius:8px}
.glo-search button{border:1px solid var(--border); border-radius:8px; background:#fff}
.glo-toc-box{padding:16px; border:1px dashed #f1b84b; background:#fffaf0; border-radius:12px}
.glo-toc-box h3{margin:0 0 12px; font-size:14px; color:var(--primary)}
.glo-toc-box ul{list-style:none; margin:0; padding:0}
.glo-toc-box li a{display:block; padding:7px 0; color:var(--primary); text-decoration:none}
.glo-toc-box li a:hover{text-decoration:underline}

.glo-article{
  background:#fff; border-radius:12px; box-shadow:var(--shadow);
  border-left:6px solid var(--accent); width: 610px;
}
.glo-header{display:flex; justify-content:space-between; align-items:center; padding:22px 22px 8px}
.glo-term{margin:0; color:var(--primary); font-family:Georgia,'Times New Roman',serif}
.glo-ipa-pos{display:flex; gap:10px; align-items:center; color:#6b7280}
.glo-audio{border:0; background:transparent; color:#c49c0f; cursor:pointer}
.glo-bookmark{border:0; background:#fff; color:var(--primary); border-radius:10px; padding:8px 10px}
.glo-body{padding:0 22px 22px}
.glo-sec{padding:18px 0; border-top:1px solid #eee}
.glo-sec h3{margin:0 0 10px; color:var(--primary)}
.glo-bullets{padding-left:18px}
.glo-quotes .glo-quote{margin:10px 0; padding:14px 16px; border-radius:10px; background:#f6f7ff; border-left:5px solid #c9d1ff}
.glo-pills{display:flex; gap:12px; flex-wrap:wrap}
.glo-pills a{padding:8px 12px; border-radius:10px; background:var(--primary); color:#fff; text-decoration:none; font-weight:600}
.glo-nav-terms{display:flex; justify-content:space-between; gap:12px; margin-top:24px}
.glo-nav-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:var(--primary); color:#fff; text-decoration:none}
.glo-nav-btn:hover{background:var(--accent); color:#fff; border-color:var(--accent); filter:none}

.glo-aside{position:sticky; top:100px; display:flex; flex-direction:column; gap:18px; width: 280px;}
.glo-image img{width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow)}
.glo-side-card{padding:16px; border:1px solid #eef0f4; border-radius:12px; background:#fff; box-shadow:var(--shadow)}
.glo-side-card h4{margin:0 0 10px}
.glo-side-card ul{margin:0; padding-left:18px}
.glo-meta-row{display:flex; gap:10px; margin:8px 0; color:#374151}
.glo-tags{display:flex; flex-wrap:wrap; gap:8px}
.glo-tags .tag{background:#f2f4f8; border-radius:999px; padding:3px 10px; font-size:12px}

/* =========================================================
   Fixed Sidebar Layout
========================================================= */
.glossary-sidebar--fixed{
  position:fixed;
  left:0; top:96px; /* adjust to your header height */
  width:250px; height:calc(100vh - 96px);
  background:var(--card-bg); background-color:#fff8e1;
  border:1px dashed orange; border-radius:12px; box-shadow:none;
  z-index:50; padding:16px 14px; display:flex; flex-direction:column; overflow:hidden;
}
/* Shift main column */
.glossary-sidebar--fixed ~ .glossary-content{ margin-left:336px; background-color:#fff }
/* Inner scroll container */
.glossary-sidebar--fixed .glo-filter--scroll{
  overflow:auto; background-color:#fff8e1; height:100%; padding-right:6px; scroll-behavior:smooth;
}
/* Sticky inside scroller */
.glossary-sidebar--fixed .glo-filter--scroll .search-box{
  position:sticky; top:0; z-index:2; background:#fff8e1; padding-top:6px; margin-top:-6px;
  border-bottom:1px solid var(--border);
}
.glossary-sidebar--fixed .glo-filter--scroll h3{
  position:sticky; top:56px; z-index:1; background:#fff8e1; margin:0 0 8px; padding-top:6px;
}
/* Compact A–Z grid */
.glossary-sidebar--fixed .alphabet-grid{display:grid; grid-template-columns:repeat(6,40px); gap:8px}
/* Scrollbar */
.glossary-sidebar--fixed .glo-filter--scroll::-webkit-scrollbar{width:10px}
.glossary-sidebar--fixed .glo-filter--scroll::-webkit-scrollbar-track{background:#f3f4f6}
.glossary-sidebar--fixed .glo-filter--scroll::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:8px}
.glossary-sidebar--fixed .glo-filter--scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* =========================================================
   Responsive Layout
========================================================= */
@media (max-width:1024px){
  .glo-detail-grid{grid-template-columns:1fr; gap:18px}
  .glo-aside,.glo-toc{position:static}

  /* Fixed sidebar fallback */
  .glossary-sidebar--fixed{
    position:static; width:100%; height:auto; top:auto; overflow:visible;
    border-right:none; padding:1rem;
  }
  .glossary-sidebar--fixed .glo-filter--scroll{height:auto; overflow:visible}
  .glossary-sidebar--fixed .glo-filter--scroll .search-box,
  .glossary-sidebar--fixed .glo-filter--scroll h3{position:static; top:auto}
  .glossary-sidebar--fixed ~ .glossary-content{margin-left:0}
}
@media (max-width:768px){
  .glossary-container{flex-direction:column; padding:1rem}
  .glossary-sidebar{width:100%; position:relative; border-right:0; box-shadow:none; border-radius:0}
  .breadcrumb{font-size:13px}
}
@media (max-width:640px){
  .av-glo-term{font-size:22px}
  .av-glo-one{font-size:16px}
}

.pager{
  display:flex;
  flex-wrap: wrap;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:1rem 0 1.25rem;
  padding:.75rem 1rem;
  color:var(--pg-fg);
  background:var(--pg-bg);
  border-radius:var(--pg-radius);
  box-shadow:var(--pg-shadow);
}

/* numbers + arrows */
.pager .page-btn{
  appearance:none;
  border:1px solid var(--pg-btn-border);
  background:var(--pg-btn-bg);
  color:var(--pg-btn-fg);
  border-radius:10px;
  min-width:2.25rem;
  height:2rem;
  padding:0 .65rem;
  font:600 0.9rem/1 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .06s ease;
}
.pager .page-btn:hover:not([disabled]){
  background:var(--pg-btn-hover-bg);
  border-color:var(--pg-btn-hover-border);
  transform:translateY(-1px);
}
.pager .page-btn:active:not([disabled]){
  transform:translateY(0);
}
.pager .page-btn.is-current,
.pager .page-btn[aria-current="page"]{
  background:var(--pg-active-bg);
  color:var(--pg-active-fg);
  border-color:var(--pg-active-bg);
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 2px 8px rgba(0,0,0,.25);
  cursor:default;
}
.pager .page-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* the “…” pieces */
.pager .gap{
  color:var(--pg-gap);
  opacity:.95;
  padding:0 .25rem;
  user-select:none;
}

/* focus ring you can actually see */
.pager .page-btn:focus-visible{
  outline:3px solid #93c5fd;   /* sky-300 */
  outline-offset:2px;
}

/* small screens: make it scrollable horizontally */
@media (max-width:640px){
  .pager{
    padding:.5rem;
    gap:.35rem;
    overflow-x:auto;
    white-space:nowrap;
    border-radius:10px;
    -webkit-overflow-scrolling:touch;
  }
  .pager > *{ flex:0 0 auto; }
  .pager .page-btn{
    min-width:2rem;
    height:1.875rem;
    font-size:.85rem;
    padding:0 .5rem;
  }
}


/* make the bar stick at the bottom while you scroll long lists (opt-in) */
.pager.is-sticky{
  position:sticky;
  bottom:0;
  z-index:20;
}