/* PARVIS — pair-judgement UI.
   Layered on strategios.css; brand rules apply (Inter, black and white, no
   decorative colour). The only visual emphasis is size and space, because the
   respondent has one decision to make per screen and nothing should compete
   with the two statements. */

.criterion {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 1.5rem 0 1rem;
}

.pair {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .pair { grid-template-columns: 1fr 1fr; }
}

/* Statements are buttons, not radio+submit: one tap per judgement. 45 pairs at
   two taps each is 45 extra interactions and a measurably longer sitting. */
.statement {
  display: block;
  width: 100%;
  min-height: 8rem;
  padding: 1.25rem;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
}

.statement:hover,
.statement:focus-visible { background: currentColor; }
.statement:hover > *,
.statement:focus-visible { color: Canvas; }
.statement:hover { color: Canvas; background: CanvasText; }

.tie {
  display: block;
  margin: 1.25rem auto 0;
  padding: 0.6rem 1.5rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
}

.progress { margin-bottom: 0.25rem; font-size: 0.9rem; }

.progress-bar {
  height: 2px;
  background: color-mix(in srgb, currentColor 20%, transparent);
  margin-bottom: 0.5rem;
}
.progress-bar > span { display: block; height: 100%; background: currentColor; }

.block-list { list-style: none; padding: 0; }
.block-item { padding: 1rem 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.notice { padding: 0.75rem 1rem; border-left: 3px solid currentColor; }
.muted { opacity: 0.7; font-size: 0.9rem; }

/* Landing and index pages.
   strategios.css styles every h2 as a small uppercase label, which suits the
   apps' dashboards. Here an h2 opens a section a participant reads, so it is a
   real heading again: sentence case, full colour, clearly above body size. */
main h2 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: inherit;
  margin: 0 0 var(--s-3);
}
main p { margin: 0 0 var(--s-4); }
main .lead { font-size: 1.25rem; line-height: 1.55; }
main .meta { font-size: 1rem; line-height: 1.6; color: inherit; opacity: 0.8; }
.nowrap { white-space: nowrap; }

.block-list { margin-top: var(--s-8); }
main .block-item { padding: var(--s-6) 0; }
.block-item > :last-child { margin-bottom: 0; }

/* More space between sections than within them. */
.research {
  margin-top: var(--s-10);
  padding-top: var(--s-8);
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.research > :last-child { margin-bottom: 0; }
.start-form {
  margin-top: var(--s-10);
  padding-top: var(--s-8);
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/* The stratum question: no browser box, legend as a heading, options in a row. */
.strata { border: 0; padding: 0; margin: 0 0 var(--s-8); min-width: 0; }
.strata legend { padding: 0; margin-bottom: var(--s-3); font-size: 1rem; font-weight: 600; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-3); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}
.choice input,
.consent input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: none;
  accent-color: currentColor;   /* visible in both themes; the canon's black vanishes in dark */
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}
.consent input { margin-top: 0.2em; }

.start-form .btn { min-width: 10rem; font-size: 1rem; transition: opacity 0.3s, background 0.15s; }
.start-form .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Ranking during a meeting (PARVIS-PHP /r/). A tap moves a statement into
   "Din ordning", and a statement can also be dragged there or within it; the
   number is the only mark of a placed statement, so placed and unplaced differ
   by weight, not by colour. Without JavaScript each statement has a place
   selector instead. */
.rank-list { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.rank-heading { margin: var(--s-6) 0 var(--s-3); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.rank-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.rank-label { flex: 1 1 16rem; margin: 0; font-size: 1.05rem; font-weight: 400; line-height: 1.45; }
.rank-select { font: inherit; padding: 0.35rem 0.5rem; }
.rank-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
}
.rank-toggle[aria-pressed="true"] { border-width: 2px; font-weight: 500; }
.rank-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.rank-badge {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed currentColor;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rank-toggle[aria-pressed="true"] .rank-badge { border-style: solid; background: var(--fg); color: var(--bg); }
.rank-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
.rank-status { flex-basis: 100%; margin: 0; }
.rank-actions .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rank-reset { font: inherit; font-size: 1rem; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* Klar men inte inskickad: på en liten skärm följer Skicka med i underkanten,
   så att den som har ordnat alla påståenden inte tror att svaret är lämnat. */
@media (max-width: 40rem) {
  .rank-actions.rank-klar {
    position: sticky;
    bottom: 0;
    margin-left: calc(-1 * var(--s-4));
    margin-right: calc(-1 * var(--s-4));
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid currentColor;
  }
}
.rank-hint { margin-top: calc(-1 * var(--s-2)); }
.rank-text { flex: 1 1 auto; }
.rank-grip {
  flex: none;
  align-self: center;
  width: 12px;
  height: 18px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 2px);
  background-size: 6px 6px;
  opacity: 0.55;
  cursor: grab;
}
/* Long press on a touch screen starts a drag, not the text menu. */
.rank-draggable .rank-toggle { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rank-draggable .rank-chosen { min-height: 4rem; }
.rank-draggable .rank-chosen:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  border: 1px dashed currentColor;
  border-radius: 2px;
}
.rank-draggable .rank-chosen:empty::before { content: "Dra hit eller tryck på ett påstående"; opacity: 0.7; }
.rank-ghost .rank-toggle { border-style: dashed; }
.rank-ghost .rank-toggle > * { opacity: 0.3; }
/* SortableJS makes the dragged copy translucent inline; the text would show double over the gap below. */
.rank-dragging { opacity: 1 !important; }
.rank-dragging .rank-toggle { background: var(--bg); border-width: 2px; cursor: grabbing; }

/* Gruppernas sammanfattningar (PARVIS-PHP /s/<slug>) */
.summary-prompt { margin: var(--s-6) 0 var(--s-4); padding-left: var(--s-4); border-left: 3px solid currentColor; font-style: italic; font-size: 1.5rem; font-weight: 500; line-height: 1.35; }
.summary-prompt p { margin: 0; }
.summary-questions { margin: 0 0 var(--s-6); padding-left: 1.4rem; list-style: decimal; }
.summary-questions li { margin-bottom: var(--s-2); }
.summary-facts { margin: 0 0 var(--s-4); padding-left: 1.2rem; list-style: disc; }
.summary-facts li { margin-bottom: var(--s-2); }
.research h3 { margin: var(--s-4) 0 var(--s-2); font-size: 1rem; font-weight: 600; }
.summary-form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-6); }
.summary-form .field { display: flex; flex-direction: column; gap: var(--s-2); font-size: 1.5rem; font-weight: 600; line-height: 1.25; margin-top: var(--s-6); }
.summary-form input[type="text"],
.summary-form textarea { font: inherit; font-size: 1.15rem; font-weight: 400; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 2px; padding: 0.5rem 0.65rem; }
.summary-form input[type="text"] { width: 100%; max-width: 22rem; box-sizing: border-box; }
.summary-form textarea { width: 100%; box-sizing: border-box; line-height: 1.5; }
.summary-form input[type="text"]:focus-visible,
.summary-form textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.summary-form .muted { margin: 0; }
.summary-form .btn { align-self: flex-start; margin-top: var(--s-4); }

/* Ordmolnet, visas på skärmen i det gemensamma samtalet: alltid svart med vit text */
.cloud-page { margin: 0; min-height: 100vh; background: #000; color: #fff; }
.cloud { box-sizing: border-box; height: 100vh; display: flex; flex-direction: column; padding: 2.5vh 4vw 2vh; }
.cloud-title { margin: 0; text-align: center; text-transform: uppercase; font-weight: 600; font-size: clamp(1.6rem, 4vh, 3rem); letter-spacing: 0.01em; }
.cloud-prompt { margin: 0.6vh auto 0; max-width: 60rem; text-align: center; color: #a0a0a0; font-style: italic; font-size: clamp(1rem, 2.2vh, 1.4rem); }
.cloud-canvas-wrap { position: relative; flex: 1; min-height: 0; margin: 1.5vh 0; }
.cloud-canvas { display: block; margin: 0 auto; }
.cloud-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: #a0a0a0; font-size: 1.5rem; }
.cloud-count { margin: 0; text-align: center; font-size: clamp(1rem, 2.2vh, 1.4rem); font-variant-numeric: tabular-nums; }
.cloud-note { margin: 0.4vh 0 0; text-align: center; color: #a0a0a0; font-size: clamp(1rem, 2vh, 1.3rem); }
.cloud-status { margin: 0.2vh 0 0; text-align: center; color: #a0a0a0; font-size: clamp(0.85rem, 1.6vh, 1.05rem); font-variant-numeric: tabular-nums; }

/* Resultatsidorna (PARVIS-PHP /b/<närbild>/resultat och /r/<närbild>/resultat).
   Figurerna är ritade svart på vitt för rapporten, så de får en vit yta även i mörkt läge. */
.result-figure { margin: 1.5rem 0; }
.result-figure img { display: block; width: 100%; height: auto; background: #fff; padding: 0.5rem; border-radius: 4px; }
.result-figure figcaption { margin-top: 0.5rem; font-size: 0.875rem; }