/* --- Variables --- */
:root {
  /* Colors - Polished Dark Slate & Mint Variant */
  --primary-bg-color: #0f1115;
  /* Soft dark charcoal instead of harsh ink black */
  --secondary-bg-color: #1a1d24;
  /* Surface layer for h1.titulus banner */
  --tertiary-bg-color: #252a35;
  /* Accent bar layout layer for p.roman blocks */
  --dark-gray-bg: #2d3341;
  --light-gray-bg: #414b5f;
  --text-color-light: #e2e8f0;
  /* Crisp slate-tinted white text to reduce eye fatigue */
  --text-color-dark: #68d391;
  /* Crisp mint green for accent texts instead of pure black */
  --hover-color: #fc8181;
  /* Soft coral hover highlight */
  --link-color: #63b3ed;
  /* Fluid link blue */
  --link-hover-color: #fc8181;
  /* Vibrant teal link hover state */
  --defunct-link-color: #4a5568;
  --accent-green: #83f28f;
  --accent-tan: #d2b48c;

  /* Font Families */
  --font-aptos-serif: 'Aptosserif', serif;
  --font-aptos-bold: 'Aptosbold', serif;
  --font-aptos-display: 'Aptosdisplay', serif;
  --font-aptos-plain: 'Aptosplain', sans-serif;
  --font-lib-serif: 'Libserif', sans-serif;
  --font-noto-kr: 'Notokr', sans-serif;
  --font-lucida: 'Lucida', sans-serif;
  --font-nastaliq: 'Nastaliq', sans-serif;
  --font-arabic: 'Arabic', sans-serif;
  --font-cambria-math: 'Cambria Math', serif;
  --font-arial: 'Arial', sans-serif;
  --font-jbmono: 'JBMono', monospace;
  --font-jblight: 'JBLight', serif;

  /* Spacing & Sizing */
  --border-radius-sm: .3em;
  --border-radius-lg: .5em;
  --padding-sm: 4px;
  --padding-md: 5px;
  --padding-lg: 6px;
  --margin-sm: 2px;
  --margin-md: 3px;
  --margin-lg: 5px;
  --margin-xl: 10px;
  --margin-xxl: 12px;
}

/* --- Font Definitions --- */
@font-face {
  font-family: Aptosserif;
  /* Bold typeface is default */
  src: url(/fonts/Aptos-Serif.ttf);
}

@font-face {
  font-family: Aptosbold;
  /* Bold typeface is default */
  src: url(/fonts/Aptos-Serif-Bold.ttf);
}

@font-face {
  font-family: Aptosdisplay;
  /* Regular typeface */
  src: url(/fonts/Aptos-Display-Bold.ttf);
}

@font-face {
  font-family: Aptosplain;
  /* Regular typeface */
  src: url(/fonts/Aptos-Display.ttf);
}

@font-face {
  font-family: Libserif;
  /* Lib Serif */
  src: url(/fonts/LiberationSerif-Regular.ttf);
}

@font-face {
  font-family: Notokr;
  /* Noto Korean (Google) */
  src: url(/fonts/NotoKR.ttf);
}

@font-face {
  font-family: Lucida;
  /* Lucida Sans Unicode */
  src: url(/fonts/lucida.ttf);
}

@font-face {
  font-family: Nastaliq;
  /* Nastaliq Script */
  src: url(/fonts/Nastaliq.ttf);
}

@font-face {
  font-family: Arabic;
  /* Arabic Script */
  src: url(/fonts/Arabic.ttf);
}

@font-face {
  font-family: JBMono;
  src: url(/fonts/JetBrainsMono-Bold.ttf);
}

@font-face {
  font-family: JBLight;
  src: url(/fonts/JetBrainsMono-Italic.ttf);
}

/* --- Base Styles --- */
body {
  background-color: var(--primary-bg-color);
  font-family: var(--font-aptos-plain);
  font-size: 1.1rem;
  color: var(--text-color-light);
  margin-bottom: 100px;
}

p {
  margin-left: 2vw;
}

a {
  color: var(--link-color);
  font-style: italic;
  font-weight: bold;
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-decoration: none;
}

ul li {
  font-size: 1.1rem;
  padding-bottom: 5px;
}

a:hover {
  color: var(--link-hover-color);
}

a.defunct {
  text-decoration: line-through;
  color: var(--defunct-link-color);
}

br {
  display: block;
  font-size: 2px;
  line-height: 2px;
}

hr {
  display: block;
  font-size: 2px;
  line-height: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input {
  font-family: var(--font-aptos-display);
  background-color: var(--input-bg-color);
  color: var(--text-color-dark);
  font-size: 1.25rem;
  border-radius: var(--border-radius-sm);
  padding: var(--padding-sm);
  transition: 300ms;
  margin-top: var(--margin-xl);
}

/* --- Buttons --- */
button {
  font-family: var(--font-aptos-bold);
  font-weight: bold;
  background-color: var(--input-bg-color);
  color: var(--text-color-dark);
  border-radius: var(--border-radius-sm);
  padding: var(--padding-md);
  transition: 300ms;
  margin-top: 9px;
}

button:hover {
  color: var(--hover-color);
}

/* --- Input Section --- */
.centered {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

#inputs .btn {
  border-radius: 6px;
  border: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

#inputs .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#diginput,
#calinput {
  background-color: var(--accent-tan) !important;
  color: #111;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-sm);
  max-width: 400px;
  margin: 25px auto;
  display: block;
}

.datainput {
  background-color: var(--accent-tan) !important;
  color: #111;
  font-size: 2rem !important;
  height:60px;
  font-weight: bold;
  text-align: left !important;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-sm);
  max-width: 400px;
  display: block;
}

/* --- Layout & Structure --- */
.centered {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

.card {
  margin-left: 4vw;
  margin-right: 4vw;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

table,
#inputs {
  max-width: 90vw;
}

/* --- Typography & Text Elements --- */
p.roman {
  font-family: var(--font-aptos-bold);
  font-weight: bold;
  background-color: var(--tertiary-bg-color);
  color: var(--text-color-dark);
  border-radius: var(--border-radius-sm);
  padding: var(--padding-lg);
  transition: 300ms;
  margin-top: var(--margin-xxl);
  width: 96vw;
  margin-right: 2vw;
  font-size: 1.5rem;
  text-decoration: underline;
}

p.roman:hover {
  color: var(--hover-color);
}

h1.titulus {
  font-size: 1.75rem;
  font-family: var(--font-aptos-display);
  background-color: var(--secondary-bg-color);
  color: var(--text-color-dark);
  border-radius: var(--border-radius-sm);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
  font-weight: bold;
}

.equation {
  font-size: 1.4em;
  font-family: var(--font-cambria-math);
  padding-left: 3px;
  padding-top: var(--margin-lg);
}

.chartname {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

.phonetic {
  font-family: sans-serif;
  font-size: 0.75em;
}

.phondate {
  font-family: var(--font-lucida);
  font-size: 0.65em;
}

/* Non-Latin Scripts */
.nonlat {
  font-family: var(--font-lib-serif);
  font-size: 1em;
}

.nastaliq {
  font-family: var(--font-nastaliq);
}

.arabic,
.hebrew {
  text-align: right;
  font-family: var(--font-arabic);
}

.korean {
  font-family: var(--font-noto-kr);
}

.cyrillic {
  font-family: var(--font-lucida);
}

.displine {
  font-family: var(--font-lucida);
  font-size: 1em;
  margin: 0px;
}

.conjdisp {
  font-family: var(--font-arial);
  font-size: 1.1em;
  margin: 0px;
}

.datedisp {
  font-family: var(--font-jbmono);
  font-size: .9em;
}

/* --- Tables --- */
td.latin {
  font-size: 16pt;
  font-family: var(--font-aptos-bold);
}

td.lflag {
  width: 55px;
  vertical-align: middle;
}

.ytable {
  font-size: 0.82em;
  background-color: var(--dark-gray-bg);
}

#infotable,
#datatable {
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

td.homelabels {
  font-size: 10pt;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

/* --- Result Table (JS Generated) --- */
#infotable {
  margin-top: 10px;
}

th.vlabel {
  color: #aaffaa;
}

.table {
  background-color: var(--card-bg);
  color: var(--text-main);
  border-radius: var(--border-radius);
  overflow: hidden;
  border-collapse: collapse;
}

/* --- Images --- */
img.inline {
  height: 28px;
  width: 28px;
  border-radius: var(--border-radius-sm);
  margin: var(--margin-lg);
}

img.lflag {
  height: 24px;
  width: 32px;
  border-radius: var(--border-radius-sm);
  margin: var(--margin-md);
  border: solid 1px black;
}

img.homeicons {
  height: 68px;
  width: 68px;
  object-fit: contain;
  border-radius: var(--border-radius-lg);
  margin: var(--margin-md);
  border: solid 1px black;
  transition: 0.2s ease;
  opacity: 0.85;
}

img.homeicons:hover,
img.homeicons:focus {
  height: 90px;
  width: 90px;
  transition: 0.2s ease;
  opacity: 1.0;
}

.lname {
  width: 60px;
  text-align: center;
}

/* --- Footer --- */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(15, 17, 21, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid #333;
  padding: 15px 0;
  text-align: center;
}

footer p {
  display: inline-block;
  margin: 0 20px;
  font-size: 1rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: var(--text-muted);
}

footer a {
  color: var(--accent-green);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.inline {
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}


/* Mobile Optimization */
@media (max-width: 600px) {
  .btn {
    font-size: 0.8rem;
  }

  #diginput {
    width: 100%;
  }
}

/* Lists & Textareas */
#listarea {
  width: 70vw;
  /* Default width */
}

@media (max-width: 600px) {
  #listarea {
    width: 100vw;
    /* Full width on small screens */
  }
}

/* all screens */
#listarea {
  border-radius: .75em;
  height: 40vh;
  background-color: #494949;
  color: #fff;
}

.btn {
  border-radius: .75em;
  padding-left: 5%;
  padding-right: 5%;
  border: 3px outset;
}

.btn:focus {
  border: 3px inset;
}

.outcard {
  width: 70vw;
  margin-left: 0;
}

/* Change div.vtable to table.vtable */
table.vtable {
  font-size: 0.95rem;
  font-family: Helvetica, Arial, Helvetica, sans-serif sans-serif !important;
}

table.vtable th {
  font-size: 1rem;
  color: green;
}