/* F07 — one screen: text in, result out, the direction in the app bar and the
   dictionary below. F08's highlighting lives on .output.

   The mockups' turn-3 layout: the two editors sit either side of a narrow rail
   that carries the swap count, and they share a height so a long paste cannot
   shove anything off screen. */

/* The editors take the window. .app is a flex column of a fixed-height bar, the
   notices, and this; giving this the remaining space and letting it pass that
   down means a tall window buys taller editors rather than more empty page. */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  /* Without this a grid item's content can refuse to shrink below its intrinsic
     height, and the row grows past the viewport instead of scrolling inside. */
  min-height: 0;
  padding: 1.75rem 1.5rem 1rem;
}

.pane {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  min-height: 0;
}

.pane__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.1rem;
}

.pane__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Uppercase in the rendering only: the specs read these labels back from
     textContent, which text-transform leaves alone. */
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.pane--output .pane__title {
  color: var(--colour-accent-quiet);
}

/* The quiet half-sentence the mockups hang off each label — "stays on this
   device", "read-only". */
.pane__note {
  margin: 0;
  font-size: 0.7rem;
  color: var(--colour-text-muted);
}

.pane__meta {
  margin: 0 0 0 auto;
  font-size: 0.7rem;
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

.pane__meta--mono {
  font-family: var(--font-mono);
}

/* The editors themselves. Equal height is the point of the turn-3 layout, so
   both boxes claim the same floor and then grow together into whatever the
   window has. The floor is what keeps them usable on a short window; past it
   the page scrolls rather than the boxes collapsing. */
.pane__input,
.pane__body {
  flex: 1;
  min-height: 11rem;
  border-radius: var(--radius);
}

.pane__input {
  padding: 1rem 1.15rem;
  border: 1px solid var(--colour-border);
  background: var(--colour-surface);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  /* Shared with .pane__output — see --editor-line-height. */
  line-height: var(--editor-line-height);
  /* No resize handle: the box is sized by the window now, and a dragged height
     would be overwritten by the next reflow. */
  resize: none;
  overflow: auto;
}

/* The output box: sunken, read-only, with the copy row inside it against the
   bottom edge — the mockups keep the action in the same box as the text it
   acts on. */
.pane__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--colour-border);
  background: var(--colour-sunken);
}

/* The text takes the space and scrolls; the foot stays against the bottom edge,
   so the copy button does not walk down the page as the result grows. */
.pane__output {
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  /* Shared with .pane__input — see --editor-line-height. */
  line-height: var(--editor-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pane__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--colour-text-muted);
}

/* Pushes the copy row to the bottom of the box while the text takes the rest. */
.pane__hint--empty {
  flex: 1;
}

.pane__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 1px solid var(--colour-border-soft);
  padding-top: 0.7rem;
}

.pane__summary {
  margin: 0;
  font-size: 0.75rem;
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

.pane__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  /* Fixed height so the copy confirmation cannot shift the layout (F09 req 5). */
  min-height: 2.25rem;
}

.pane__shortcut {
  font-size: 0.7rem;
  color: var(--colour-text-muted);
}

/* The mockups fold the confirmation into the button. It stays a separate live
   region here — the button keeps its own name, and a status that replaced it
   would take the action away at the moment the user may want it twice — but it
   takes the confirmed pill's look. */
.pane__copy-status {
  font-size: 0.75rem;
  line-height: 1;
}

.pane__copy-status--ok,
.pane__copy-status--fail {
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.pane__copy-status--ok {
  background: var(--colour-success-surface);
  color: var(--colour-success);
}

.pane__copy-status--ok::before {
  content: "✓ ";
}

.pane__copy-status--fail {
  background: var(--colour-error-surface);
  color: var(--colour-error);
}

/* F15 — the found-terms line and the button that acts on all of them at once.
   Baseline-aligned so the button reads as the end of the sentence rather than
   as a separate control. */
.pane__findings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.pane__findings-row[hidden] {
  display: none;
}

/* F15 — what the analysis found. Carries the finding colour so the sentence and
   the marks it counts are visibly the same subject. */
.pane__findings {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--colour-finding);
}

.pane__findings[hidden] {
  display: none;
}

/* F15 — the control that opens the detector list is in the app bar now, beside
   the Dictionary button; it and its dialog are in detectors.css. */

/* F16 — an override is the user's own decision, so this is not an error; it is
   a warning, and it is loud enough to be read on the way past the Copy button. */
.pane__overrides {
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-left: 3px solid currentcolor;
  border-radius: var(--radius-small);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--colour-warning);
  background: var(--colour-warning-surface);
}

.pane__overrides[hidden] {
  display: none;
}

/* The liability notice. Small, because it is not the interface — but not muted
   into unreadability either: a disclaimer nobody can read is not a disclaimer. */
.pane__disclaimer {
  margin: 0;
  max-width: 46rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
}

/* Two notices, two different promises — kept apart so neither reads as a
   qualification of the other. */
.pane__disclaimer + .pane__disclaimer {
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ the rail */

/* Decorative: the same count is announced by .pane__summary, which is the live
   region, so the rail must not say it a second time. */
.workspace__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1.7rem;
}

.workspace__rail-rule {
  flex: 1;
  width: 1px;
  background: linear-gradient(
    rgb(0 0 0 / 0%),
    var(--colour-border) 30%,
    var(--colour-border) 70%,
    rgb(0 0 0 / 0%)
  );
}

.workspace__rail-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--colour-accent);
  color: var(--colour-accent-text);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}

/* A chevron rather than an arrow. Both say "this way"; the chevron says it more
   quietly, which suits a mark that is decorative and aria-hidden — the count it
   sits beside is what actually reports the direction. */
.workspace__rail-badge::before {
  content: ">";
}


/* ------------------------------------------------------ output replacements */

/* Colour is never the only signal — the underline carries the same information
   for anyone who cannot separate the hues. */
.output__match {
  background: var(--colour-match);
  border-bottom: 1.5px solid var(--colour-match-border);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--colour-accent-ink);
  font-family: var(--font-mono);
}

/* F15 — the opposite of a replacement, and drawn as such: no filled background,
   because it was not handled; a wavy underline, so the "something is wrong here"
   reading survives without the colour. */
.output__finding {
  background: none;
  color: var(--colour-finding);
  text-decoration: underline wavy var(--colour-finding);
  text-underline-offset: 0.2em;
  font-family: var(--font-mono);
}

.output--emphasising .output__match,
.output--emphasising .output__finding {
  opacity: 0.4;
}

/* The mockups' inspected token: solid accent, the one thing on screen carrying
   the accent at full strength. */
.output--emphasising .output__match--emphasised {
  opacity: 1;
  background: var(--colour-accent);
  border-bottom-color: transparent;
  color: var(--colour-accent-text);
}

@media (max-width: 60rem) {
  /* F07 requirement 8: input → output → dictionary, one column. The rail
     becomes the divider between the two editors, as in mockup 4a. */
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    /* Three stacked rows now, each sized by its own content: one column of
       viewport-height editors would leave neither of them readable. */
    grid-template-rows: auto;
    padding: 1rem 1rem 1.5rem;
    gap: 0.7rem;
  }

  .pane__input,
  .pane__body {
    min-height: 14rem;
  }

  .workspace__rail {
    flex-direction: row;
    gap: 0.6rem;
    padding-top: 0;
  }

  .workspace__rail-rule {
    width: auto;
    height: 1px;
    background: var(--colour-border);
  }

  .workspace__rail-badge {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.6rem;
  }

  .workspace__rail-badge::before {
    content: "↓";
  }
}

@media (max-width: 40rem) {
  /* Too little room for label, promise and count on one line. The label and the
     count keep it — they are what the eye comes back to — and the promise takes
     the line below rather than breaking the label in half. */
  .pane__head {
    flex-wrap: wrap;
  }

  .pane__title {
    white-space: nowrap;
  }

  .pane__note {
    order: 3;
    flex-basis: 100%;
  }
}