@charset "UTF-8";
/* ............................................. */
/* .................. Fonts .................... */
/* ............................................. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Kohinoor Devanagari";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Kohinoor Devanagari"), url("/fonts/KohinoorDevanagari-Medium.woff") format("woff");
}
@font-face {
  font-family: "Kohinoor Devanagari";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Kohinoor Devanagari"), url("/fonts/KohinoorDevanagari-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Kohinoor Devanagari";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Kohinoor Devanagari"), url("/fonts/KohinoorDevanagari-Bold.woff") format("woff");
}
/*
 * This file contains all global styles that are shared across the application.
 * It includes:
 * - CSS Variables and Design System
 * - Base HTML element styles
 * - Typography and font definitions
 * - Layout utilities and common classes
 * - Animation and transition definitions
 * - Responsive breakpoints and media queries
*/
/* ............................................. */
/* .................. Global ................... */
/* ............................................. */
/*
 * Color palette, spacing, typography scale, and other design tokens
 * These variables ensure consistency across all components and pages
*/
:root {
  /* TYPOGRAPHY */
  font-family: "InterVariable", "Kohinoor Devanagari", "Inter", sans-serif;
  font-size: 17px;
  font-feature-settings: "calt" on, "tnum" on, "case" on, "ccmp" on, "ss01" on, "cv01" on, "cv05" on, "cv08" on, "cv10" on, "cv11" on !important;
  text-rendering: optimizespeed;
  font-optical-sizing: auto;
  text-size-adjust: none;
  /* COLORS */
  --TEST-COLOR: hsl(222.2 47.4% 11.2%);
  --color-background: rgb(248, 250, 252);
  --color-background-muted: rgb(241, 245, 249);
  --color-background-hover: var(--color-background-muted);
  --color-text: rgb(15, 23, 42);
  --color-text-muted: rgb(100, 116, 139);
  --color-primary: rgb(36, 99, 235);
  --color-border: rgb(226, 232, 240);
  --color-white: white;
  --color-blue: rgb(66 133 244 / 1);
  --color-blue-30: rgb(66 133 244 / 0.3);
  --color-blue-10: rgb(66 133 244 / 0.1);
  --color-green: rgb(52 168 83 / 1);
  --color-green-30: rgb(52 168 83 / 0.3);
  --color-green-10: rgb(52 168 83 / 0.1);
  --color-red: rgb(234 67 53 / 1);
  --color-red-30: rgb(234 67 53 / 0.3);
  --color-red-10: rgb(234 67 53 / 0.1);
  /* RADIUS */
  --radius: 0.5rem;
  --radius-full: 9999px;
  --box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --ionic-easing: cubic-bezier(0.36, 0.66, 0.04, 1);
  /* Dynamic Paddings */
  --dyn-padding-inline: 1rem;
  --dyn-padding-block: 1rem;
}
@media (max-width: 480px) {
  :root {
    --dyn-padding-inline: 0.5rem;
    --dyn-padding-block: 0.5rem;
  }
}
@media (max-width: 400px) {
  :root {
    font-size: 16px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-width: 0;
  /* ^ Now only need to change width to apply border to anything */
  border-style: solid;
  border-color: var(--color-border);
}

:focus-visible, .focusable:focus-within {
  outline: none;
  --ring-offset: 2px;
  --ring-width: 2px;
  box-shadow: 0 0 0 var(--ring-offset) var(--color-background), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--color-primary);
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  width: 100%;
  max-width: 800px;
  min-height: 100vh;
  /* TODO: 100dvh OR 100svh, make it work properly with browser address bar/chrome custom tab */
  padding: 2rem var(--dyn-padding-inline);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* TODO: setBodyState(".quiz-active") & unsetBodyState(".quiz-active") */
main {
  flex: 1;
}

/* ............................................. */
/* ............ BASE HTML ELEMENTS ............. */
/* ............................................. */
hr {
  width: calc(100% - 1rem);
  border: none;
  box-shadow: 0 0 0 1px var(--color-border);
  margin: 0.25rem auto;
}

a {
  touch-action: manipulation;
}

img {
  display: block;
}

svg {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

code, pre {
  font-family: "Google Sans Code", "Kohinoor Devanagari", monospace;
}

input,
textarea,
select,
button {
  font: inherit;
  /* line-height: calc(1em + .7rem); */
  color: inherit;
  background-color: var(--color-background-muted);
  border-width: 2px;
  /* TODO: make border-width 2px everywhere */
  border-radius: var(--radius);
}
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  opacity: 0.3;
  opacity: 0.4;
  cursor: not-allowed;
}

input,
textarea {
  background-color: var(--color-background);
}

select,
button {
  user-select: none;
}

textarea {
  font-size: 0.75rem;
  font-family: "Google Sans Code", "JetBrains Mono", monospace, "InterVariable", "Kohinoor Devanagari", "Inter", sans-serif;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  white-space: nowrap;
  tab-size: 2;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

select {
  appearance: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") calc(100% - 6px) center/24px no-repeat var(--color-background-muted); /* stroke color is var(--color-text-muted) rgb(100, 116, 139) */
  padding: 0.35rem 2rem 0.35rem 0.5rem;
  border-width: 1px;
  cursor: pointer;
}

input[type=search] {
  appearance: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m17 17l4 4m-2-10a8 8 0 1 0-16 0a8 8 0 0 0 16 0'/></svg>") 0.5rem center/20px no-repeat var(--color-background-muted);
  padding: 0.5rem 0.5rem 0.5rem 2.25rem;
}

button {
  font-weight: 500;
  font-size: 0.875rem; /* TODO: REMOVE */
  line-height: 1.25rem;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  /* border-radius: calc(var(--radius) - 2px); */
  /* transition-property: color, background-color, border-color;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-duration: .15s; */
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-width: 0px;
}

.btn-small {
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

/* ............................................. */
/* ............................................. */
h1 {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-bottom: 0.5rem;
}

h2 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  /* margin-bottom: .5rem; */
}

h3 {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  /* margin-bottom: .5rem; */
}

/* ............................................. */
/* ................. UTILITIES ................. */
/* ............................................. */
.text-muted {
  color: var(--color-text-muted);
}

.text-blue {
  color: var(--color-blue);
}

.text-green {
  color: var(--color-green);
}

.text-red {
  color: var(--color-red);
}

/* ............................................. */
/* .............. LAYOUT UTILITIES ............. */
/* ............................................. */
.flex,
.flex-col {
  display: flex;
  gap: 1rem;
}

.flex-col {
  flex-direction: column;
  gap: 1rem;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* ............................................. */
/* ......... ANIMATIONS & TRANSITIONS .......... */
/* ............................................. */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* ............................................. */
/* ................. ELEMENTS .................. */
/* ............................................. */
.card {
  background-color: var(--color-white);
  padding: 1rem;
  border-radius: var(--radius);
  animation: fade-in 0.3s ease-out;
  box-shadow: var(--box-shadow);
}

/* ............................................. */
/* .............. CUSTOM CHECKBOX .............. */
/* ............................................. */
.custom-checkbox {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: var(--color-background-muted);
  border-radius: 3px;
  outline: 2px solid var(--color-border) !important;
  outline-offset: -2px;
  transition: box-shadow 200ms ease;
  cursor: pointer;
}
.custom-checkbox input {
  opacity: 0;
}
.custom-checkbox .checkmark {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") var(--color-primary) center/15px no-repeat;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 200ms ease;
}
.custom-checkbox input:checked + .checkmark {
  opacity: 1;
}
.custom-checkbox input:disabled + .checkmark {
  opacity: 0.3;
  opacity: 0.4;
  cursor: not-allowed;
}

/* ............................................. */
/* ............................................. */
/* ............................................. */
/* ............................................. */
/* ................. ACCORDION ................. */
/* ............................................. */
.accordion {
  background-color: var(--color-white);
  border-width: 1px;
  border-radius: var(--radius);
  /* margin: 1rem 0; */
  overflow: clip;
  overflow-clip-margin: 5px;
  interpolate-size: allow-keywords;
}

.accordion-button {
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background-color: var(--color-white);
  padding: 1rem;
  border-width: 0;
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
}
.accordion-button:hover {
  background-color: var(--color-background-muted);
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content-wrapper {
  /* ⚠️ NO PADDING *ON* CONTENT ELEMENT */
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: clip;
  transition: height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
  transition-behavior: allow-discrete;
}

.accordion.active .accordion-content-wrapper {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.accordion-content {
  padding: 0.75rem 1rem;
  border-width: 2px 0 0;
}

/* ............................................. */
/* ................. TABS ...................... */
/* ............................................. */
.tab {
  background-color: var(--color-white);
  border-radius: var(--radius);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.tab-buttons {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
}

.tab-button {
  flex: 1;
  font-size: 1rem;
  color: var(--color-text-muted);
  background: var(--color-background);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: none;
}

.tab-button:hover {
  color: var(--color-text);
  background-color: var(--color-background-muted);
}

.tab-button.active {
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-blue-10);
}

.tab-button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 90%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 3px;
}

.tab-contents {
  padding: 0.5rem var(--dyn-padding-inline) 1rem;
}

.tab-content-item {
  display: none;
  height: 400px;
  max-height: 400px;
}

.tab-content-item.active {
  display: block; /* TODO */
  display: flex;
  animation: fade-in 0.3s ease-out;
}