/*
 * Reusable components shared by every screen.
 * Screen-specific styles live in screens/<screen>.css.
 */

/* ---------- Typography ---------- */

.serif { font-family: var(--font-serif); font-weight: 400; }
.italic { font-style: italic; }

/* Arabic text. Always pair with dir="rtl" (or lang="ar") on the element. */
.ar { font-family: var(--font-arabic); font-weight: 400; }

.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1;
  margin: 0;
}
/* Room for Arabic vowel marks (Today's greeting, Daily word). */
.page-title--tall { line-height: 1.3; }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -1px;
  text-wrap: balance;
}

.display em, .page-title em { color: var(--green); }

/* Small uppercase label. Default is clay; --muted is the grey "section" label. */
.eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
}
.eyebrow--muted { color: var(--text-muted); letter-spacing: 1.5px; }
.eyebrow--sm { font-size: 12px; letter-spacing: 1px; }
.eyebrow--on-dark { color: var(--text-on-dark-muted); }

.lead { font-size: 19px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.muted { color: var(--text-muted); }
.body-text { color: var(--text-body); line-height: 1.55; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--green); color: var(--paper); }

.btn--clay { background: var(--clay); color: var(--text-on-accent); }
.btn--clay:hover { background: var(--clay-hover); color: var(--text-on-accent); }

.btn--green { background: var(--green); color: var(--paper); }
.btn--green:hover { background: var(--green-deep); color: var(--paper); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 500; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* Quiet outline used for secondary actions on cards. */
.btn--soft { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
.btn--soft:hover { border-color: var(--ink); color: var(--ink); }

/* Quiet sand button, e.g. "▶ Audio" next to a word. */
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: var(--line); color: var(--ink); }

/* Light button on dark surfaces. */
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--peach); color: var(--ink); }

.btn--ghost-dark { background: none; color: var(--paper); border-color: var(--paper); font-weight: 500; }
.btn--ghost-dark:hover { background: var(--ink-raised); color: var(--paper); }

.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--xs { padding: 6px 12px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

/* Text-only button that looks like a nav link. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.link-button:hover { text-decoration: none; color: var(--clay); }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  min-width: 0;
}
.card--roomy { padding: 28px; }
.card--lg { border-radius: var(--radius-lg); padding: 32px; }
.card--stack { display: flex; flex-direction: column; gap: 14px; }
/* Whole card is a link or button. */
.card--action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.card--action:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }

.card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--green { background: var(--green); color: var(--paper); border-color: var(--green); }
.card--clay { background: var(--clay); color: var(--text-on-accent); border-color: var(--clay); }
.card--dashed { background: transparent; border: 1.5px dashed var(--line-dashed); }
.card--dark.card--action:hover { color: var(--paper); }
.card--green.card--action:hover { background: var(--green-deep); color: var(--paper); }
.card--clay.card--action:hover { background: var(--clay-hover); border-color: var(--clay-hover); color: var(--text-on-accent); }


.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

/* ---------- Chips, pills, badges ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 13px;
  background: var(--sand);
  color: var(--text-body);
  border: none;
  white-space: nowrap;
}
.chip--green { background: var(--green-soft); color: var(--green); font-weight: 600; }
.chip--clay { background: var(--clay-soft); color: var(--clay); font-weight: 600; }
.chip--ink { background: var(--ink); color: var(--peach); font-weight: 700; }
.chip--solid-clay { background: var(--clay); color: var(--text-on-accent); font-weight: 700; }
.chip--sm { padding: 4px 10px; font-size: 12px; font-weight: 600; }
.chip--plain { color: var(--ink); }

/* Toggle-able chip (filters, multi-select). aria-pressed="true" = selected. */
.toggle-chip {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.toggle-chip:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }
.toggle-chip[aria-pressed="true"], .toggle-chip[aria-current="page"], .toggle-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Level tag, e.g. "A1". */
.level-tag {
  background: var(--sand);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
}

/* Count badge, e.g. due flashcards. */
.badge {
  background: var(--clay);
  color: var(--text-on-accent);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  line-height: 1.4;
}

/* ---------- Segmented control ---------- */

.segmented {
  display: inline-flex;
  gap: 4px;
  background: var(--sand);
  border-radius: var(--radius-pill);
  padding: 4px;
  flex-wrap: wrap;
}
.segmented__option {
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.segmented__option:hover { text-decoration: none; color: var(--ink); background: var(--sand-hover); }
.segmented__option[aria-pressed="true"], .segmented__option[aria-current="page"], .segmented__option.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.field__hint { font-weight: 400; color: var(--text-muted); font-size: 13px; }

.input {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-input);
  padding: 13px 14px;
  font-size: 16px;
  font-weight: 400;
  outline-color: var(--green);
}
.input--on-paper { background: var(--paper); }
.input--pill { border-radius: var(--radius-pill); padding: 10px 16px; font-size: 14px; }
.input[aria-invalid="true"], .field_with_errors .input { border-color: var(--clay); }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }

.form-error {
  color: var(--clay);
  font-size: 14px;
  font-weight: 600;
}
.form-errors {
  background: var(--clay-soft);
  color: var(--clay-deep);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.form-errors ul { margin: 4px 0 0; padding-left: 18px; }

/* Rails wraps invalid fields in this div; keep it from breaking layouts. */
.field_with_errors { display: contents; }

/* Toggle switch: <label class="switch"><input type="checkbox"><span></span></label> */
.switch { position: relative; display: inline-flex; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--line-strong); transition: background-color .15s ease; cursor: pointer;
}
.switch span::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  border-radius: 50%; background: var(--card); transition: transform .15s ease;
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Progress ---------- */

.progress {
  height: 6px;
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  min-width: 40px;
}
.progress__bar { height: 100%; background: var(--green); border-radius: inherit; }
.progress--thin { height: 4px; }

/* Circular goal ring. Set --pct (0–100) inline. */
.ring {
  --pct: 0;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--pct) * 1%), var(--line) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ring__inner {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- Brand ---------- */

/* The mark: the khatam star with ع at its centre. Green on light
   backgrounds, peach on dark ones. Size with --mark-size. */
.brand-mark {
  --mark-size: 42px;
  --mark-fill: var(--green);
  --mark-ring: var(--peach);
  --mark-ring-width: 2;
  --mark-letter: var(--paper);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
}
.brand-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-mark rect, .brand-mark polygon { fill: var(--mark-fill); }
.brand-mark circle { fill: none; stroke: var(--mark-ring); stroke-width: var(--mark-ring-width); }
.brand-mark__letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-arabic);
  font-size: calc(var(--mark-size) * .43);
  line-height: 1;
  color: var(--mark-letter);
  transform: translateY(-.06em);
}
.brand-mark--on-dark, .brand--on-dark .brand-mark { --mark-fill: var(--peach); --mark-ring: var(--ink); --mark-letter: var(--ink); }

/* The logo: mark + "ArabicGenius" + the Arabic name. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__words { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.brand__name { font-family: var(--font-serif); font-size: 28px; line-height: 1; letter-spacing: -.3px; white-space: nowrap; }
.brand__name em { font-style: italic; color: var(--green); }
.brand__ar { font-family: var(--font-arabic); font-size: 15px; line-height: 1.35; color: var(--green); white-space: nowrap; }
.brand--on-dark, .brand--on-dark:hover { color: var(--paper); }
.brand--on-dark .brand__name em, .brand--on-dark .brand__ar { color: var(--peach); }

/* ---------- Flash messages ---------- */

.flash {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.flash--notice { background: var(--green-soft); color: var(--green); }
.flash--alert { background: var(--clay-soft); color: var(--clay-deep); }
.flash__close { background: none; border: none; color: inherit; font-size: 18px; line-height: 1; padding: 0 4px; }

/* ---------- Misc ---------- */

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 700; }
.check-list--on-dark li::before { color: var(--peach); }

.empty-state {
  border: 1.5px dashed var(--line-dashed);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

/* Save-to-review toggle (shared/_save_word_button). */
.save-word { background: transparent; color: var(--green); border-color: var(--green); }
.save-word:hover { background: var(--green-soft); color: var(--green); }
.save-word.is-saved { background: var(--green); color: var(--paper); }
.save-word.is-saved:hover { background: var(--green-deep); color: var(--paper); }

/* A ▶ button while it reads aloud (speech_controller.js, recitation_controller.js). */
[data-controller~="speech"].is-playing, .is-playing[data-action*="recitation#"] { box-shadow: inset 0 0 0 2px currentColor; }