:root {
	--color-bg: rgb(244, 243, 238);
	--color-surface: #ffffff;
	--color-text: #2b2b28;
	--color-text-muted: #6b6a63;
	--color-border: #e2ded2;
	--color-primary: #1f9d7c;
	--color-primary-hover: #178067;
	--color-primary-soft: #e5f4ef;
	--color-danger: #c0392b;
	--radius-sm: 6px;
	--radius-md: 10px;
	--shadow-sm: 0 1px 3px rgba(30, 27, 20, 0.08);
	--shadow-md: 0 6px 20px rgba(30, 27, 20, 0.10);
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-reading: 1.3rem;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	max-width: 100%;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	margin: 0;
	padding: 0 var(--space-3);
	max-width: 100%;
	overflow-x: hidden;
}

img, svg, video {
	max-width: 100%;
	height: auto;
}

div {
  font-size: 20px;
}
button {
  font-size: 16px;   /* or whatever size you prefer */
}

/* Buttons: unify every clickable action (both <button> and submit/button inputs) */
button,
input[type="submit"],
input[type="button"] {
	background-color: var(--color-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	cursor: pointer;
	font-family: var(--font-sans);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--color-primary-hover);
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-primary-soft);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.home-button {
  display: inline-block;       /* inline-block works better for a single button */
  padding: 8px 16px;          /* space inside the button */
  background-color: var(--color-primary-soft);   /* button background */
  color: var(--color-primary-hover);                /* text color */
  font-size: 16px;
  font-family: var(--font-sans);
  text-decoration: none;       /* remove underline */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);          /* rounded corners */
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.home-button:hover {
  background-color: var(--color-primary);   /* hover effect */
  color: #ffffff;
}

#inputRow {
  display: flex;
  align-items: left;
  gap: 10px;
  max-width: 300px;         /* Limit width on large screens */
}

#FillSentence {
  flex: 1;
  padding: 8px;
}

#buttonContainer button {
  padding: 8px 12px;
}

/* Label styling (optional) */
.submitword-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.input-button-row-submitword {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 600px;
  width: 100%;
  margin-left: 0; /* Align to the left */
  margin-right: auto;
}

/* flex-basis values sum to well over 100% on purpose: with flex-wrap they
   act as "wrap before this gets cramped" hints rather than fixed widths,
   so the row reflows onto extra lines instead of overflowing its column. */
.input-button-row-submitword input.text-input-submitword {
  flex: 1 1 220px;
}

.input-button-row-submitword button.action-button-submitword {
  flex: 1 1 160px;
}

.input-button-row {
  margin-top: 6px;
}

/* Card-style grouping for the "Introduce information" form: each field
   (Meaning/Sentence/Label/Phonetic) gets more breathing room than the
   6px default plus a subtle divider, so the form reads as distinct
   field groups rather than one dense block. Scoped to this form rather
   than changing .input-button-row globally, since that class is shared
   with archive.html/listensentences.html/practicesentences.html. */
#InformationContainer .input-button-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

#InformationContainer .input-button-row:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* "Introduce information in the registry" - a plain <h3> otherwise
   renders at the browser default ~1.17em against this container's own
   20px (div{font-size:20px}) context, noticeably bigger/heavier than the
   field labels right under it for what's meant to read as a section
   subheading rather than a page title. */
#InformationContainer h3 {
  font-size: 21px;
}

.input-button-row label {
  display: block;       /* puts label above input */
  margin-bottom: 4px;   /* small gap between label and input */
}

.input-button-row input {
  margin: 0;            /* remove default margin */
  padding: 6px 8px;     /* control inside spacing */
  box-sizing: border-box;
}

.required-marker {
  color: var(--color-danger);
}

/* Label + a small action button/toggle on the same line, e.g. the
   Sentence label next to Check Grammar, or the Label heading next to
   the New checkbox. */
.label-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.label-action-row label {
  margin-top: 0; /* overrides the sitewide label{margin-top:1rem} rule, which otherwise throws off align-items: center in this row */
  margin-bottom: 0; /* .input-button-row label's own margin isn't needed here */
  line-height: 1; /* deterministic box height so align-items: center lines it up exactly with its button/toggle */
}

/* listensentences.html's "just listen" gap slider (3s-10s, 5s default) -
   same label-next-to-control idea as .label-action-row above, just its
   own class since a range input plus its live value label is a slightly
   different shape than a single button/toggle. */
.listen-loop-gap-row {
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.listen-loop-gap-row label {
  margin-top: 0;
  margin-bottom: 0;
}

/* Check Grammar sits directly beside the Sentence label - match its
   font-size (1em inherits the label's 20px) and tighten the line-height
   so the two read as the same size instead of the button looking
   noticeably smaller. */
.label-action-row .action-button-small {
  font-size: 1em;
  line-height: 1;
  padding: 4px 12px;
}

/* "New" checkbox next to the Label heading - overrides
   .input-button-row label's block display so the checkbox and its own
   label sit inline with each other rather than stacking. */
.new-label-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.new-label-toggle label {
  display: inline;
  margin-top: 0; /* overrides the sitewide label{margin-top:1rem} rule */
  margin-bottom: 0;
  font-weight: normal;
  line-height: 1;
}

/* Sized in em so the checkbox always matches the height of the "New"
   text sitting next to it, instead of a fixed pixel size that only
   happens to line up at one font-size. font-size is set explicitly
   first since form controls don't inherit it from their surrounding
   text by default (the browser's UA stylesheet gives <input> its own
   base font-size), so 1em would otherwise resolve against that instead
   of the 20px the "New" text actually renders at. */
.new-label-toggle input[type="checkbox"] {
  font-size: inherit;
  width: 1em;
  height: 1em;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Visible cue for a required field left empty on blur. */
.field-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

.field-error-message {
  display: none;
  color: var(--color-danger);
  font-size: 0.85em;
  margin-top: 4px;
}

.field-error-message.visible {
  display: block;
}
/* Input text + button */
/* Label above the row */
.sentence-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

/* Row with select + input */
.label-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
}

/* Input takes most of the space */
.label-row select {
  flex: 1 1 50%;
}

/* Button stays on the right */
.label-row .text-input {
  flex: 1 1 50%;
}

/* Row with a text input + one small action button - the Sentence field's
   input + Check Grammar, and the Sentence Meaning field's input + Get
   Meaning, share this same layout. Get Phonetics sits below its row
   instead (see .sentence-phonetics-button) so the input keeps as much
   width as possible on narrow/phone screens. */
.sentence-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
}

/* Input takes almost all the space, leaving just enough room to write */
.sentence-row .text-input {
  flex: 1;
}

/* Button stays small and fixed-width on the right - narrow enough that
   "Check Grammar"/"Get Meaning" wrap onto two lines, leaving more of the
   row for the input beside them. */
.sentence-row .action-button {
  flex: 0 0 auto;
  width: 64px;
  padding: 6px 8px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}

/* Below the Sentence row rather than inside .sentence-row - see the HTML
   comment in main.html for why. */
.sentence-phonetics-button {
  margin-top: 10px;
}

.text-input {
  padding: 8px;
  flex: 1;
  max-width: 500px;
  box-sizing: border-box;
  resize: vertical; /* allows user to resize vertically */
  min-height: 50px;
  white-space: pre-wrap; /* ensures wrapping at spaces and line breaks */
  overflow-wrap: break-word; /* wraps long words */
}

/* main.html's Sentence/Sentence Meaning fields - height is driven by the
   "input" listener in js/pages/main.js (grows to fit as the text wraps
   onto more lines) rather than the user's own manual drag, and
   overflow-y: hidden keeps that measurement (scrollHeight) accurate and
   avoids an internal scrollbar flashing on every keystroke. Text itself
   is sized to match #sentencePhoneticsResult/#corrected/#explanation
   below (the Get Phonetics/Check Grammar results) rather than the
   browser's own much smaller default form-control size, since a
   textarea doesn't inherit font-size from the page the way a <div>
   does. */
.auto-grow-textarea {
  resize: none;
  overflow-y: hidden;
  font-size: var(--font-size-reading);
  line-height: 1.5;
}


.translation-output {
  padding: 8px;
  flex: 1;
  max-width: 300px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  resize: vertical; /* allows user to resize vertically */
  min-height: 50px;
  white-space: pre-wrap; /* ensures wrapping at spaces and line breaks */
  overflow-wrap: break-word; /* wraps long words */
}


.action-button {
  padding: 8px 16px;
  cursor: pointer;
  min-height: 50px;
}

.action-button-small {
  padding: 6px 12px;
  min-height: auto;
  font-size: 13px;
}

/* Softer than the solid-primary buttons elsewhere, e.g. Check Grammar,
   which sits right under the sentence input and doesn't need to compete
   visually with the primary Save action. Same soft/hover pairing as
   .home-button. */
.action-button-soft {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.action-button-soft:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* Form fields: consistent border/radius/focus across every page */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font-family: var(--font-sans);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* "Learning: [dropdown]" on main.html - lets a student switch between
   their saved LearningLanguages inline with the surrounding 20px text,
   instead of stacking like the full-width parameters-page selects. */
.learning-language-select {
  width: auto;
  font-size: 1rem;
  padding: 2px 6px;
  margin-top: 0;
}

  .language-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
  }

  .language-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
    flex: 1 1 220px;
  }

  .language-box {
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    background-color: var(--color-surface);
  }

  .swap-button {
    padding: 6px 12px;
    font-size: 18px;
    cursor: pointer;
    height: 40px;
    flex: 0 0 auto;
  }

  input[type="text"] {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
	font-size: 20px
  }


  .deactivated {
    opacity: 0.5;              /* faded look */
    pointer-events: none;      /* block interaction */
  }

  .disabled-container {
	  	max-width: 600px;
		border: 1px solid var(--color-border);
		padding: var(--space-4);
		border-radius: var(--radius-md);
		background-color: var(--color-surface);
		box-shadow: var(--shadow-sm);
		opacity: 0.5; /* visually show it's inactive */
		pointer-events: none; /* prevent interaction */
  }
  .active-container {
	  	max-width: 600px;
		border: 1px solid var(--color-border);
		padding: var(--space-4);
		border-radius: var(--radius-md);
		background-color: var(--color-surface);
		box-shadow: var(--shadow-sm);
		opacity: 1;
		pointer-events: auto;
   }

/* Daily objective progress bar */
.progress-bar {
  width: 100%;
  max-width: 300px;
  height: 10px;
  margin-top: 8px;
  background-color: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background-color: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-bar.completed .progress-bar-fill {
  background-color: var(--color-primary-hover);
}

/* Daily-objective-reached indicator (js/progress.js's
   showDailyProgressStar/hideDailyProgressStar) - positioned via the bar's
   own bounding rect and appended to <body>, so it needs its own fixed
   placement rather than inheriting layout from wherever it's inserted.
   Stays visible for as long as DailyPoints is at or above DailyObjective;
   .hidden (shared style.css) hides it again once that's no longer true. */
.daily-progress-star {
  position: absolute;
  transform: translateY(-50%);
  font-size: 1.4em;
  pointer-events: none;
  z-index: 1000;
}

/* Persistent sentence-audio player (js/words.js's playSentenceAudio) -
   appended straight to <body>, so it needs its own centering instead of
   inheriting whatever alignment its append point happens to have. */
.sentence-audio-player {
  display: block;
  margin: 16px auto;
}

/* Larger, more readable type for the word/sentence content itself */
#resultRandomSentence,
#CorrectSentence,
#OldWord,
#resultSentenceMissingWord,
#resultGetDefinition,
#resultGetSentence,
#sentencePhoneticsResult,
#pinyinSentence,
.language-box,
.translation-output {
  font-size: var(--font-size-reading);
  line-height: 1.5;
}

/* Correct/incorrect answer feedback in practice/listen modes */
.answer-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.answer-feedback.correct {
  color: var(--color-primary);
}

.answer-feedback.incorrect {
  color: var(--color-danger);
}

@keyframes flash-correct {
  0% {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 157, 124, 0.5);
  }
  100% {
    border-color: var(--color-border);
    box-shadow: none;
  }
}

@keyframes flash-incorrect {
  0% {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.5);
  }
  100% {
    border-color: var(--color-border);
    box-shadow: none;
  }
}

.input-flash-correct {
  animation: flash-correct 0.8s ease-out;
}

.input-flash-incorrect {
  animation: flash-incorrect 0.8s ease-out;
}

.nav {
  width: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
  font-family: var(--font-sans);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Make the container full-width */
.nav-container {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

/* Navigation links - the language switcher (#source-language, see nav.html)
   is its own <li> at the end of this same list now, not a separate sibling
   of the <ul>, so it wraps only when it truly doesn't fit on the current
   line instead of always dropping to its own standalone line below
   everything else. */
.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

/* margin-left: auto pushes this (and nothing else, since it's the last
   item) to the right edge of whichever line it lands on - on desktop,
   where the whole list fits on one line, that's the nav bar's top right;
   on a phone-width line that's already full of earlier nav items, it
   simply wraps down with the rest of the list's own overflow. */
.nav-lang-item {
  margin-left: auto;
}

.nav-links a,
.dropdown-btn {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}

.nav-links a:hover,
.dropdown-btn:hover {
  color: var(--color-primary);
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 2.5rem;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  display: none;
  min-width: 150px;
  box-shadow: var(--shadow-md);
}

.dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

/* Show menu when active */
.dropdown.active .dropdown-menu {
  display: block;
}


/* Centers page content instead of letting it hug the left edge on wide
   screens. .wide is used by pages that lay content out in columns. */
.page-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-content.wide {
  max-width: 1100px;
}

/* Two-column layout for wide screens, e.g. main.html's word-registry
   form next to its translate panel. Falls back to a single stacked
   column below 900px so it stays readable on phones. */
.main-columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
}

.main-secondary {
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-4);
}

@media (max-width: 900px) {
  .main-columns {
    grid-template-columns: 1fr;
  }

  .main-secondary {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: var(--space-4);
  }
}

/*Parameters page*/
.container {
      max-width: 720px;
      margin: 0 auto;
      padding: var(--space-4);
      border-radius: var(--radius-md);
      background-color: var(--color-surface);
      box-shadow: var(--shadow-sm);
    }
    label {
      display: block;
      margin-top: 1rem;
      font-weight: bold;
	  margin-bottom: 4px;
    }
	select {
	      width: 100%;
	      padding: 0.5rem;
	      margin-top: 0.2;
	    }
    .status {
      margin-top: 1rem;
      color: var(--color-primary-hover);
    }
    /* Smaller, muted second line under "Select your account settings" -
       same hint-text convention used elsewhere (e.g. main.html's
       .sentence-record-hint). */
    .parameters-heading-subtitle {
      margin-top: 0;
      font-size: 0.85em;
      color: var(--color-text-muted);
    }
    /* Moved here from the shared nav bar - stands on its own at the
       bottom of the page instead of sitting inline with Save
       Information, so it doesn't read as part of the save action. */
    .sign-out-button {
      margin-top: var(--space-4);
    }
    .source-language-switcher {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
    }
    .source-language-switcher label {
      margin: 0;
      font-weight: 600;
      font-size: 0.8rem;
      white-space: nowrap;
    }
    .source-language-switcher select {
      width: auto;
      padding: 4px 8px;
      margin-top: 0;
    }
    .welcome-banner {
      margin-bottom: 1rem;
      padding: var(--space-4);
      border-radius: var(--radius-md);
      background-color: var(--color-primary-soft);
      color: var(--color-primary-hover);
      font-weight: bold;
      text-align: center;
    }
    .hidden { display: none; }
    .field { margin: 8px 0; }

	p {
	  margin-top: 0.2rem;   /* reduce space above */
	  margin-bottom: 0.2rem; /* reduce space below */
	}
	/*dropdown label menu*/
	#labelFilterContainer,
	.checkbox-list {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 10px;
	    margin-top: 0.2rem;
	}

	.label-filter-item {
	    display: flex;
	    align-items: center;
	    gap: 6px;
	    cursor: pointer;
	    user-select: none;
	}

	.teach-languages-container {
	    display: flex;
	    flex-direction: column;
	    gap: 8px;
	    margin-top: 0.2rem;
	}

	.teach-language-row {
	    display: flex;
	    align-items: center;
	    gap: 8px;
	}

	.teach-language-row .remove-teach-language-button {
	    padding: 4px 10px;
	}

	/* "Language you learn" - two columns per row: the language select
	   grows to fill the row, the Level select (hidden until a language is
	   picked) hugs its content on the right. */
	.learn-languages-container {
	    display: flex;
	    flex-direction: column;
	    gap: 8px;
	    margin-top: 0.2rem;
	}

	.learn-language-row {
	    display: flex;
	    align-items: center;
	    gap: 8px;
	}

	.learn-language-row .learn-language-select {
	    flex: 1 1 auto;
	}

	.learn-language-row .learn-language-level-select {
	    flex: 0 0 auto;
	    width: auto;
	}

	.learn-language-row .remove-learn-language-button {
	    padding: 4px 10px;
	}
/* Scrollable wrapper so the registered-words table never overflows the viewport */
.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/*Get Keywords registered Table*/
#ddb-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  background-color: var(--color-surface);
}

#ddb-table th, #ddb-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
}

#ddb-table th {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

#ddb-table tr:hover {
  background: var(--color-primary-soft);
  cursor: pointer;
}

#ddb-table th:first-child,
#ddb-table td:first-child {
  width: 32px;
  text-align: center;
}

/* Persistent highlight for a checked row, distinguishable from the
   transient :hover tint above via the left accent bar. */
#ddb-table tbody tr.selected-row {
  background-color: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
/*Filter dates on the same line*/
  .date-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px; /* spacing between items */
  }

  .date-row label {
	white-space: nowrap; /* prevents label text from wrapping */
  }

/* Mobile: stack multi-column rows so nothing overflows a phone-width viewport */
@media (max-width: 640px) {
  body {
    padding: 0 var(--space-2);
  }

  .input-button-row-submitword {
    flex-direction: column;
  }

  .input-button-row-submitword input.text-input-submitword,
  .input-button-row-submitword button.action-button-submitword {
    flex: 1 1 auto;
    width: 100%;
  }

  .label-row {
    flex-direction: column;
    align-items: stretch;
  }

  .language-container {
    flex-direction: column;
    align-items: stretch;
  }

  .swap-button {
    align-self: center;
  }

  .nav-container {
    padding: 0 1rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .container,
  .disabled-container,
  .active-container {
    padding: var(--space-3);
  }
}