/* questionnaire.css — self-assessment questionnaire widget.
   Linked from partials/questionnaire.html through asset-bust.html, so it loads only on a
   questionnaire page AND gets a ?v=<hash> — the front-matter `css:` route has no cache
   busting, and under the site's long asset TTL an edit would never reach a returning reader.
   → doc/questionnaires.md, planing/questionnaires-s2.md */

.questionnaire {
  margin-top: 2em;
  border-top: 2px solid #ddd;
  padding-top: 1.5em;
}

/* `hidden` is only display:none from the UA sheet, so ANY author display rule silently beats it —
   and this widget sets display:flex on the scales, the commit line and the advance line. Without
   this, the JS hides an element and the reader keeps seeing it. One rule for the whole widget, so
   the trap cannot come back with the next flex container. */
.questionnaire [hidden] { display: none !important; }

.questionnaire-items { list-style: none; margin: 0; padding: 0; }

.q-progress {
  font-family: monospace;
  font-size: 0.85em;
  color: #666;
  margin: 0 0 0.5em;
}

.q-question { font-size: 1.1em; margin-bottom: 1em; }

.q-answer-label { display: block; font-weight: bold; margin-bottom: 0.3em; }

.q-answer {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.6em;
  border: 1px solid #bbb;
}
.q-answer[readonly] { background: #f6f6f6; color: #555; }

/* The two rating scales share one look: a stack of full-width choices, so the reader picks
   a described option rather than a bare number. */
.q-scale {
  border: none;
  margin: 1em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.q-scale legend { font-weight: bold; padding: 0; margin-bottom: 0.5em; }

/* Confidence is a LADDER, not four equivalent choices, so the options carry their own rung:
   a meter that lengthens with the level. Correctness deliberately gets no such treatment —
   its steps are qualitative descriptions of an answer, not degrees of one thing. */
.q-confidence .q-rate {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.q-confidence .q-rate::before {
  content: "";
  flex: none;
  width: calc(var(--lvl) * 0.55rem);
  height: 0.55rem;
  background: currentColor;
  opacity: 0.35;
}
.q-confidence .q-rate[data-value="3"] { --lvl: 4; }
.q-confidence .q-rate[data-value="2"] { --lvl: 3; }
.q-confidence .q-rate[data-value="1"] { --lvl: 2; }
.q-confidence .q-rate[data-value="0"] { --lvl: 1; }
.q-confidence .q-rate.is-chosen::before { opacity: 1; }

.q-btn {
  font: inherit;
  text-align: left;
  padding: 0.5em 0.8em;
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
}
.q-btn:hover:not(:disabled) { background: #f0f0f0; }
.q-btn:disabled { cursor: default; opacity: 0.6; }
.q-btn.is-chosen {
  border-color: #d35400;
  background: #fdf0e6;
  opacity: 1;
  font-weight: bold;
}

/* The two step-forward buttons: the only place in the widget with a filled accent, because
   they are the only actions that change what the reader can still take back. */
.q-btn-primary {
  border-color: #d35400;
  background: #d35400;
  color: #fff;
  font-weight: bold;
}
.q-btn-primary:hover:not(:disabled) { background: #b84900; }

.q-commit, .q-advance {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  flex-wrap: wrap;
  margin-top: 1.2em;
}
.q-commit-note { font-size: 0.85em; color: #666; }

/* "I don't know": deliberately the quietest control in the widget. It is a legitimate answer,
   but an inviting one would tempt the reader out of the retrieval effort the exercise is for. */
.q-quiet {
  border: none;
  background: none;
  padding: 0.3em 0;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.q-quiet:hover:not(:disabled) { background: none; color: #d35400; }
.q-unknown-line { margin: 0.6em 0 0; }

.q-btn-start, .q-actions .q-btn { text-align: center; }
/* Section labels inside the report. Small and quiet BY DESIGN: they name the three parts
   (summary, map, exports) and give the report a rhythm, without competing with «Αποτελέσματα»,
   which is the title of the whole thing. Before this the map's heading printed larger than the
   report title, so the subtitle outranked the title. */
.q-section-head {
  font-size: 0.7rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin: 2em 0 0.6em;
}
.q-actions { display: flex; gap: 0.5em; flex-wrap: wrap; margin-top: 0; }

/* Set apart from the exports by distance, by weight AND by side: the destructive control lives at
   the opposite edge from where the hand rests after the export buttons, so it cannot be hit by a
   mis-aimed click. */
.q-actions-secondary {
  margin: 2em 0 0;
  padding-top: 1em;
  border-top: 1px solid #e2e2e2;
  text-align: right;
}

/* The reveal is the only irreversible moment in the flow, and the only place in the widget
   that moves. Half a second, once, where the commitment actually happens; nowhere else. */
.q-reveal {
  margin-top: 1.5em;
  border-left: 3px solid #d35400;
  padding-left: 1em;
  animation: q-unfold 0.45s ease-out both;
}
@keyframes q-unfold {
  from { opacity: 0; transform: translateY(-0.4em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
/* the lock is felt as well as stated: the answer settles back as the solution arrives */
.q-answer { transition: background-color 0.45s ease-out, color 0.45s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .q-reveal { animation: none; }
  .q-answer { transition: none; }
}
.q-expected h2 { font-size: 1em; margin-top: 0; }

/* ── The calibration map ──────────────────────────────────────────────
   The one place in the widget that spends any boldness. Everything else stays quiet so this
   reads as a diagnosis rather than as a table of numbers. */
.q-grid-wrap { margin: 1em 0 2.5em; overflow-x: auto; }
.q-grid { border-collapse: collapse; font-size: 0.85em; }
.q-grid th, .q-grid td { border: 1px solid #e2e2e2; }
.q-grid thead th, .q-grid tbody th, .q-grid tfoot th {
  font-weight: normal;
  color: #666;
  text-align: left;
  padding: 0.4em 0.7em;
  border: none;
}
.q-grid thead th { text-align: center; vertical-align: bottom; max-width: 7em; line-height: 1.2; }
.q-grid td {
  width: 6.2em;
  height: 3.2em;
  text-align: center;
  vertical-align: middle;
  padding: 0.2em;
}

/* Good calibration is a LINE, not a set of cells: correctness rising with confidence. Tinted,
   never outlined, so it reads as ground the dots sit on. */
.q-grid td.q-diag { background: #eaf0ea; }

.q-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  min-width: 0.5rem;
  min-height: 0.5rem;
  border-radius: 50%;
  background: #4a5d4a;
  color: #fff;
}
.q-dot-n { font-size: 0.7rem; line-height: 1; }

/* Sure and wrong: the cell the whole exercise exists to surface, and the only red-orange in
   the map. It gets a word, not a tooltip — a finding you have to hover to discover is a
   finding the reader will miss. */
.q-grid td.q-danger { background: #fdf0e6; }
.q-grid td.q-danger .q-dot { background: #d35400; }
.q-cell-name {
  display: block;
  margin-top: 0.3em;
  font-size: 0.62rem;
  line-height: 1.15;
  color: #d35400;
  text-transform: uppercase;
}

/* Only the diagonal is captioned; see the JS for why the horizontal arrows were removed. */
.q-axis-cell { border: none !important; height: auto !important; padding: 0.5em 0 0 !important; }
.q-axis {
  display: flex;
  justify-content: center;
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.q-axis > span { white-space: nowrap; }
.q-axis-mid { text-transform: none; letter-spacing: 0; font-style: italic; white-space: normal; }

/* Coverage first, calibration second: how much you knew and how well you know what you know are
   two different measurements, so the report states them apart instead of folding one into the
   other. */
.q-tally {
  display: flex;
  gap: 2.5em;
  flex-wrap: wrap;
  margin: 0 0 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #e2e2e2;
}
.q-tally dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
}
.q-tally dd { margin: 0.15em 0 0; font-size: 1.3em; }

.q-grid-scope { font-size: 0.7rem; font-weight: normal; color: #888; text-transform: none; letter-spacing: 0; }

.q-report-date { margin: -0.5em 0 1.5em; font-size: 0.85em; color: #888; }

/* The map shows, this says. One sentence, and the only place in the report that raises its voice
   — and only when there is something to raise it about. */
.q-verdict { margin: 0 0 1em; font-size: 1.05em; }
.q-verdict.is-alarm {
  border-left: 3px solid #d35400;
  padding-left: 0.8em;
  color: #a8430a;
}

.q-help { margin-top: 0.5em; font-size: 0.85em; }
.q-help > summary { cursor: pointer; color: #666; }
.q-help > summary:hover { color: #d35400; }
.q-help p { margin: 0.6em 0 0; color: #555; }
.q-result.is-skipped .q-result-q { font-weight: normal; color: #666; }
.q-result-skipped { margin: 0.2em 0; font-size: 0.9em; color: #888; font-style: italic; }

/* The per-item list, collapsed by default. The summary is styled as a control rather than as a
   heading, since that is what it is. */
.q-answers { margin: 0 0 1em; }
.q-answers > summary {
  cursor: pointer;
  padding: 0.5em 0;
  color: #444;
  border-bottom: 1px solid #e2e2e2;
}
.q-answers > summary:hover { color: #d35400; }
.q-answers[open] > summary { margin-bottom: 1em; }

.q-results { padding-left: 1.2em; }
.q-result { margin-bottom: 1.2em; }
.q-result-q { font-weight: bold; margin-bottom: 0.3em; }
.q-result-given, .q-result-scores { margin: 0.2em 0; }
.q-result-scores { font-size: 0.9em; color: #666; }

/* The correct answer inside the per-item list: the same accent rule the reveal wears during the
   flow, so «this is the solution» looks the same wherever it appears, and the same shape the
   downloaded archive already used. */
.q-result-expected {
  margin-top: 0.6em;
  border-left: 3px solid #d35400;
  padding-left: 1em;
}
.q-result-expected > b {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d35400;
  margin-bottom: 0.2em;
}
.q-result-expected p:last-child { margin-bottom: 0; }

.q-notice { background: #f6f6f6; padding: 0.8em; }

/* The closing step */
.q-help-used { margin-bottom: 1.5em; }
/* Plain prose, not a card: it sits inside a zone that already has a label and a rule above it,
   and a grey box here would read as a second panel competing with the one action beside it. */
.q-closing-note {
  margin: 1.2em 0 0;
  font-size: 0.9em;
  color: #555;
}
/* The divide between «this is yours» and «this goes to the author». One hairline, the same one
   the destructive control below already uses, so the report closes on two rules and no new device. */
.q-split {
  border: 0;
  border-top: 1px solid #e2e2e2;
  margin: 2.2em 0 0;
}

/* Two offers, told apart by their own lead line: the data (a click) and the words (a message).
   Read as one block they looked like one offer with a button and a footnote. */
.q-offer { margin-top: 1.4em; }
.q-offer-what {
  margin: 0 0 0.5em;
  font-weight: bold;
  font-size: 0.95em;
}

/* Sending the run to the author: an ordinary button, deliberately NOT the filled accent — the
   exports are what the reader came for, and this is an offer. */
.q-send { margin: 0; }
/* The aside on each lead: what it is worth to the author. Lighter than the ask it hangs off,
   so the eye takes the object first and the reason second. */
.q-optional { font-weight: normal; color: #777; font-size: 0.85em; }
.q-send-note { display: block; margin: 0.5em 0 0; }
.q-export-note { display: block; margin: 0.6em 0 0; }
.q-send-status { margin: 0.5em 0 0; font-size: 0.9em; }
.q-send-status.ok { color: #2b7a3d; }
.q-send-status.err { color: #b03a2e; }

.q-context { margin: 0 0 1.5em; }
.q-context-notes b {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 0.3em;
}
.q-context-notes p { margin: 0; white-space: pre-wrap; }

/* User-entered text keeps its line breaks. pre-wrap rather than converting newlines to <br>:
   it preserves spacing too, needs no markup injected into someone else's words, and it is one
   rule instead of a transformation repeated at every place the text is printed. The span keeps
   it off the parent, whose own source whitespace would otherwise be preserved as well. */
/* The answer starts on its own line, under its label: it is a block of the reader's own writing,
   often several lines long, and running it on after «Η απάντησή σου:» made the first line read as
   part of the label. Same shape the correct answer already has in the downloaded archive. */
.q-given { white-space: pre-wrap; display: block; margin-top: 0.25em; }

/* Returning to a finished run. The card holds what concerns the STORED attempt; starting a new
   one sits outside it, because it is about the questionnaire, not about the old result. */
.q-card {
  border: 1px solid #ddd;
  border-left: 3px solid #4a5d4a;
  padding: 1em 1.2em;
  margin-bottom: 1em;
}
.q-card-lead { margin: 0 0 0.8em; }
.q-finished-date { color: #888; }
.q-card-actions { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin: 0; }
.q-after-card { display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap; margin: 0; }

@media (prefers-color-scheme: dark) {
  .questionnaire { border-top-color: #444; }
  .q-answer { background: #222; color: #eee; border-color: #555; }
  .q-answer[readonly] { background: #2a2a2a; color: #aaa; }
  .q-btn { background: #2a2a2a; color: #eee; border-color: #555; }
  .q-btn:hover:not(:disabled) { background: #333; }
  .q-btn.is-chosen { background: #3a2a1e; }
  .q-btn-primary { background: #d35400; color: #fff; }
  .q-notice { background: #2a2a2a; }
  .q-card { border-color: #444; border-left-color: #8fa88f; }
  .q-actions-secondary { border-top-color: #3a3a3a; }
  .q-answers > summary { color: #ccc; border-bottom-color: #3a3a3a; }
  .q-closing-note { color: #aaa; }
  .q-split { border-top-color: #3a3a3a; }
  .q-send-status.ok { color: #7fb98a; }
  .q-send-status.err { color: #e08c7f; }
  .q-grid th, .q-grid td { border-color: #3a3a3a; }
  .q-grid thead th, .q-grid tbody th { color: #999; }
  .q-grid td.q-diag { background: #232a23; }
  .q-grid td.q-danger { background: #3a2a1e; }
  .q-dot { background: #8fa88f; color: #1a1a1a; }
}

/* The "how this is calculated" affordance. A number that judges the reader should be able to
   explain itself on demand, without the explanation sitting in the way of everyone else. */
.q-info {
  font: inherit;
  font-size: 0.7em;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  border: 1px solid #bbb;
  border-radius: 50%;
  background: #fff;
  color: #666;
  cursor: pointer;
  vertical-align: 0.15em;
}
.q-info:hover { border-color: #d35400; color: #d35400; }

.q-algo {
  max-width: 34em;
  border: 1px solid #ccc;
  padding: 1.5em;
}
.q-algo::backdrop { background: rgba(0, 0, 0, 0.35); }
.q-algo h2 { margin-top: 0; font-size: 1.1em; }
.q-algo li { margin-bottom: 0.4em; }
.q-algo-caveat { font-size: 0.9em; color: #666; }

@media (prefers-color-scheme: dark) {
  .q-info { background: #2a2a2a; color: #ccc; border-color: #555; }
  .q-algo { background: #222; color: #eee; border-color: #555; }
  .q-algo-caveat { color: #aaa; }
}

.q-closing-lead { color: #555; margin-bottom: 1.5em; }
/* the notes label follows a fieldset, which has no bottom margin of its own */
.questionnaire-closing .q-answer-label { margin-top: 1.8em; }
@media (prefers-color-scheme: dark) { .q-closing-lead { color: #bbb; } }

/* Entry-screen introduction: how the thing works and what stays on the device. Quiet — it is
   orientation, not content — and gone the moment the reader starts. */
.questionnaire-intro { margin-bottom: 1.5em; }
.questionnaire-intro p:not(.q-section-head) { color: #555; margin: 0 0 0.7em; }
.questionnaire-intro .q-section-head { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  .questionnaire-intro p:not(.q-section-head) { color: #bbb; }
}

/* ── The /questionnaires/ index ─────────────────────────────────────────
   Deliberately NOT blog teasers: what you want before opening one is what it covers, how long it
   is, and whether you have already sat it — not a byline and a "read more". */
.questionnaires-lede { margin-bottom: 2.5em; }
.questionnaires-lede p { color: #555; margin: 0 0 0.7em; }

.q-card-row {
  padding: 1.1em 0;
  border-bottom: 1px solid #e2e2e2;
}
.q-card-row:first-of-type { border-top: 1px solid #e2e2e2; }
.q-card-title { font-size: 1.15em; margin: 0 0 0.3em; }
.q-card-summary { margin: 0 0 0.5em; color: #555; }
.q-card-meta {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
}
/* the state badge is the reader's own history, so it carries the accent the rest of the row does not */
.q-card-state::before { content: " · "; }
.q-card-state.is-done { color: #4a5d4a; }
.q-card-state.is-unfinished { color: #d35400; }

@media (prefers-color-scheme: dark) {
  .questionnaires-lede p, .q-card-summary { color: #bbb; }
  .q-card-row { border-bottom-color: #3a3a3a; }
  .q-card-row:first-of-type { border-top-color: #3a3a3a; }
  .q-card-state.is-done { color: #8fa88f; }
}