/**
 * Hanzi Offline Theme
 * Custom theme for the hanzi offline learning application
 */

@font-face {
  font-family: VF-Canto-OnlyJyutping;
  src: url(/static/fonts/VF-Canto-OnlyJyutping.woff2);
  font-weight: normal;
  size-adjust: 150%;
}

:root {
  /* Typography */
  --font-family-base: Helvetica, sans-serif;
  --font-family-jyutping: VF-Canto-OnlyJyutping, Helvetica, sans-serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* FONT SIZE */
  --f-headline: 6rem;
  --f-subheadline: 5rem;
  --f1: 3rem;
  --f2: 2.25rem;
  --f3: 1.5rem;
  --f4: 1.25rem;
  --f5: 1rem;
  --f6: 0.875rem;
  --f7: 0.75rem;

  /* FONT WEIGHT */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* LINE HEIGHT */
  --lh-solid: 1;
  --lh-title: 1.25;
  --lh-tight: 1.2;
  --lh-copy: 1.5;
  --lh-base: 1.5;
  --lh-relaxed: 1.7;

  /* SPACING */
  --s0: 0;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 2rem;
  --s5: 4rem;
  --s6: 8rem;
  --s7: 16rem;

  /* BORDER RADIUS */
  --br0: 0;
  --br1: 0.125rem;
  --br2: 0.25rem;
  --br3: 0.5rem;
  --br4: 1rem;
  --br-100: 100%;
  --br-pill: 9999px;
  --br-none: 0;
  --br-sm: 0.25rem;
  --br-base: 0rem;
  --br-lg: 0.5rem;
  --br-xl: 1rem;
  --br-full: 9999px;

  /* BORDER WIDTH */
  --bw0: 0;
  --bw1: 0.125rem;
  --bw2: 0.25rem;
  --bw3: 0.5rem;
  --bw4: 1rem;
  --bw5: 2rem;

  /* Shadows */
  --shadow-sm: var(--black) 3px 3px 0px 0px;
  --shadow-base: var(--black) 3px 3px 0px 0px;
  --shadow-md: var(--black) 3px 3px 0px 0px;
  --shadow-lg: var(--black) 3px 3px 0px 0px;
  --shadow-xl: var(--black) 3px 3px 0px 0px;

  /* Hanzi-specific shadows */
  --purple-shadow: hsl(var(--purpleH), var(--purpleS), var(--purpleL)) 3px 3px 0px 0px;
  --blue-shadow: hsl(var(--blueH), var(--blueS), var(--blueL)) 3px 3px 0px 0px;
  --pink-shadow: hsl(var(--pinkH), var(--pinkS), var(--pinkL)) 3px 3px 0px 0px;

  /* Transitions */
  --transition-fast: 0.05s ease-in-out;
  --transition-base: 0.1s ease-in-out;
  --transition-slow: 0.2s ease-in-out;

  /* Layout */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1536px;

  /* Hanzi app layout customization */
  --main-max-width: var(--max-width-sm);
  --main-padding: var(--s3);
  --footer-padding: var(--s3) var(--s3);

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Grid and breakpoints */
  --grid-columns: 12;
  --container-padding: var(--s3);

  /* Navigation customization */
  --nav-max-width: var(--max-width-sm);

  /* Animation curves */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Neutral colors */
  --blackH: 0;
  --blackS: 0%;
  --blackL: 0%;

  --grayH: 0;
  --grayS: 0%;
  --grayL: 50%;

  --whiteH: 0;
  --whiteS: 0%;
  --whiteL: 100%;

  /* Hanzi app brand colors - converted from original RGB values */
  --purpleH: 273;
  --purpleS: 52%;
  --purpleL: 26%;

  --blueH: 218;
  --blueS: 100%;
  --blueL: 21%;

  --pinkH: 359;
  --pinkS: 100%;
  --pinkL: 21%;

  /* Additional brand colors */
  --greenH: 120;
  --greenS: 73%;
  --greenL: 75%;

  --redH: 0;
  --redS: 73%;
  --redL: 69%;

  --yellowH: 45;
  --yellowS: 93%;
  --yellowL: 47%;

  --orangeH: 25;
  --orangeS: 95%;
  --orangeL: 53%;

  /* Semantic colors */
  --errorH: var(--redH);
  --errorS: var(--redS);
  --errorL: var(--redL);

  --warningH: var(--orangeH);
  --warningS: var(--orangeS);
  --warningL: var(--orangeL);

  --infoH: var(--blueH);
  --infoS: var(--blueS);
  --infoL: var(--blueL);

  --successH: var(--greenH);
  --successS: var(--greenS);
  --successL: var(--greenL);

  /* Application colors */
  --backgroundH: var(--whiteH);
  --backgroundS: var(--whiteS);
  --backgroundL: var(--whiteL);

  --bodyH: var(--blackH);
  --bodyS: var(--blackS);
  --bodyL: 13%;

  --secondaryH: var(--grayH);
  --secondaryS: var(--grayS);
  --secondaryL: var(--grayL);

  --primaryH: var(--purpleH);
  --primaryS: var(--purpleS);
  --primaryL: var(--purpleL);

  /* Hanzi-specific background variants */
  --purple-bg-h: var(--purpleH);
  --purple-bg-s: 29%;
  --purple-bg-l: 93%;
  --purple-bg: hsl(var(--purple-bg-h), var(--purple-bg-s), var(--purple-bg-l));

  --blue-bg-h: var(--blueH);
  --blue-bg-s: 29%;
  --blue-bg-l: 93%;
  --blue-bg: hsl(var(--blue-bg-h), var(--blue-bg-s), var(--blue-bg-l));

  --pink-bg-h: var(--pinkH);
  --pink-bg-s: 29%;
  --pink-bg-l: 93%;
  --pink-bg: hsl(var(--pink-bg-h), var(--pink-bg-s), var(--pink-bg-l));

  /* Dots pattern backgrounds */
  --purple-dots-bg: #dfdbe5;
  --blue-dots-bg: #cfdbef;
  --pink-dots-bg: #efdbe5;
}

/**
 * Hanzi App Layout & Component Overrides
 */

/* Global layout customizations */
main {
  user-select: none;
}

main.home {
  max-width: var(--max-width-sm);
  padding: var(--s3);
}

main.study {
  max-width: unset;
  padding: var(--s0);
}

main.study .card-details {
  max-width: var(--max-width-sm);
  padding: var(--s3);
}

header.home {
  border-bottom: none;
  padding: var(--s3);
}

header nav {
  margin: auto auto;
  max-width: var(--nav-max-width);
}

/* Language-specific font classes */
.font-Jyutping {
  font-family: var(--font-family-jyutping);
}

.font-Pinyin {
  font-family: var(--font-family-base);
}

.font-zh_CN,
.font-zh_HK,
.font-zh_TW,
.font-zh_CN-answer,
.font-zh_TW-answer,
.font-zh_HK-answer {
  font-family: var(--font-family-base);
}

/* Navigation title */
nav .title {
  border-bottom: 4px solid var(--purple);
  color: var(--purple);
  font-size: var(--f3);
  font-weight: var(--fw-bold);
  margin: 0 var(--s3) 0 0;
  padding: 0;
}

/* Subject tile component overrides */
ui-card {
  border: 1px solid currentColor;
  border-radius: var(--br2);
  cursor: pointer;
  display: inline-block;
  font-size: var(--f5);
  line-height: 1.5;
  margin: var(--s1);
  padding: var(--s1);
  text-align: center;
  transition: all var(--transition-base);
}

ui-card[state="locked"] {
  opacity: 0.6;
}

ui-card[state="started"][type="character"] {
  border-color: var(--pink);
  color: var(--pink);
}

ui-card[state="started"][type="vocabulary"] {
  border-color: var(--purple);
  color: var(--purple);
}

ui-card[state="passed"][type="character"] {
  background-color: var(--pink-dots-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%236D0003' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  border: 1px solid transparent;
  color: var(--pink);
}

ui-card[state="passed"][type="vocabulary"] {
  background-color: var(--purple-dots-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  border: 1px solid transparent;
  color: var(--purple);
}

/* Study button components */
.study-buttons {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0 auto;
  max-width: var(--main-max-width);
  padding: var(--s2) 0 var(--s5) 0;
}

.study-button {
  text-align: center;
  width: 100%;
  max-width: var(--main-max-width);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.study-button button {
  border: none;
  border-radius: var(--br2);
  box-shadow:
    rgb(42, 42, 42) 1px 1px 0px,
    rgb(42, 42, 42) 2px 2px 0px,
    rgb(42, 42, 42) 3px 3px 0px;
  cursor: pointer;
  font-size: var(--f4);
  font-weight: var(--fw-medium);
  height: 3rem;
  max-width: var(--main-max-width);
  transition: all var(--transition-fast);
  width: 100%;
}

.study-button button:active {
  box-shadow: rgb(42, 42, 42) 1px 1px 0px;
  transform: translate(2px, 2px);
}

.study-button-disabled {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--br-base);
  color: var(--secondary);
  display: flex;
  font-size: var(--f4);
  height: 3rem;
  justify-content: center;
  opacity: 0.3;
  padding: var(--s3);
  width: 100%;
}

/* Settings page layout */
ui-settings-item {
  align-items: center;
  border-bottom: 1px solid currentColor;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--f6);
  justify-content: space-between;
  opacity: 0.1;
  padding: var(--s3);
  width: 100%;
}

ui-settings-item:last-child {
  border-bottom: none;
}

ui-settings-item label {
  display: block;
  font-weight: var(--fw-bold);
  padding: var(--s2) 0;
}

/* Search results styling */
ui-search-result {
  border-radius: var(--br2);
  cursor: pointer;
  display: block;
  list-style: none;
  overflow: hidden;
  padding: var(--s1);
  text-overflow: ellipsis;
  transition: background-color var(--transition-base);
  width: 100%;
}

ui-search-result:hover {
  background-color: rgba(231, 222, 237, 0.3);
}

/* Progress section styling */
ui-progress-section {
  display: block;
  padding-top: var(--s1);
}

ui-progress-section summary {
  font-weight: var(--fw-medium);
  margin-bottom: var(--s0);
}

ui-progress-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
}

/* Enhanced button styling */
button {
  box-shadow:
    rgb(42, 42, 42) 1px 1px 0px,
    rgb(42, 42, 42) 2px 2px 0px,
    rgb(42, 42, 42) 3px 3px 0px;
}

/* Color utility classes */
.purple {
  color: var(--purple);
}

.purple-border {
  border: 1px solid var(--purple);
  color: var(--purple);
}

.purple-bg {
  background-color: var(--purple-bg);
}

.purple-inverse {
  background-color: var(--purple);
  color: white;
}

.purple-dots {
  background-color: var(--purple-dots-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  border: 1px solid transparent;
  color: var(--purple);
}

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

.blue-border {
  border: 1px solid var(--blue);
  color: var(--blue);
}

.blue-bg {
  background-color: var(--blue-bg);
}

.blue-inverse {
  background-color: var(--blue);
  color: white;
}

.blue-dots {
  background-color: var(--blue-dots-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%2300AAFF' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  border: 1px solid transparent;
  color: var(--blue);
}

.blue-shadow {
  box-shadow: var(--blue) 3px 3px 0px 0px;
}

.pink {
  color: var(--pink);
}

.pink-border {
  border: 1px solid var(--pink);
  color: var(--pink);
}

.pink-bg {
  background-color: #efdbe5;
}

.pink-inverse {
  background-color: var(--pink);
  color: white;
}

.pink-dots {
  background-color: var(--pink-dots-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%236D0003' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  border: 1px solid transparent;
  color: var(--pink);
}

.gray {
  color: gray;
}

.white {
  color: white;
}

.green-bg {
  background-color: #90ee90;
}

.red-bg {
  background-color: #fa6969;
}

.blurred {
  text-shadow:
    rgb(231, 222, 237) 1px 1px,
    rgb(231, 222, 237) -1px -1px,
    rgb(231, 222, 237) -1px 1px,
    rgb(231, 222, 237) 1px -1px;
}

.purple-shadow {
  box-shadow: var(--purple) 3px 3px 0px 0px;
}

.pink-shadow {
  box-shadow: var(--pink) 3px 3px 0px 0px;
}

/* Study page headers */
.study-header {
  padding: var(--s1);
  text-align: center;
}

.study-header .left {
  cursor: pointer;
  float: left;
  font-weight: bold;
  padding: var(--s1);
}

.study-header .right {
  cursor: pointer;
  float: right;
  font-weight: bold;
  padding: var(--s1);
}

.study-header h1 {
  font-size: var(--f1);
  padding-bottom: var(--s1);
  padding-top: var(--s5);
}

.study-subheader {
  padding: var(--s2);
  font-weight: var(--fw-bold);
  font-size: var(--f4);
  text-align: center;
}

/* Tooltip component */
.tooltip {
  display: inline-block;
  position: relative;
}

.tooltip label {
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  background-color: #555;
  border-radius: 6px;
  bottom: 125%;
  color: #fff;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  text-align: left;
  transition: opacity 0.3s;
  visibility: hidden;
  width: 200px;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  border-color: #555 transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: '';
  left: 20%;
  position: absolute;
  top: 100%;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

/* Assignment styling */
.assignment {
  list-style: none;
}

.assignment:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Dialog styling */
dialog {
  z-index: 20;
}

dialog::backdrop {
  background: rgb(0, 0, 0);
}

/* Enhanced kbd styling */
kbd {
  background-color: rgb(231, 222, 237);
  border-radius: var(--br2);
  padding: var(--s1);
}

/* Stats section */
section.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s2);
  padding: var(--s0) var(--s3);
  padding-bottom: var(--s0);
  width: 100%;
}

.level h3,
.totals h3 {
  padding: var(--s0);
  margin-bottom: var(--s2);
}

.totals {
  text-align: right;
}

.level button {
  font-size: var(--f6);
  height: 2em;
  padding: 0;
  width: 2em;
}

.progress-header {
  align-items: start;
  display: flex;
  margin-bottom: 0;
  padding-bottom: 0;
}

.progress-header h3 {
  cursor: pointer;
  padding-right: var(--s3);
}

/* Grade system */
.grade-system .stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--s2) var(--s0) var(--s3) var(--s0);
  margin-top: var(--s0);
}

.grade-system h5 {
  margin: var(--s2) 0;
}

.grade-system .grade-level {
  cursor: pointer;
  border: 1px solid transparent;
  padding: var(--s0) var(--s1);
}

/* Study page layouts */
main.study {
  min-width: 300px;
}

main.study .done {
  bottom: 100px;
  left: 50%;
  padding: var(--s4);
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
}

main.study .done button {
  font-size: var(--f4);
  margin: auto var(--s3);
  width: 100%;
}

/* Card details */
.card-details {
  margin: auto auto;
  max-width: var(--main-max-width);
  padding: var(--s3);
}

.card-details details summary {
  cursor: pointer;
  font-weight: var(--fw-bold);
}

.card-details details h3 {
  padding: var(--s3);
  text-align: center;
}

.card-details details.example {
  padding: var(--s1);
}

/* Settings page */
header.settings {
  align-items: center;
  border-bottom: none;
  display: flex;
  justify-content: start;
  margin: var(--s0);
  padding: var(--s3);
  width: 100%;
}

header.settings h1 {
  margin: 0;
}

header.settings button {
  border: none;
  box-shadow: none;
  margin-right: var(--s3);
  padding: var(--s1);
  width: unset;
}

main.settings {
  align-items: start;
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: var(--main-max-width);
  padding: var(--s3);
}

main.settings .item {
  display: flex;
  padding: var(--s3);
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

main.settings .item label {
  font-weight: bold;
  padding: var(--s0) var(--s2);
  display: block;
}

main.settings .item input {
  width: unset;
}

main.settings .item input[type="number"] {
  border: 1px solid currentColor;
  padding: var(--s2);
  border-radius: var(--br2);
  display: block;
}

main.settings .full-button {
  padding: var(--s3);
  width: 100%;
  text-align: center;
}

main.settings .full-button button {
  font-size: var(--f4);
  width: 100%;
  max-width: var(--main-max-width);
  height: 3em;
}

main.settings select,
main.settings input {
  width: unset;
}

main.settings .half-button {
  justify-content: end;
}

.answer-input {
  border: none;
  text-align: center;
  width: 90%;
  max-width: var(--main-max-width);
  position: relative;
  margin: var(--s2) auto auto auto;
}

.answer-input p {
  font-size: var(--f4);
  border-radius: var(--br2);
  margin: var(--s2) var(--s3) var(--s2) var(--s3);
  padding: var(--s0);
  display: flex;
}

.answer-input input[type="text"] {
  height: 100%;
  font-size: var(--f4);
  text-align: center;
  padding: var(--s1);
  border-radius: var(--br2);
  outline: none;
  border: none;
  box-shadow: none;
  flex-grow: 1;
}

.answer-input input[type="submit"] {
  border: none;
  outline: none;
  box-shadow: none;
  right: 10px;
  background-color: transparent;
  font-weight: var(--fw-bold);
  padding: 0 var(--s3) 0 var(--s3);
  height: 100%;
  position: absolute;
  cursor: pointer;
}

.redo {
  margin: auto;
  display: block;
}

.search-item:hover {
  background-color: rgba(231, 222, 237, 0.3);
}