/* =========================================================================
   App-only styles: things the static mockups did with inline attributes or
   did not need. Everything else is in components.css (ported from the mockups).
   ========================================================================= */

/* 100vh fallback, then 100dvh (mobile browser chrome), as in the mockups. */
html,
body,
#root {
  min-height: 100vh;
  min-height: 100dvh;
}

/* The icon sprite: the mockups used style="position:absolute" (CSP forbids inline styles). */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Progress-board marker parts (the mockup symbol used inline style="fill:var(--…)"). */
.m-pole {
  fill: var(--pole);
}
.m-a {
  fill: var(--awn-a);
}
.m-b {
  fill: var(--awn-b);
}

/* Loading: the component decides when the indicator shows (400 ms + 400 ms min), so the
   CSS delays that the static mockup relied on are removed here. */
.loading-note {
  animation: none;
  opacity: 0;
  min-height: 1.5em;
}
.loading-note.is-shown {
  animation: appear 300ms ease-out forwards;
}
.awning--loading .awning__cloth {
  animation-delay: 0ms;
}

/* Icon-only speaker that failed: same dashed treatment as .btn-audio.is-unavailable. */
.btn-say.is-unavailable {
  border-style: dashed;
  border-color: var(--ink-soft);
  background: transparent;
}
.btn-say.is-unavailable .icon {
  color: var(--ink-soft);
}
.audio-note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.35;
}
.alts__item > .audio-note {
  grid-column: 1 / -1;
  margin-top: 6px;
}
.review__item > .audio-note {
  grid-column: 2 / -1;
}

/* «Avisar de un error en esta frase»: small and quiet, but still a 44px target. */
.report {
  margin-top: calc(-1 * var(--s-4));
}
.report__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .report__toggle:hover {
    color: var(--ink);
  }
}
.report__form {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  max-width: 66ch;
}
.report__label {
  font-size: var(--fs-small);
  font-weight: 600;
}
.report__opt {
  font-weight: 400;
  color: var(--ink-soft);
}
.report__text {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border: 1.5px solid var(--option-edge);
  border-radius: var(--r-control);
  background: var(--paper-light);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.4;
  resize: vertical; /* >= 16px: no zoom on iOS focus */
}
.report__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.report__count {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-soft);
}
.report__done,
.report__error {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.report__done {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.btn-inline:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Another tab owns a newer round: one plain line on the teal, no banner chrome. */
.tab-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: var(--s-4);
  color: var(--on-teal-soft);
  font-size: 0.9375rem;
}
.tab-note__btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-round);
  border: 1.5px solid rgba(246, 234, 212, 0.6);
  background: transparent;
  color: var(--paper);
  font-weight: 600;
}

/* Buttons rendered as <button> where the mockups used <a>. */
.btn-next,
.btn-primary,
.btn-secondary {
  font-family: inherit;
  cursor: pointer;
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Hover lift without jitter: the 2px lift would move the option's bottom edge out
   from under a resting pointer, unhover it, drop it, and loop. A strip under the
   option keeps the lifted element under the pointer. */
.option {
  position: relative;
}
.option::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
}

/* ---- Footer and privacy note (D13) ------------------------------------------ */
.site-foot {
  margin-top: var(--s-6);
  color: var(--on-teal-soft);
  font-size: 0.875rem;
  text-align: center;
}
.site-foot a {
  display: inline-block;
  padding: 10px 4px; /* a comfortable target for a quiet link */
  color: var(--on-teal);
}
.prose-page ul {
  margin: var(--s-4) 0;
  padding-left: 1.2em;
  list-style: disc;
}
.prose-page li + li {
  margin-top: var(--s-2);
}
.prose-page p {
  margin-top: var(--s-4);
}