/* ovidhan.app — self-contained stylesheet, no CDN dependency */

/* ===== Variables ===== */
:root {
  --white: #fff;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;
  --yellow-100:#fef3c7; --amber-200:#fde68a;
  --red-600:#dc2626; --red-400:#f87171;
}

/* ===== Reset ===== */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--white);
  color:var(--slate-900);
  font-family:'Hind Siliguri',system-ui,-apple-system,sans-serif;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Footer fix: give main a min-height so on short pages (homepage) the
   footer ends up below the viewport fold. On long pages this is a no-op
   because the content already overflows. 14rem is a comfortable estimate
   for header (~5rem) + footer (~5rem) + a small buffer. */
#main-content { min-height: calc(100vh - 14rem); }
html.dark body { background:var(--slate-950); color:var(--slate-100); }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; background:none; border:none; padding:0; color:inherit; }
input { font-family:inherit; color:inherit; }
input::placeholder { color:var(--slate-400); opacity:1; }
html.dark input::placeholder { color:var(--slate-500); }
input:focus { outline:none; }
ul,ol { list-style:none; padding:0; margin:0; }
img,svg { display:block; max-width:100%; }
h1,h2,h3,h4,p { margin:0; }
mark { background:var(--yellow-100); color:inherit; padding:0; }
html.dark mark { background:rgba(113,63,18,.4); color:inherit; }

/* ===== Components ===== */
.font-display { font-family:'Tiro Bangla',Georgia,serif; font-weight:400; }
.font-sans { font-family:'Hind Siliguri',system-ui,-apple-system,sans-serif; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.fade-in { animation:fadeIn 250ms ease-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.skeleton {
  background:linear-gradient(90deg,var(--slate-100) 25%,var(--slate-200) 50%,var(--slate-100) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite;
}
html.dark .skeleton {
  background:linear-gradient(90deg,var(--slate-800) 25%,var(--slate-700) 50%,var(--slate-800) 75%);
  background-size:200% 100%;
}
@keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
.result-canvas { background:#fff; } /* always white, even in dark mode */
*:focus-visible { outline:2px solid var(--slate-900); outline-offset:2px; border-radius:2px; }
html.dark *:focus-visible { outline-color:var(--slate-100); }

/* Keyboard-hint badge used in the home tip */
.kbd {
  display:inline-block;
  padding:0 .35rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8em;
  line-height:1.5;
  color:var(--slate-700);
  background:var(--slate-100);
  border:1px solid var(--slate-300);
  border-bottom-width:2px;
  border-radius:.25rem;
  vertical-align:baseline;
}
html.dark .kbd { color:var(--slate-200); background:var(--slate-800); border-color:var(--slate-700); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===== Display ===== */
.block { display:block; }
.inline-block { display:inline-block; }
.inline-flex { display:inline-flex; }
.flex { display:flex; }
.grid { display:grid; }
.hidden { display:none; }

/* ===== Flex / Grid ===== */
.flex-col { flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }
.items-baseline { align-items:baseline; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.self-start { align-self:start; }
.gap-2 { gap:.5rem; }
.gap-3 { gap:.75rem; }
.gap-8 { gap:2rem; }
.grid-cols-1 { grid-template-columns:minmax(0,1fr); }
.space-y-1 > * + * { margin-top:.25rem; }
.space-y-6 > * + * { margin-top:1.5rem; }

/* ===== Position ===== */
.relative { position:relative; }
.absolute { position:absolute; }
.left-4 { left:1rem; }
.right-3 { right:.75rem; }
.top-1\/2 { top:50%; }
.-translate-y-1\/2 { transform:translateY(-50%); }
.z-20 { z-index:20; }

/* ===== Sizing ===== */
.w-4 { width:1rem; } .w-5 { width:1.25rem; } .w-8 { width:2rem; }
.w-9 { width:2.25rem; } .w-10 { width:2.5rem; } .w-12 { width:3rem; }
.w-full { width:100%; }
.h-4 { height:1rem; } .h-5 { height:1.25rem; } .h-8 { height:2rem; }
.h-9 { height:2.25rem; } .h-10 { height:2.5rem; } .h-12 { height:3rem; }
.h-auto { height:auto; }
.min-h-screen { min-height:100vh; }
.max-w-md { max-width:28rem; }
.max-w-2xl { max-width:42rem; }
.max-w-6xl { max-width:72rem; }

/* ===== Margin / Padding ===== */
.mx-auto { margin-left:auto; margin-right:auto; }
.-mx-2 { margin-left:-.5rem; margin-right:-.5rem; }
.mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.75rem; } .mt-4 { margin-top:1rem; }
.mt-8 { margin-top:2rem; } .mt-12 { margin-top:3rem; }
.mb-1 { margin-bottom:.25rem; }
.mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:.75rem; } .mb-4 { margin-bottom:1rem; }
.mb-5 { margin-bottom:1.25rem; } .mb-6 { margin-bottom:1.5rem; } .mb-8 { margin-bottom:2rem; }
.ml-2 { margin-left:.5rem; }
.p-5 { padding:1.25rem; }
.pb-2 { padding-bottom:.5rem; }
.px-0\.5 { padding-left:.125rem; padding-right:.125rem; }
.px-1\.5 { padding-left:.375rem; padding-right:.375rem; }
.px-2 { padding-left:.5rem; padding-right:.5rem; }
.px-2\.5 { padding-left:.625rem; padding-right:.625rem; }
.px-4 { padding-left:1rem; padding-right:1rem; }
.py-0\.5 { padding-top:.125rem; padding-bottom:.125rem; }
.py-1 { padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5 { padding-top:.375rem; padding-bottom:.375rem; }
.py-2 { padding-top:.5rem; padding-bottom:.5rem; }
.py-2\.5 { padding-top:.625rem; padding-bottom:.625rem; }
.py-3 { padding-top:.75rem; padding-bottom:.75rem; }
.py-4 { padding-top:1rem; padding-bottom:1rem; }
.py-6 { padding-top:1.5rem; padding-bottom:1.5rem; }
.py-8 { padding-top:2rem; padding-bottom:2rem; }
.py-10 { padding-top:2.5rem; padding-bottom:2.5rem; }
.py-12 { padding-top:3rem; padding-bottom:3rem; }
.pl-12 { padding-left:3rem; }
.pr-12 { padding-right:3rem; }

/* ===== Typography ===== */
.text-center { text-align:center; }
.text-xs { font-size:.75rem; line-height:1rem; }
.text-sm { font-size:.875rem; line-height:1.25rem; }
.text-base { font-size:1rem; line-height:1.5rem; }
.text-lg { font-size:1.125rem; line-height:1.75rem; }
.text-xl { font-size:1.25rem; line-height:1.75rem; }
.text-2xl { font-size:1.5rem; line-height:2rem; }
.text-3xl { font-size:1.875rem; line-height:2.25rem; }
.tracking-tight { letter-spacing:-.025em; }
.tracking-wide { letter-spacing:.025em; }
.tracking-wider { letter-spacing:.05em; }
.uppercase { text-transform:uppercase; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.underline { text-decoration:underline; }
.underline-offset-4 { text-underline-offset:4px; }
.text-inherit { color:inherit; }
.leading-relaxed { line-height:1.625; }
.break-words { overflow-wrap:break-word; word-break:break-word; }
.whitespace-pre-wrap { white-space:pre-wrap; }
.antialiased { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ===== Colors ===== */
.bg-white { background-color:var(--white); }
.bg-slate-100 { background-color:var(--slate-100); }
.bg-yellow-100 { background-color:var(--yellow-100); }
.text-slate-200 { color:var(--slate-200); }
.text-slate-300 { color:var(--slate-300); }
.text-slate-400 { color:var(--slate-400); }
.text-slate-500 { color:var(--slate-500); }
.text-slate-600 { color:var(--slate-600); }
.text-slate-700 { color:var(--slate-700); }
.text-slate-800 { color:var(--slate-800); }
.text-slate-900 { color:var(--slate-900); }
.text-white { color:#fff; }
.text-red-600 { color:var(--red-600); }

/* ===== Borders ===== */
.border { border:1px solid var(--slate-200); }
.border-b { border-bottom:1px solid var(--slate-200); }
.border-t { border-top:1px solid var(--slate-200); }
.border-slate-100 { border-color:var(--slate-100); }
.border-slate-200 { border-color:var(--slate-200); }
.border-slate-300 { border-color:var(--slate-300); }
.last\:border-b-0:last-child { border-bottom-width:0; }
.first\:pt-0:first-child { padding-top:0; }
.last\:pb-0:last-child { padding-bottom:0; }
.rounded { border-radius:.25rem; }
.rounded-sm { border-radius:.125rem; }
.rounded-md { border-radius:.375rem; }
.rounded-lg { border-radius:.5rem; }
.rounded-xl { border-radius:.75rem; }
.rounded-2xl { border-radius:1rem; }
.rounded-full { border-radius:9999px; }

/* ===== Misc ===== */
.cursor-pointer { cursor:pointer; }
.overflow-hidden { overflow:hidden; }
.opacity-0 { opacity:0; }
.opacity-40 { opacity:0.4; }
.shadow-sm { box-shadow:0 1px 2px 0 rgb(0 0 0 / .05); }
.shadow-lg { box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
.transition-colors { transition-property:color,background-color,border-color,fill,stroke; transition-duration:150ms; transition-timing-function:cubic-bezier(.4,0,.2,1); }
.transition-opacity { transition-property:opacity; transition-duration:150ms; transition-timing-function:cubic-bezier(.4,0,.2,1); }
.duration-300 { transition-duration:300ms; }

/* ===== Hover states ===== */
.hover\:bg-slate-50:hover { background-color:var(--slate-50); }
.hover\:bg-slate-100:hover { background-color:var(--slate-100); }
.hover\:text-slate-900:hover { color:var(--slate-900); }
.hover\:underline:hover { text-decoration:underline; }

/* ===== Focus states ===== */
.focus\:border-slate-900:focus { border-color:var(--slate-900); }
.focus\:ring-0:focus { box-shadow:none; }
.focus\:not-sr-only:focus {
  position:fixed; width:auto; height:auto; padding:.5rem 1rem; margin:0;
  overflow:visible; clip:auto; white-space:normal;
}
.focus\:fixed:focus { position:fixed; }
.focus\:top-3:focus { top:.75rem; }
.focus\:left-3:focus { left:.75rem; }
.focus\:z-50:focus { z-index:50; }
.focus\:px-4:focus { padding-left:1rem; padding-right:1rem; }
.focus\:py-2:focus { padding-top:.5rem; padding-bottom:.5rem; }
.focus\:bg-slate-900:focus { background-color:var(--slate-900); }
.focus\:text-white:focus { color:#fff; }
.focus\:rounded-md:focus { border-radius:.375rem; }

/* ===== Dark mode ===== */
html.dark .dark\:bg-slate-800 { background-color:var(--slate-800); }
html.dark .dark\:bg-slate-900 { background-color:var(--slate-900); }
html.dark .dark\:bg-slate-950 { background-color:var(--slate-950); }
html.dark .dark\:bg-yellow-900\/40 { background-color:rgba(113,63,18,.4); }
html.dark .dark\:border-slate-700 { border-color:var(--slate-700); }
html.dark .dark\:border-slate-800 { border-color:var(--slate-800); }
html.dark .dark\:text-slate-100 { color:var(--slate-100); }
html.dark .dark\:text-slate-200 { color:var(--slate-200); }
html.dark .dark\:text-slate-300 { color:var(--slate-300); }
html.dark .dark\:text-slate-400 { color:var(--slate-400); }
html.dark .dark\:text-slate-500 { color:var(--slate-500); }
html.dark .dark\:text-slate-600 { color:var(--slate-600); }
html.dark .dark\:text-red-400 { color:var(--red-400); }
html.dark .dark\:text-white { color:#fff; }
html.dark .dark\:block { display:block; }
html.dark .dark\:hidden { display:none; }
html.dark .dark\:hover\:bg-slate-800:hover { background-color:var(--slate-800); }
html.dark .dark\:hover\:text-slate-100:hover { color:var(--slate-100); }
html.dark .dark\:focus\:border-slate-200:focus { border-color:var(--slate-200); }

/* ===== Responsive: sm (>= 640px) ===== */
@media (min-width: 640px) {
  .sm\:inline { display:inline; }
  .sm\:flex-row { flex-direction:row; }
  .sm\:items-end { align-items:flex-end; }
  .sm\:justify-between { justify-content:space-between; }
  .sm\:gap-4 { gap:1rem; }
  .sm\:px-6 { padding-left:1.5rem; padding-right:1.5rem; }
  .sm\:py-12 { padding-top:3rem; padding-bottom:3rem; }
  .sm\:mb-10 { margin-bottom:2.5rem; }
  .sm\:rounded-2xl { border-radius:1rem; }
  .sm\:text-lg { font-size:1.125rem; line-height:1.75rem; }
  .sm\:text-xl { font-size:1.25rem; line-height:1.75rem; }
  .sm\:text-4xl { font-size:2.25rem; line-height:2.5rem; }
  .sm\:text-5xl { font-size:3rem; line-height:1; }
}

/* ===== Responsive: lg (>= 1024px) ===== */
@media (min-width: 1024px) {
  .lg\:gap-10 { gap:2.5rem; }
  .lg\:grid-cols-\[1fr_280px\] { grid-template-columns:minmax(0,1fr) 280px; }
  .lg\:sticky { position:sticky; }
  .lg\:top-6 { top:1.5rem; }
}

/* ===== Sub-entry highlight (deep-link target) ===== */
.sub-entry {
  scroll-margin-top: 1.5rem;
  transition: background-color .4s ease;
  border-radius: .375rem;
  padding-inline: .5rem;
}
.sub-entry--highlight { animation: subEntryFlash 2.2s ease; }
@keyframes subEntryFlash {
  0%   { background-color: var(--amber-200); }
  100% { background-color: transparent; }
}
html.dark .sub-entry--highlight { animation: subEntryFlashDark 2.2s ease; }
@keyframes subEntryFlashDark {
  0%   { background-color: rgba(180, 83, 9, .45); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-entry { transition: none; }
  .sub-entry--highlight { animation: none; }
}

/* ===== Hamburger menu dropdown ===== */
.menu-panel {
  position: absolute;
  top: calc(100% - 1px);
  right: 1rem;
  z-index: 40;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  overflow: hidden;
  animation: menuFade .15s ease-out;
}
html.dark .menu-panel {
  background: var(--slate-900);
  border-color: var(--slate-700);
}
@keyframes menuFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.menu-panel ul { list-style: none; padding: .5rem 0; margin: 0; }
.menu-panel li { margin: 0; }
.menu-panel a {
  display: block;
  padding: .625rem 1rem;
  color: var(--slate-800);
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  font-size: 1rem;
  transition: background-color .15s ease, color .15s ease;
}
html.dark .menu-panel a { color: var(--slate-200); }
.menu-panel a:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}
html.dark .menu-panel a:hover {
  background: var(--slate-800);
  color: var(--slate-100);
}
.menu-panel a[aria-current="page"] {
  background: var(--slate-100);
  color: var(--slate-900);
  font-weight: 500;
}
html.dark .menu-panel a[aria-current="page"] {
  background: var(--slate-800);
  color: var(--slate-100);
}
@media (max-width: 640px) {
  .menu-panel { right: .75rem; left: auto; min-width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

/* ===== Word of the Day card (sidebar) ===== */
#word-of-day .wotd-word-link:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Article pages (about, contact) ===== */
.prose-article p { margin-bottom: 1rem; }
.prose-article a { text-decoration: underline; text-underline-offset: 4px; }
.prose-article a:hover { color: var(--slate-900); }
html.dark .prose-article a:hover { color: var(--slate-100); }
.prose-article ul.list-disc { list-style: disc; }
.prose-article .pl-6 { padding-left: 1.5rem; }
.prose-article .space-y-2 > * + * { margin-top: .5rem; }
.prose-article .mt-10 { margin-top: 2.5rem; }

#share-btn { position: relative; }
#share-btn.copied {
  border-color: var(--slate-900);
  color: var(--slate-900);
}
html.dark #share-btn.copied {
  border-color: var(--slate-200);
  color: var(--slate-200);
}
.copy-toast {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--slate-900);
  color: #fff;
  font-size: .75rem;
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  padding: .35rem .6rem;
  border-radius: .375rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.copy-toast::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--slate-900);
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
html.dark .copy-toast { background: var(--slate-100); color: var(--slate-900); }
html.dark .copy-toast::after { border-top-color: var(--slate-100); }
@media (prefers-reduced-motion: reduce) {
  .copy-toast { transition: none; }
}

/* ===== Multi-sense entry layout ===== */
.sense {
  /* Each sense block sits a little inset so the visual hierarchy reads:
     word -> image -> senses (each labelled "অর্থ 1", "অর্থ 2", ...). */
}
.sense + .sense {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--slate-200);
}
html.dark .sense + .sense { border-top-color: var(--slate-800); }
.sense-number {
  font-feature-settings: "tnum";
  white-space: nowrap;
}