/* Shared result-rendering styles: the output panel, the Copy control, and the
   75/25 partial-reveal gate. These render in TWO places that do not load the same
   page CSS: the tool pages (which also load tools.css) AND the AI-detector flagship
   home + plagiarism readout, where the AI-rewrite result (_result_text.html) drops
   into the score modal. index.html deliberately skips tools.css to keep the
   flagship lean, so these rules cannot live there or the rewrite result renders
   unstyled and its Copy button, an inline control in a centered readout, drifts to
   the middle instead of sitting right. Loaded globally from base.html, so there is
   ONE copy of each rule and both surfaces read it (DRY). Tool-only result styling
   (the grammar workspace, stat grids, readability, citations) stays in tools.css. */

/* --- output panel --- */
.output-panel { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.output-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.output-text { padding: 14px; white-space: pre-wrap; font-size: 15px; line-height: 1.6; }

/* --- the Copy control --- */
.output-head .inline-cta + .inline-cta { margin-left: 8px; }
/* Keep the action buttons (Copy, and Apply all beside it on the grammar head)
   clustered to the RIGHT, off the text they act on: margin-left:auto on the first
   button pushes the whole group over in one move, and it stays right when the head
   wraps at 320px or when the panel sits in a centered readout. */
.output-head .inline-cta:first-of-type { margin-left: auto; }
/* The Copy button carries a glyph before its label. */
.copy-btn { display: inline-flex; align-items: center; gap: 6px; }
.copy-ic { flex: none; }
/* The marked-text panel's head carries a label and TWO controls (Apply all, Copy),
   which will not share one row at 320px: the row squeezed "Your text" to 48px and
   broke a nine-character label in half. The label takes its own row there and the
   two buttons share the next, still right-aligned. */
@media (max-width: 380px) {
  .output-head { flex-wrap: wrap; }
  .output-head .label { flex: 1 0 100%; }
}

/* --- the 75/25 partial-reveal gate on a gated generator ---
   The shown 75% is real output above; this is the blurred tail and the offer. Like
   the grammar gate, the blur is presentation over a PLACEHOLDER: the withheld text
   was never rendered (_result_text.html shows `shown`, not `withheld`), so removing
   the filter in devtools reveals nothing that was being sold. */
/* The shown text is CUT, then a tall stack of blurred lines DISSOLVES to white and
   the offer sits underneath on clean white. Fading the blur to nothing (rather than
   ending it on a hard edge) implies there is more beyond even what is blurred, which
   is the whole point of showing a tail at all. */
.output-locked { position: relative; background: var(--surface-1); padding: 0 0 26px; }
/* Crisp blur up top, masked to fade out toward the bottom so the lines dissolve into
   the white below rather than stopping on an edge. */
.locked-lines {
  display: grid; gap: 13px; padding: 16px 16px 0; user-select: none;
  filter: blur(5px); opacity: .6;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 94%);
}
.locked-lines span { display: block; height: 12px; border-radius: 6px; background: var(--line-2); }
/* The offer, pulled up into the faded tail. Its own transparent-to-white backdrop
   guarantees the promo reads on clean white wherever the fade lands, so the eye runs
   blur -> white -> offer. */
.locked-gate {
  position: relative; z-index: 1; margin-top: -72px; padding: 34px 22px 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: linear-gradient(to bottom, transparent, var(--surface-1) 46%);
}
/* Large on desktop, but it must hold ONE line at 320px in every language: German
   ("Den Rest mit Pro freischalten") is the widest and sets the floor, so the size
   scales down on narrow viewports rather than wrapping the heading. */
.locked-gate .gate-head { margin: 0; font-size: clamp(14px, 4.4vw, 18px); font-weight: 700; letter-spacing: -.01em; }
.locked-gate .try { display: inline-flex; }
@media print { .output-locked { display: none; } }

/* Live as-you-type grammar preview (tool.js fills #live-grammar with the shared
   result partial). It reuses the whole issue layout, so it only needs to place the
   panel and suppress the parts that belong to the explicit, savable check: the tool
   title it would duplicate, and Apply/Copy, which are wired only on the real result.
   The gate link is left alone, so a free typist can still act on it. */
.live-grammar { margin-top: 18px; }
.live-grammar[hidden] { display: none; }
.live-grammar > h1, .live-grammar > .sub { display: none; }
.live-grammar .apply-one, .live-grammar #apply-all, .live-grammar .copy-btn { display: none; }
/* A quiet dim while a check is in flight, so an in-progress edit reads as "checking"
   rather than as a frozen result. */
.live-grammar.checking { opacity: .55; transition: opacity .12s ease; }
/* The live panel occupies hero-grammar's narrow corrections column, so its result
   always STACKS (marks above the cards): the shared split's two-column form is built
   for the full-width area the explicit Check renders into and overflows this column.
   Two classes beat the single-class media-query rule, so this wins without !important. */
.live-grammar .issue-split { display: block; }
.live-grammar .issue-split .output-panel { display: block; height: auto; }
.live-grammar .issue-split .marked-text { max-height: 300px; flex: none; }
.live-grammar .issue-rail {
  height: auto; max-height: none; overflow: visible; margin-top: 12px; padding-right: 0;
}