/* Writing page manuscript example (src/components/ManuscriptCheck.astro). Loaded only where that component renders.
   Layout only: colours and states of controls come from controls.css (docs/interactive-controls.md). */
.wex {
  /* non-interactive emphasis stays neutral; blue is reserved for controls (controls.css) */
  --wex-strong: #f4f6f8;
  --wex-soft: rgba(244, 246, 248, .07);
  --wex-line-strong: #4a5663;
  --wex-ink: #f4f6f8;
  --wex-muted: #aeb8c3;
  --wex-edge: #2b3540;
  --wex-panel: var(--sol-panel, #111820);
  margin: 0;
}
.wex-label { font: 500 .7rem/1.4 var(--hp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wex-muted); }
.wex .wex-pane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0 0 .7rem; font: 600 .9rem/1.4 var(--hp-sans); letter-spacing: 0; color: var(--wex-ink); }

/* The three findings: one full-width picker, each card already saying what was found */
.wex-picker-wrap { margin-top: 1rem; }
.wex-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.wex-pick { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; padding: .9rem 1rem; border-radius: 10px; text-align: left; font-family: var(--hp-sans); }
.wex-pick-text { display: grid; gap: .25rem; min-width: 0; }
.wex-pick-text strong { font: 600 .98rem/1.3 var(--hp-sans); }
.wex-gist { font: 400 .9rem/1.4 var(--hp-sans); color: #cfd5db; }
.wex-pick[aria-pressed="true"] .wex-gist { color: #fff; }
.wex-pick .wex-go { margin: .35rem 0 0 auto; }
.wex-num { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--wex-muted); border-radius: 50%; font: 600 .78rem/1 var(--hp-sans); color: var(--wex-ink); }
.wex-pick:not(:disabled) .wex-num { border: 0; background: var(--ui-act); color: #fff; }
.wex-pick[aria-pressed="true"] .wex-num { background: #fff; color: var(--ui-selected); }

/* The three labels differ in shape and word, not only colour */
.wex-kind { display: inline-flex; align-items: center; gap: .4rem; margin-top: .15rem; font: 500 .64rem/1.4 var(--hp-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wex-muted); white-space: nowrap; }
.wex-pick[aria-pressed="true"] .wex-kind { color: rgba(255, 255, 255, .8); }
.wex-kind i { display: inline-block; width: 8px; height: 8px; }
.wex-kind.is-rule i { background: currentColor; }
.wex-kind.is-ai i { border: 1.5px solid currentColor; border-radius: 50%; }
.wex-kind.is-none i { border: 1.5px dashed currentColor; }

/* Below: draft → compared with → what to change */
.wex-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.4rem; margin-top: 1.6rem; align-items: start; }
.wex .wex-col-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font: 600 .86rem/1.4 var(--hp-sans); letter-spacing: 0; color: var(--wex-ink); }
.wex .wex-col-head small { font-size: .8rem; font-weight: 400; color: var(--wex-muted); }
.wex-col-num { display: none; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--wex-muted); border-radius: 50%; background: transparent; color: var(--wex-ink); font: 600 .66rem/1 var(--hp-sans); }
.wex.is-enhanced .wex-col-num { display: inline-grid; }
.wex-col-arrow { margin-left: auto; color: var(--wex-muted); }
.wex-col-arrow::before { content: "→"; }

/* The draft: a page of text with the passages under review marked and numbered */
.wex-page { padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--wex-edge); border-radius: 6px; background: #0d1218; }
.wex-para { margin: 0; font: 400 1.08rem/1.75 var(--font-serif); color: var(--wex-ink); }
.wex-span { padding: .05em .1em; border-bottom: 1.5px dashed var(--wex-muted); background: transparent; color: inherit; transition: background-color .2s ease, border-color .2s ease; }
.wex-span.is-short { white-space: nowrap; }
.wex-span.is-support { border-bottom: 0; padding: 0; }
.wex-ref { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-left: .25rem; padding: 0; vertical-align: .2em; border-radius: 50%; font: 600 .72rem/1 var(--hp-sans); }
/* the marked passage belongs to its numbered control */
.wex.is-enhanced .wex-span:not(.is-support) { border-bottom: 1.5px dashed var(--ui-act); cursor: pointer; }
.wex.is-enhanced .wex-span:not(.is-support):hover { background: var(--ui-act-soft); }
.wex-figure { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--wex-edge); }
.wex-plot { display: flex; align-items: flex-end; justify-content: center; gap: .55rem; height: 3.6rem; padding: .4rem; border: 1px solid var(--wex-edge); }
.wex-plot span { position: relative; width: .9rem; background: #3a4652; }
.wex-plot span:first-child { height: 82%; }
.wex-plot span:last-child { height: 66%; }
.wex-plot span::after { content: ""; position: absolute; left: 50%; top: -.45rem; height: .9rem; border-left: 1px solid var(--wex-muted); }
.wex-caption { margin: 0; font: 400 .9rem/1.6 var(--font-serif); color: #cfd5db; }

/* Compared with: only the rows the selected finding used, until all evidence is shown */
.wex-item { padding: .9rem 1rem; border: 1px solid var(--wex-edge); border-radius: 6px; background: var(--wex-panel); }
.wex-item + .wex-item { margin-top: .7rem; }
.wex .wex-item h4 { margin: 0; font: 600 .86rem/1.3 var(--hp-sans); letter-spacing: 0; color: var(--wex-ink); }
.wex-item dl { display: grid; gap: .15rem; margin: .55rem 0 0; }
.wex-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .8rem; padding: .25rem .45rem; margin: 0 -.45rem; border-radius: 3px; font: 400 .84rem/1.45 var(--hp-sans); }
.wex-row dt { color: var(--wex-muted); }
.wex-row dd { margin: 0; color: var(--wex-ink); text-align: right; }
.wex-row-note { flex-basis: 100%; margin: .15rem 0 .1rem; font: 400 .8rem/1.45 var(--hp-sans); color: var(--wex-ink); }
.wex.is-enhanced .wex-item.is-on { border-color: var(--wex-line-strong); }
.wex.is-enhanced .wex-row.is-on { background: var(--wex-soft); box-shadow: inset 2px 0 0 var(--wex-muted); }
.wex.is-enhanced .wex-row.is-on dt { color: var(--wex-ink); }
.wex.is-enhanced:not(.show-all) .wex-item:not(.is-on),
.wex.is-enhanced:not(.show-all) .wex-row:not(.is-on) { display: none; }
.wex.is-enhanced .wex-row-note { display: none; }
.wex.is-enhanced .wex-row.is-on .wex-row-note { display: block; }
.wex-all { margin-top: .8rem; padding: .4rem .8rem; border-radius: 999px; font: 600 .8rem/1.3 var(--hp-sans); }
.wex-all[hidden] { display: none; }

/* What to change */
.wex-panel { padding: 1.15rem 1.25rem 1rem; border: 1px solid var(--wex-edge); border-radius: 6px; background: var(--wex-panel); }
.wex-panel + .wex-panel { margin-top: 1rem; }
.wex-panel[hidden] { display: none; }
.wex .wex-panel-title { display: flex; align-items: center; gap: .55rem; margin: 0; font: 400 clamp(1.2rem, 1.7vw, 1.4rem)/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--wex-ink); }
.wex-panel-title .wex-num { width: 1.4rem; height: 1.4rem; font-size: .7rem; }
.wex.is-enhanced .wex-panel-title .wex-num { display: none; }
.wex-why { margin-top: .7rem; font: 400 .95rem/1.55 var(--hp-sans); color: var(--wex-ink); }

/* Claim strength: each element of the claim against the part of the study that can support it */
.wex-parts { width: 100%; margin-top: .8rem; border-collapse: collapse; font-family: var(--hp-sans); }
.wex-parts tr { background: none !important; }
.wex-parts thead th { padding: 0 .6rem .45rem 0; font: 500 .64rem/1.4 var(--hp-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wex-muted); text-align: left; background: none; }
.wex-parts tbody th, .wex-parts td { padding: .6rem .6rem .6rem 0; border-top: 1px solid var(--wex-edge); text-align: left; vertical-align: top; background: none; }
.wex-parts tbody th { width: 38%; font: 400 1rem/1.35 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--wex-ink); }
.wex-parts tbody th span { display: block; margin-top: .25rem; font: 500 .64rem/1.4 var(--hp-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wex-muted); }
.wex-parts td:last-child { padding-right: 0; }
.wex-status { display: inline-flex; align-items: center; gap: .4rem; font: 600 .86rem/1.3 var(--hp-sans); color: var(--wex-ink); }
.wex-status i { display: inline-block; width: 9px; height: 9px; }
.wex-parts .is-ok .wex-status i { background: var(--wex-ink); border-radius: 50%; }
.wex-parts .is-no .wex-status i { border: 1.5px solid var(--wex-ink); transform: rotate(45deg); }
.wex-parts .is-open .wex-status i { border: 1.5px dashed var(--wex-ink); border-radius: 50%; }
.wex-parts small { display: block; margin-top: .2rem; font-size: .8rem; line-height: 1.45; color: #cfd5db; }

.wex-fix { margin-top: .9rem; padding: .8rem .9rem; border-left: 2px solid var(--wex-muted); background: var(--wex-soft); }
.wex-fix > span { font: 500 .68rem/1.4 var(--hp-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wex-ink); }
.wex-fix p { margin-top: .4rem; font: 400 1rem/1.55 var(--font-serif); color: var(--wex-ink); }
.wex-fix del { color: var(--wex-muted); text-decoration-thickness: 1.5px; }
.wex-fix ins { padding: 0 .2em; border-bottom: 2px solid var(--wex-strong); text-decoration: none; color: var(--wex-ink); font-weight: 600; }
.wex-fix em { font-style: normal; font: 500 .7rem/1 var(--hp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wex-muted); }
.wex-keep { color: #cfd5db; }
.wex-fix .wex-alt, .wex-fix .wex-then { font: 400 .86rem/1.5 var(--hp-sans); color: #cfd5db; }
.wex-fix ul { display: grid; gap: .25rem; margin: .45rem 0 0; padding-left: 1.1rem; font: 400 .92rem/1.45 var(--hp-sans); color: var(--wex-ink); }
.wex-fix li { margin: 0; }
.wex-how { margin-top: .9rem; }
.wex-how p { margin-top: .5rem; font: 400 .86rem/1.55 var(--hp-sans); color: #cfd5db; }
.wex-how strong { font-weight: 600; color: var(--wex-ink); }

/* Selection in the draft: the finding's passage comes forward in outline and weight as well as colour */
.wex.is-enhanced .wex-span:not(.is-support) { border-bottom-color: #3a4652; }
.wex.is-enhanced[data-active="1"] .wex-span[data-f="1"],
.wex.is-enhanced[data-active="2"] .wex-span[data-f="2"]:not(.is-support),
.wex.is-enhanced[data-active="3"] .wex-span[data-f="3"] { border-bottom: 2px solid var(--ui-act); background: rgba(244, 246, 248, .1); }
/* the supported part of the claim: a plain solid underline, distinct from the flagged passage */
.wex[data-active="2"] .wex-span.is-support[data-f="2"] { border-bottom: 1.5px solid var(--wex-ink); background: none; }

.wex-footer { max-width: 60rem; margin-top: 1.4rem; }
.wex-footer p { font: 400 .95rem/1.55 var(--hp-sans); color: var(--wex-ink); }
.wex-footer .wex-footnote { margin-top: .35rem; font-size: .82rem; color: var(--wex-muted); }

@media (prefers-reduced-motion: reduce) {
  .wex *, .wex-span, .wex-item, .wex-row { transition: none !important; }
}
@media (max-width: 1100px) {
  .wex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  .wex-draft { grid-column: 1; grid-row: 1; }
  .wex-evidence { grid-column: 2; grid-row: 1; }
  .wex-change { grid-column: 1 / -1; grid-row: 2; }
  .wex-evidence .wex-col-arrow { display: none; }
}
@media (max-width: 760px) {
  /* the picker stays in reach while the reader scrolls through the finding */
  .wex.is-enhanced .wex-picker-wrap { position: sticky; top: calc(var(--header-h, 4rem) + .3rem); z-index: 3; margin-inline: -.4rem; padding: .5rem .4rem .6rem; background: #080b0f; }
  .wex.is-enhanced .wex-picker-wrap .wex-pane-head { display: none; }
  .wex-picker { gap: .4rem; }
  .wex-pick { position: relative; flex-direction: column; gap: .3rem; padding: .55rem .6rem; border-radius: 8px; }
  .wex-pick-text strong { font-size: .82rem; }
  .wex-gist { font-size: .74rem; line-height: 1.3; }
  .wex-pick .wex-kind { display: none; }
  .wex-pick .wex-go { position: absolute; top: .75rem; right: .6rem; margin: 0; }
  .wex-num { width: 1.4rem; height: 1.4rem; font-size: .72rem; }
  .wex-grid { grid-template-columns: minmax(0, 1fr); margin-top: 1.2rem; }
  .wex-draft, .wex-evidence, .wex-change { grid-column: 1; grid-row: auto; }
  .wex-col-arrow { display: none; }
  .wex-page { padding: 1.1rem 1rem; }
  .wex-panel { padding: 1rem; }
  .wex-parts thead { display: none; }
  .wex-parts tr { display: block; padding: .6rem 0; border-top: 1px solid var(--wex-edge); }
  .wex-parts tbody th, .wex-parts td { display: block; width: auto; padding: 0; border: 0; }
  .wex-parts td { margin-top: .4rem; }
}