/* Sentence-first fact capture (facts/sentence). The sentence is the form:
   a transparent input sits over a colored mirror, with labeled rails under
   each recognized part. Colors ride the theme tokens from theme.css, so
   light and dark both come for free. */

.sentence-page {
  max-width: 52rem;
  margin: 2rem auto 0;
}

.sentence-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bs-secondary-color);
  margin-bottom: 1rem;
}

/* The stage mechanics (transparent input over a mirror) live in stage.css;
   this page only sets its scale and paints its own token colors. */
.sentence-stage {
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
}

/* Filing in progress: the baseline ripples and a quiet caption appears
   while the sentence is being squared up server-side. */
.sentence-filing {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0.75rem;
  font-family: var(--body, inherit);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gold);
}

.sentence-busy .sentence-filing {
  display: block;
  animation: sentence-filing-pulse 1.2s ease-in-out infinite;
}

.sentence-busy .sentence-stage {
  animation: sentence-baseline-cycle 1.6s linear infinite;
}

@keyframes sentence-filing-pulse {
  50% { opacity: 0.35; }
}

@keyframes sentence-baseline-cycle {
  0%, 100% { border-color: var(--accent); }
  33% { border-color: var(--gold); }
  66% { border-color: var(--moss); }
}

.sentence-mirror {
  color: var(--bs-secondary-color);
}

.sentence-tok-entity,
.sentence-tok-prop,
.sentence-tok-value {
  border-radius: 0.3em 0.3em 0 0;
}

.sentence-tok-entity { color: var(--accent); background: var(--wash); }
.sentence-tok-prop { color: var(--gold); background: var(--gold-wash); }
.sentence-tok-value { color: var(--moss); background: var(--moss-wash); }

.sentence-ghost {
  color: var(--bs-tertiary-color);
  font-weight: 500;
  font-size: 0.55em;
  vertical-align: 0.16em;
  border: 1.5px dashed var(--bs-tertiary-color);
  border-radius: 0.5em;
  padding: 0.25em 0.7em;
  margin-left: 0.5em;
  letter-spacing: 0;
  white-space: nowrap;
}

.sentence-rails {
  position: relative;
  height: 2rem;
  margin-top: 0.5rem;
}

.sentence-rail {
  position: absolute;
  top: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0.55rem;
  transition: left 0.12s ease-out;
}

.sentence-rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: currentcolor;
}

.sentence-rail-entity { color: var(--accent); }
.sentence-rail-prop { color: var(--gold); }
.sentence-rail-value { color: var(--moss); }

.sentence-help {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  margin-top: 1rem;
}

.sentence-trouble {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--rose);
}

.sentence-pile {
  margin-top: 3rem;
}

.sentence-pile-head {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bs-secondary-color);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.sentence-filed {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.sentence-filed {
  animation: sentence-file-in 0.35s ease-out both;
}

@keyframes sentence-file-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}

.sentence-statement {
  text-decoration: none;
  color: var(--bs-secondary-color);
  min-width: 0;
}

.sentence-statement:hover .sentence-tok-entity {
  text-decoration: underline;
}

.sentence-statement .sentence-tok-entity { font-weight: 600; background: none; }
.sentence-statement .sentence-tok-prop { background: none; }
.sentence-statement .sentence-tok-value { font-weight: 600; background: none; }

.sentence-status {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.sentence-status-unsettled,
.sentence-status-settling { color: var(--gold); }
.sentence-status-upheld { color: var(--moss); }
.sentence-status-disputed { color: var(--rose); }

@media (prefers-reduced-motion: reduce) {
  .sentence-filed { animation: none; }
  .sentence-rail { transition: none; }
  .sentence-busy .sentence-filing { animation: none; }
  .sentence-busy .sentence-stage { animation: none; }
}