/*
 * Mirror Twin page. Loads after the Last Table tokens and components, which bring the hero, the star field, the twin,
 * the result panel and its burst. This file adds only what the reading needs and uses only Last Table variables. Rule of
 * the system: glow means attention, so the brass glow marks only a part the person did not say, a clause the reading
 * never used, and the one action the page wants next.
 */

/* A class display rule beats the hidden attribute, so the hidden twin and done card need saying twice. */
#mt-twin[hidden], #mt-done[hidden] { display: none; }
.lt-page .mt-faqs h2 {
  margin: 0;
  font: 560 var(--lt-step-3) / var(--lt-leading-tight) var(--lt-font-display);
  color: var(--lt-text-1);
}
.lt-page .lt-section:last-child { padding-bottom: var(--lt-space-8); }

/* The order form, inside the dome */
.lt-input#mt-task { min-height: 6rem; }
.mt-samples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-2); margin-top: var(--lt-space-3); }
.mt-samples .lt-prompt-hint { margin: 0; }
.mt-sample {
  min-height: 44px;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-2);
  padding: var(--lt-space-2) var(--lt-space-3);
  font: var(--lt-step--1) / 1.4 var(--lt-font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--lt-dur-fast) var(--lt-ease), color var(--lt-dur-fast) var(--lt-ease);
}
.mt-sample:hover { border-color: var(--lt-teal); color: var(--lt-text-1); }
.mt-status { min-height: 1.6em; margin: var(--lt-space-4) 0 0; color: var(--lt-text-2); max-width: 44rem; }
.mt-status[data-tone="error"] { color: var(--lt-danger); }
.mt-status[data-tone="busy"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--lt-space-2);
  border-radius: 50%;
  background: var(--lt-teal);
  animation: mt-breathe 1.2s var(--lt-ease) infinite alternate;
}
@keyframes mt-breathe { from { opacity: 0.25; } to { opacity: 1; } }

/* Your words, with what was repeated back underlined and what was never used glowing */
.mt-order-text { margin: var(--lt-space-3) 0 0; font-size: var(--lt-step-1); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-heard { text-decoration: underline 2px var(--lt-teal); text-underline-offset: 4px; }
.mt-missed {
  background: var(--lt-glow-wash);
  box-shadow: 0 0 0 1px var(--lt-glow-ink), 0 0 14px 0 var(--lt-glow-halo);
  border-radius: 4px;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mt-notes { list-style: none; margin: var(--lt-space-4) 0 0; padding: 0; display: grid; gap: var(--lt-space-2); }
.mt-notes:empty { display: none; }
.mt-notes li {
  display: flex;
  gap: var(--lt-space-2);
  align-items: center;
  justify-content: space-between;
  border-left: 2px solid var(--lt-teal);
  padding-left: var(--lt-space-3);
  color: var(--lt-text-2);
  font-size: var(--lt-step--1);
}
.mt-notes li strong { color: var(--lt-text-1); font-weight: 600; }
.mt-note-remove {
  flex: none;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--lt-text-2);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 var(--lt-space-2);
}
.mt-key { margin: var(--lt-space-4) 0 0; font-size: var(--lt-step--1); color: var(--lt-text-3); }
.mt-key:empty { display: none; }
.mt-key-heard { text-decoration: underline 2px var(--lt-teal); text-underline-offset: 3px; }
.mt-key-missed { background: var(--lt-glow-wash); box-shadow: 0 0 0 1px var(--lt-glow-ink); border-radius: 4px; padding: 0 2px; }

/* The reading */
.mt-reading { display: grid; gap: var(--lt-space-4); margin-top: var(--lt-space-3); }
.mt-group h3 {
  margin: 0 0 var(--lt-space-2);
  font: 600 var(--lt-step--1) / 1.4 var(--lt-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-text-3);
}
.mt-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lt-space-2); }
.mt-part {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-1);
  color: var(--lt-text-1);
  padding: var(--lt-space-2) var(--lt-space-3);
  font: var(--lt-step-0) / 1.5 var(--lt-font-ui);
  cursor: pointer;
  transition: border-color var(--lt-dur-fast) var(--lt-ease), box-shadow var(--lt-dur-base) var(--lt-ease);
  animation: mt-arrive var(--lt-dur-slow) var(--lt-ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.mt-part:hover { border-color: var(--lt-line-strong); }
.mt-part-from { display: block; margin-top: 2px; font-size: var(--lt-step--1); color: var(--lt-text-3); }
.mt-part[data-glow="true"] {
  border-color: var(--lt-glow-ink);
  background: var(--lt-glow-wash);
  box-shadow: 0 0 0 1px var(--lt-glow-ink), 0 0 20px 0 var(--lt-glow-halo);
}
.mt-part[data-glow="true"] .mt-part-from { color: var(--lt-glow-ink); font-weight: 600; }
.mt-part[aria-expanded="true"] { border-color: var(--lt-teal); box-shadow: 0 0 0 1px var(--lt-teal); }
.mt-changed {
  display: inline-block;
  margin-left: var(--lt-space-2);
  font: 600 var(--lt-step--1) / 1.4 var(--lt-font-ui);
  color: var(--lt-teal);
}
@keyframes mt-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mt-risk { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); align-items: center; margin-bottom: var(--lt-space-2); }

/* The correction drawer that opens under a clicked part */
.mt-fix {
  margin-top: var(--lt-space-2);
  padding: var(--lt-space-3);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-3);
  display: grid;
  gap: var(--lt-space-2);
}
.mt-fix label { font-size: var(--lt-step--1); font-weight: 600; color: var(--lt-text-2); }
.mt-fix textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: var(--lt-space-2) var(--lt-space-3);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-1);
  font: var(--lt-step-0) / 1.5 var(--lt-font-ui);
  resize: vertical;
}
.mt-fix-actions { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); }

/* Approve, edit or cancel */
.mt-decide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lt-space-4); margin-top: var(--lt-space-4); }
.mt-glow-count { margin: 0; color: var(--lt-text-2); max-width: 42ch; }
.mt-glow-count strong { color: var(--lt-glow-ink); }
.mt-actions { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); }
@media (max-width: 560px) {
  /* The first action gets the full row on a phone, so no button is left alone on a line. */
  .mt-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .mt-actions > :first-child { grid-column: 1 / -1; }
}

/* Confirmed order. The burst itself is the shared lt-burst. */
#mt-done-title { margin: 0; }
/* The heading takes focus only so a screen reader announces the result; it is not a control, so no ring. */
#mt-done-title:focus { outline: none; }
.mt-brief { margin: var(--lt-space-4) 0; }
.mt-brief pre { padding-right: var(--lt-space-4); white-space: pre-wrap; overflow-wrap: anywhere; }

/* How it works, the bill and the agent notes */
.mt-steps { margin: var(--lt-space-4) 0; padding-left: 1.4em; display: grid; gap: var(--lt-space-3); }
.mt-steps strong { color: var(--lt-text-1); }
.mt-bill { max-width: 32rem; margin-bottom: var(--lt-space-5); }
.mt-agents { max-width: 44rem; }
.mt-agents .lt-code { margin: 0 var(--lt-space-5) var(--lt-space-4); padding: 0; }
.mt-agents .lt-code pre { padding-right: var(--lt-space-4); }
.lt-details summary { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .mt-part,
  .mt-status[data-tone="busy"]::before { animation: none; }
}