/* Stage 3 styles (step L3). Loaded after common.css, which stays unchanged.
   Two kinds of page:
   - form pages (discussione.html, s3-benvenuto.html, later the
     questionnaire and the thank-you page) look like Stage 2's form pages:
     common.css, plus only the small pieces below that have no Stage 2
     equivalent (the provisional label, the error box);
   - discussion screens (body.s3-discussion: the alias reveal, later the
     feed and the open case) follow the prototype and the Stage 2 board:
     PT Sans body text, Poppins headings, the board's tokens, the orange
     focus ring. */

/* The brand typefaces, from the app's own font files (the same ones
   common.css declares). Declared here too because the discussion screens,
   like the Stage 2 board, do not load common.css; on form pages, which load
   both, the identical declarations are simply duplicates. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/poppins-900.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ptsans-400.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ptsans-700.woff2") format("woff2"); }

:root {
  --s3-indigo: #2F378A;
  --s3-blue: #404D9E;
  --s3-pink: #E51466;
  --s3-orange: #F9A11E;
  --s3-yellow: #F9EE6F;
  --s3-bg: #F0F0F2;
  --s3-surface: #FFFFFF;
  --s3-surface-2: #F6F6FA;
  --s3-text: #404040;
  --s3-muted: #65687C;
  --s3-line: #D8DAE6;
  --s3-line-2: #BFC3D8;
  --s3-tint: #E6E8F4;
  --s3-head: "Poppins", "Avenir LT Pro", "Avenir", system-ui, sans-serif;
  --s3-body: "PT Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- shared by every Stage 3 page --------------------------------------- */

/* `hidden` must always win: several Stage 3 blocks set their own display
   (flex), which would otherwise override the attribute -- caught by the
   narrow-window test, which also hid a visible error panel on s3-nome. */
[hidden] { display: none !important; }

/* A text still marked PLACEHOLDER on the server, or wording the page
   carries that is not final yet: impossible to miss. */
.s3-provisional {
  display: inline-block;
  margin: 6px 0 0;
  padding: 3px 8px;
  border: 2px dashed #B00020;
  border-radius: 6px;
  background: #FFF0F0;
  color: #B00020;
  font: 700 12px/1.3 var(--s3-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.s3-is-provisional { outline: 2px dashed #B00020; outline-offset: 4px; }
p > .s3-provisional, h1 > .s3-provisional { margin-left: 8px; vertical-align: middle; }

.s3-message {
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0 0;
  background: #FFF4E5;
  color: #6B3A00;
  line-height: 1.5;
}
.s3-message[hidden] { display: none; }

/* --- discussion screens ---------------------------------------------------- */

body.s3-discussion {
  margin: 0;
  box-sizing: border-box;
  background: var(--s3-bg);
  color: var(--s3-text);
  font: 400 16px/1.5 var(--s3-body);
}
/* The focus ring (step L9): indigo, drawn outside the element, so it stands
   at least 3:1 against every background it sits on (white 10.3:1, the page
   9.1:1). The orange of the prototype was 2.1:1 on white and 1.8:1 on the
   page. No focusable element sits on an indigo background. */
body.s3-discussion :focus-visible,
body.s3-discussion textarea:focus {
  outline: 3px solid var(--s3-indigo);
  outline-offset: 2px;
}
body.s3-discussion a { color: var(--s3-indigo); }
body.s3-discussion a:hover { color: var(--s3-pink); }

.s3-topbar {
  background: var(--s3-surface);
  box-shadow: 0 3px 0 var(--s3-pink);
  position: relative;
  z-index: 20; /* above the page, below the dialogs (50) */
}
/* Fixed bars (2 November 2026): on the forum page the header stays at the top
   while the participant scrolls, and in an open audit the "Torna agli audit"
   bar stays right under it. scroll-padding-top keeps whatever gets focus
   (a link reached with Tab, the comment just published, a reply box) clear of
   both bars. Below 560 CSS px of window height the bars take too much room,
   so there they scroll away with the page, as before. */
@media (min-height: 560px) {
  body.s3-discussion #topbar.s3-topbar { position: sticky; top: 0; }
  .s3-backbar { position: sticky; top: 67px; z-index: 15; }
  html:has(#feed-view:not([hidden])) { scroll-padding-top: 88px; }
  html:has(#case-view:not([hidden])) { scroll-padding-top: 140px; }
}
.s3-topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 24px;
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.s3-logo { height: 26px; width: auto; display: block; }
.s3-section-tag {
  font-weight: 700;
  font-size: 13px;
  color: var(--s3-muted);
  padding-left: 14px;
  border-left: 2px solid var(--s3-line);
}
.s3-spacer { flex: 1 1 auto; }

.s3-alias-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: none;
}
.s3-alias-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  /* White, not the tint: the alias name in its colour must reach 4.5:1 (Verde
     was 4.32:1 on the tint, 5.27:1 on white); a light line keeps the shape. */
  background: #FFFFFF;
  border: 1px solid var(--s3-line);
}
.s3-alias-pill .s3-alias-badge { background: #FFFFFF !important; }
.s3-alias-name { font-family: var(--s3-head); font-weight: 600; font-size: 14px; }

.s3-primary-btn {
  min-height: 44px;
  padding: 11px 32px;
  border: 0;
  border-radius: 8px;
  background: var(--s3-pink);
  color: #FFFFFF;
  font: 600 16px var(--s3-head);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.s3-primary-btn:hover { background: #C70F5A; }

/* The alias reveal (prototype screen 1). */
.s3-reveal {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.s3-reveal-intro { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.s3-kicker {
  margin: 0;
  font: 600 13px var(--s3-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C70F5A; /* the primary button's hover pink: 5.1:1 on the page (the brighter pink was 3.99:1) */
}
.s3-reveal h1 {
  margin: 0;
  font: 900 34px/1.2 var(--s3-head);
  color: var(--s3-indigo);
}
.s3-reveal-text { margin: 0; font-size: 17px; line-height: 1.55; max-width: 520px; }
.s3-reveal-text p { margin: 0; }
.s3-reveal-card {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background: var(--s3-surface);
  border: 2.5px solid var(--s3-blue);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 6px 20px rgba(47, 55, 138, 0.12);
}
.s3-reveal-name { font: 900 32px var(--s3-head); }
.s3-reveal-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.s3-note { margin: 0; font-size: 14px; color: var(--s3-muted); line-height: 1.5; }
/* A notice (the respect note on the name page): a warm tint with an orange
   left rule and its own heading, so it never reads as an audit card (white,
   bordered) or as the feed's indigo box. */
.s3-notice {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  background: #FFF6E5;
  border-left: 4px solid var(--s3-orange);
  border-radius: 8px;
  padding: 14px 18px;
}
.s3-notice h2 { margin: 0 0 6px; font: 600 16px var(--s3-head); color: var(--s3-text); }
.s3-notice p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--s3-text); }

/* --- the discussion page: header, intro box, feed (step L4) -------------- */

.s3-counter { font-size: 14px; color: var(--s3-text); }
/* Each phrase of the counter is one colour and weight as a whole: body text
   while its requirement is open, indigo and bold with a check icon once met. */
.s3-count-part { white-space: nowrap; font-weight: 400; color: var(--s3-text); } /* inline: one baseline for both phrases */
.s3-count-part.is-met { font-weight: 700; color: var(--s3-indigo); }
.s3-count-part svg { vertical-align: -2px; margin-right: 4px; }
.s3-count-sep { color: var(--s3-muted); white-space: pre; }
.s3-concludi-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; }
.s3-concludi {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--s3-pink);
  color: #FFFFFF;
  font: 600 15px var(--s3-head);
  cursor: pointer;
}
/* Still focusable and explaining itself, so its text must read at 4.5:1 too
   (step L10): #404040 on the grey is 7.3:1 (the muted grey was 3.95:1). */
.s3-concludi[aria-disabled="true"] { background: var(--s3-line); color: var(--s3-text); cursor: not-allowed; }
.s3-concludi-note {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--s3-indigo);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  z-index: 5;
}
.s3-concludi-note[hidden] { display: none; }

.s3-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.s3-intro-box {
  background: var(--s3-indigo);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s3-intro-box h1 { margin: 0; font: 900 26px/1.25 var(--s3-head); color: #FFFFFF; }
.s3-intro-box .s3-intro-text p { margin: 0 0 6px; line-height: 1.55; max-width: 760px; }
.s3-intro-box .s3-intro-hint { margin: 0; line-height: 1.55; max-width: 760px; color: var(--s3-yellow); font-weight: 700; font-size: 15px; }
.s3-intro-box .s3-is-provisional { outline-color: var(--s3-yellow); }

.s3-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.s3-feed-head h2 { margin: 0; font: 600 17px var(--s3-head); color: var(--s3-indigo); }
.s3-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.s3-card {
  position: relative; /* the stretched link below covers the whole card */
  background: var(--s3-surface);
  border-radius: 12px;
  border: 1px solid var(--s3-line);
  padding: 20px 24px;
  display: flex;
  flex-direction: row; /* the content, then the chevron at the right edge, vertically centred */
  align-items: center;
  gap: 16px;
  transition: border-color 120ms, box-shadow 120ms;
}
/* The whole card opens the audit (2 November 2026): the card's one link,
   "Apri e discuti", stretches over the card with a transparent ::after, so a
   click anywhere on the card follows it, the card keeps one tab stop and one
   accessible name, and nothing interactive is nested. Hover: pointer cursor,
   indigo border and a soft indigo shadow. Keyboard focus on the link draws the
   focus ring around the whole card too. */
.s3-open-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.s3-card:hover { border-color: var(--s3-indigo); box-shadow: 0 2px 12px rgba(47, 55, 138, 0.16); cursor: pointer; }
.s3-card:has(.s3-open-link:focus-visible) { outline: 3px solid var(--s3-indigo); outline-offset: 2px; }
/* The card's content: the audit text (and badge), then its first two events. */
.s3-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.s3-card-events { display: flex; gap: 10px; }
.s3-card-event {
  flex: 1 1 0;
  min-width: 0;
  background: var(--s3-surface-2);
  border: 1px solid var(--s3-line);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Lighter than the audit text (PT Sans 700 17 px): regular weight, 13 px,
   muted; at most two lines on the feed (what the server sent is still in the
   page for assistive technology; the full text is in the open audit). */
.s3-card-event .s3-event-text {
  font-size: 13px; /* 14 px until 3 November 2026: 130 characters took three lines at 1024 px */
  font-weight: 400;
  color: var(--s3-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* A safety net only (3 November 2026): the server already shortens each
     event to 130 characters, which fits two lines at 1024 px. */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.s3-card-top { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.s3-card-headline { max-width: 860px; flex: 1 1 420px; min-width: 0; }
.s3-card-text { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.55; color: var(--s3-text); white-space: pre-line; }
/* The invented author after the audit text (3 November 2026): regular
   italic. Since 5 November 2026 with a round icon (22 px on a card, 30 px in
   the open audit) and the name in the author's colour (s3-icons.js
   AUTHOR_COLOURS, each at least 4.5:1 on white and on its tint); muted grey
   for a name the table does not know. */
.s3-byline { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font: italic 400 15px/1.45 var(--s3-body); color: var(--s3-muted); }
.s3-author-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
.s3-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--s3-tint);
  color: var(--s3-indigo);
  font-size: 13px;
  font-weight: 700;
}
.s3-card-actions { flex: none; display: flex; align-items: center; }
/* The link is static (not positioned), so its stretched ::after takes the
   card as its box; its own box is the chevron, a 36 px circle that brightens
   on hover and on focus: muted grey (5.5:1 on white) -> indigo on the tint. */
.s3-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none;
  transition: color 120ms, background-color 120ms;
}
body.s3-discussion .s3-open-link { color: var(--s3-muted); } /* above the page-wide link colour */
body.s3-discussion .s3-card:hover .s3-open-link,
body.s3-discussion .s3-open-link:focus-visible { color: var(--s3-indigo); background: var(--s3-tint); }
/* "Mostra altri audit" (3 November 2026), styled like the Stage 2 board's
   "Mostra altri eventi": indigo outline, rounded, a circular arrow; filled on
   hover. A 44 px target. */
.s3-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.s3-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  background: transparent;
  color: var(--s3-indigo);
  border: 1.5px solid var(--s3-indigo);
  border-radius: 22px;
  font: 600 14px var(--s3-head);
  cursor: pointer;
}
.s3-more-btn:hover { background: var(--s3-indigo); color: #FFFFFF; }
.s3-all-shown { margin: 0; color: var(--s3-muted); }
.s3-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.s3-panel {
  background: var(--s3-surface);
  border-radius: 12px;
  border: 1px solid var(--s3-line);
  padding: 22px 26px;
}
/* Room at the end of an open audit, so a reply box opened on the last comment
   can be scrolled fully into view. */
#case-view.s3-main { padding-bottom: 200px; gap: 0; }
/* 14 px between the back bar and the "Pattern descritto" card (3 November
   2026; it was about 67 px: the column gap twice and the empty status line).
   The status line stays in place as the live region, with no height while
   empty and 10 px below it while it says something. */
#case-view > .s3-backbar { margin-bottom: 14px; }
#case-view > .s3-status:empty { min-height: 0; }
#case-view > .s3-status:not(:empty) { margin-bottom: 10px; }
.s3-backbar {
  /* the page's own background, edge to edge of the column, so the text
     scrolling under it never shows through */
  background: var(--s3-bg);
  margin: -12px -24px 0;
  padding: 6px 24px;
  border-bottom: 1px solid var(--s3-line);
}
.s3-back-link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.s3-back-icon { flex: none; }

/* The narrow-window gate (Stage 2's approved wording, board.html). */
.s3-narrow { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.s3-narrow .box { max-width: 420px; background: var(--s3-surface); border-radius: 12px; padding: 26px 24px; text-align: center; }
.s3-narrow h1 { margin: 0 0 10px; font: 700 20px var(--s3-head); color: var(--s3-indigo); }
.s3-narrow p { margin: 0; line-height: 1.55; }

body.s3-discussion *, body.s3-discussion *::before, body.s3-discussion *::after { box-sizing: border-box; }
.s3-panel h1 { margin: 0 0 10px; font: 700 20px var(--s3-head); color: var(--s3-indigo); }
.s3-panel p { margin: 0; line-height: 1.55; }

/* --- the open case, read only (step L5) ------------------------------------ */

.s3-status { margin: 0; min-height: 1.2em; color: var(--s3-muted); }
.s3-retry-btn {
  margin-top: 12px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--s3-line-2);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--s3-indigo);
  font: 700 15px var(--s3-body);
  cursor: pointer;
}
/* The open audit (5 November 2026): no outer white container any more. The
   pattern sits in a box of its own in the palette's indigo tint (--s3-tint,
   #E6E8F4: the audit text #404040 8.5:1, the heading indigo 8.5:1, the author
   colours 4.54:1 (Turchese) to 13.7:1 (Nero)); "Eventi collegati" and the
   white event cards sit directly on the page background below it. */
.s3-case {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.s3-pattern-box {
  background: var(--s3-tint);
  border-radius: 12px;
  border: 1px solid var(--s3-line);
  padding: 22px 26px;
}
/* A name the author table does not know is shown in the page's text colour
   here (muted grey would be 4.50:1 on the tint, right at the limit). */
.s3-pattern-box .s3-byline { color: var(--s3-text); }
/* The audit text: one block, the same typeface, weight and size as on the feed --
   PT Sans 700 (fonts/ptsans-700.woff2), so it stands apart from the linked events. */
.s3-case-text {
  margin: 0;
  font: 700 17px/1.55 var(--s3-body);
  color: var(--s3-text);
  max-width: 820px;
  white-space: pre-line;
}
.s3-events { display: flex; flex-direction: column; gap: 12px; }
.s3-events h2, .s3-discussion-section > h2, .s3-case-heading { margin: 0; font: 600 16px var(--s3-head); color: var(--s3-indigo); }
.s3-case-heading { margin-bottom: 8px; } /* "Pattern descritto": the same typeface, size and colour as "Eventi collegati" */
.s3-discussion-section { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.s3-discussion-section > h2 { font-size: 20px; }
.s3-event-list { display: flex; flex-wrap: wrap; gap: 14px; }
.s3-event {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--s3-surface); /* white on the page background (#F6F6FA inside the old white container) */
  border: 1px solid var(--s3-line);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s3-event-label { font-size: 13px; font-weight: 700; color: var(--s3-muted); }
.s3-event-text { margin: 0; line-height: 1.55; white-space: pre-line; }

.s3-thread-box {
  background: var(--s3-surface);
  border-radius: 12px;
  border: 1px solid var(--s3-line);
  padding: 8px 22px 18px;
}
.s3-empty { margin: 12px 0 4px; color: var(--s3-muted); }
.s3-thread, .s3-replies { list-style: none; margin: 0; padding: 0; }
.s3-thread > .s3-comment-item + .s3-comment-item { border-top: 1px solid var(--s3-line); margin-top: 6px; padding-top: 6px; }
/* 26 px per level, the 2 px line included; from level 7 on the lists keep
   nesting but no longer move right (and draw no further line). */
.s3-replies.s3-indent { margin-left: 0; padding-left: 24px; border-left: 2px solid var(--s3-line); }
.s3-comment { padding: 12px 0 8px; display: flex; flex-direction: column; gap: 8px; border-radius: 6px; }
.s3-comment-head { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: inherit; }
.s3-comment-alias { font: 600 15px var(--s3-head); }
.s3-comment-tag { font-size: 13px; color: var(--s3-muted); }
.s3-comment-edited { font-style: italic; }
.s3-comment-text { margin: 0; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.s3-comment-removed .s3-comment-text { color: var(--s3-muted); font-style: italic; }

/* --- writing (step L6): the boxes, the private question, the dialog ---------- */

.s3-write-notice { margin: 0; padding: 12px 16px; border-radius: 10px; background: #FFF4E5; color: #6B3A00; line-height: 1.5; }
.s3-composer {
  background: var(--s3-surface);
  border-radius: 12px;
  border: 2px solid var(--s3-indigo);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s3-composer-reply {
  margin: 4px 0 12px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--s3-surface-2);
  border: 1px solid var(--s3-line);
}
.s3-composer-label { font: 600 16px var(--s3-head); color: var(--s3-indigo); }
.s3-composer-reply .s3-composer-label { font: 700 15px var(--s3-body); }
.s3-composer-text {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--s3-muted); /* a text field's edge: at least 3:1 (the lighter line was 1.75:1) */
  border-radius: 8px;
  font: 16px/1.5 var(--s3-body);
  color: var(--s3-text);
  background: #FFFFFF;
  resize: vertical;
}
.s3-count { margin: -4px 0 0; min-height: 1.2em; font-size: 13px; color: var(--s3-muted); }
.s3-count-over { color: #B00020; font-weight: 700; }
.s3-question { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.s3-question legend { padding: 0; font-weight: 700; font-size: 15px; color: var(--s3-text); }
.s3-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.s3-pill {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  border: 1.5px solid var(--s3-line-2);
  background: #FFFFFF;
  color: var(--s3-text);
}
.s3-pill input { margin: 0; accent-color: var(--s3-indigo); }
.s3-pill:has(input:checked) { border: 2px solid var(--s3-indigo); background: var(--s3-tint); color: var(--s3-indigo); font-weight: 700; }
.s3-pill:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.s3-question-note { margin: 0; font-size: 13px; color: var(--s3-muted); }
.s3-box-error { margin: 0; min-height: 0; color: #B00020; font-weight: 700; font-size: 14px; }
.s3-box-error:empty { display: none; }
/* The comment box, collapsed (3 November 2026): the label and a one-line
   field with its placeholder; everything else appears on focus. */
.s3-composer-more { display: flex; flex-direction: column; gap: 12px; }
.s3-composer.s3-collapsed .s3-composer-more { height: 0; margin-top: -12px; overflow: hidden; }
.s3-composer.s3-collapsed .s3-composer-text { resize: none; overflow: hidden; }
.s3-composer-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.s3-primary-btn[disabled] { background: var(--s3-line); color: var(--s3-muted); cursor: not-allowed; }
.s3-composer .s3-primary-btn { padding: 10px 20px; font-size: 15px; }
.s3-secondary-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--s3-line-2);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--s3-indigo);
  font: 700 15px var(--s3-body);
  cursor: pointer;
}
.s3-comment-actions { display: flex; gap: 4px; margin-left: -10px; }
/* Rispondi, Modifica, Elimina as icon buttons (3 November 2026): 44 x 44 px
   targets (the text buttons were 40 px high), indigo, delete in the error
   red (#B00020, 7.2:1 on white); the tint on hover; the page's focus ring. */
/* Since 5 November 2026 the icon is followed by a visible word in the same
   colour: at least 44 x 44 px, wider as the word needs. */
.s3-icon-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  gap: 6px;
  font: 700 14px var(--s3-body);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s3-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.s3-icon-btn:hover { background: var(--s3-tint); }
.s3-icon-btn.s3-delete-btn { color: #B00020; }
.s3-icon-btn.s3-delete-btn:hover { background: #FBE9EC; }
.s3-icon-btn[disabled] { color: var(--s3-muted); cursor: not-allowed; background: transparent; }

.s3-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(47, 55, 138, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.s3-dialog {
  width: 420px;
  max-width: 90vw;
  background: var(--s3-surface);
  border-radius: 12px;
  padding: 26px 24px;
  box-shadow: 0 30px 60px -20px rgba(47, 55, 138, 0.55);
  font-family: var(--s3-body);
}
.s3-dialog p { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--s3-text); }
.s3-dialog-actions { display: flex; gap: 10px; }
.s3-dialog-actions button { flex: 1; justify-content: center; }

/* --- editing (step L7) ----------------------------------------------------- */
.s3-composer-edit {
  margin: 4px 0 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--s3-surface-2);
  border: 1px solid var(--s3-line);
}
.s3-composer-edit .s3-composer-label { font: 700 15px var(--s3-body); }
.s3-edit-note { font-style: italic; }

/* --- concluding and the read-only state (step L8) ---------------------------- */
.s3-banner {
  margin: 0;
  background: #FDE7C2;
  color: #6B3A00;
  text-align: center;
  padding: 10px 16px;
  font: 600 14px/1.4 var(--s3-body);
}
.s3-code-link { text-decoration: none; padding: 10px 20px; font-size: 15px; }
.s3-dialog h2 { margin: 0 0 10px; font: 700 19px var(--s3-head); color: var(--s3-indigo); }
.s3-dialog #refused-figures { font-weight: 700; }

/* Below the narrow-window gate the dialogs (outside #app) are hidden too. */
body.s3-gate-narrow .s3-dialog-backdrop { display: none !important; }

/* The consent answers as a native radio group (step L9): the statement is
   the fieldset's legend, laid out like the paragraph it replaced. */
.s3-choice-fieldset { border: 0; padding: 0; min-width: 0; }
.s3-choice-fieldset > legend { padding: 0; margin: 0 0 14px; line-height: 1.6; float: left; width: 100%; }
.s3-choice-fieldset > legend + * { clear: both; }

/* Contrast fixes (step L9). A link styled as the primary button keeps its
   white text (the discussion's link colour, indigo, was winning: 2.27:1 on
   pink); the Stage 3 entry page's ID field gets an edge of at least 3:1. */
body.s3-discussion a.s3-primary-btn, body.s3-discussion a.s3-primary-btn:hover,
a.s3-primary-btn, a.s3-primary-btn:hover { color: #FFFFFF; text-decoration: none; }
#login-prolific-id { border-color: var(--s3-muted); }
#login-prolific-id:focus { border-color: var(--s3-pink); } /* the focus indicator, as before: 4.5:1 on white */
/* The "case not available" line is the view's heading, shown like the text it was. */
.s3-problem-title { margin: 0; font: 400 16px/1.55 var(--s3-body); color: var(--s3-text); }