/*
 * The shanisarf demo's styles, loaded after shanicoat-lite.css. Only the
 * theme's role tokens and scales appear here, never palette values or raw hex,
 * so the demo follows any palette change. The theme has no feedback (error)
 * colour, so an error status is marked by its words and weight, and colour
 * only reinforces it.
 */

[hidden] {
  display: none !important;
}

/* --- The query form --- */
.query label {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.query__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.query input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-3);
  line-height: var(--line-height-2);
}

.query input:focus {
  border-color: var(--interactive);
}

.query input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* --- Examples: interactive chips --- */
.examples-label {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.example {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.example:hover {
  border-color: var(--interactive-hover);
}

.example:active {
  border-color: var(--interactive-active);
  background: var(--bg);
}

.example :lang(ar) {
  font-size: var(--font-size-3);
  line-height: var(--line-height-1);
}

.example__note {
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

/* --- Status line and the no-script notice --- */
.status,
.notice {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.notice {
  margin: 0 0 var(--space-5);
  color: var(--text);
}

.status--busy {
  border-left-color: var(--brand-dim);
}

.status--ready {
  border-left-color: var(--brand);
}

.status--error {
  border-left-color: var(--brand-bright);
  color: var(--text);
  font-weight: 600;
}

/* --- Results --- */
.results {
  margin: var(--space-6) 0 0;
}

.results__note {
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.analyses {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.analysis {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.analysis__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.analysis__num {
  min-width: 2ch;
  color: var(--text-muted);
  font-size: var(--font-size-0);
  font-variant-numeric: tabular-nums;
}

/* Room above and below for stacked vowel marks. */
.analysis__form {
  color: var(--brand-bright);
  font-size: var(--font-size-4);
  font-weight: 600;
  line-height: var(--line-height-2);
}

.analysis__gloss {
  margin: var(--space-2) 0 0;
}

.analysis__inflection {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.analysis__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-1);
}

.analysis__features > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.analysis__features dt {
  color: var(--text-muted);
}

.analysis__features dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.analysis__features dd:lang(ar) {
  font-size: var(--font-size-2);
}

.analysis__features abbr {
  text-decoration: none;
}

/* The morphemes take a line of their own and wrap within it. The list runs
 * right to left, so flex-end packs it to the left, beside its label. */
.analysis__morphemes {
  flex-basis: 100%;
}

.morphemes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.morpheme {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.morpheme :lang(ar) {
  font-size: var(--font-size-2);
}

.morpheme__tag {
  color: var(--text-muted);
  font-size: var(--font-size-0);
  letter-spacing: 0.02em;
}

.results__more {
  margin: var(--space-5) 0 0;
}

/* A quieter button: the brand outline without the fill. */
.button--quiet {
  background: transparent;
  color: var(--interactive);
}

.button--quiet:hover {
  background: transparent;
  color: var(--interactive-hover);
}

.button--quiet:active {
  background: transparent;
  color: var(--interactive-active);
}

/* --- Attribution --- */
.fine-print {
  margin: var(--space-5) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-0);
}