/* ── BLOCK RENDERER STYLES ─────────────────────────────── */
:root{
  --red:#c8401a;--green:#7ab648;--black:#1a1a1a;
  --bg:#F8F7F4;--mid:#e8e6e1;--muted:#888580;
  --fh:'Bebas Neue',sans-serif;--fb:'Abel',sans-serif;
}

/* ── Participant typography (TWO-LEVEL Bebas rule) ──────────
   Single source of truth for Bebas Neue across every participant-
   facing screen. Apply ONE of these two classes wherever Bebas
   should appear. Anything that needs Bebas and isn't a session
   title or section name is wrong — push it to .participant-
   subheading (body font, ~20px medium) instead.

   Sizes mirror the prior reference points:
   - primary: matches the scorecard's clamp(32px,4vw,48px) session
     title — kept responsive so phones don't get a 48px heading.
   - section: matches the prior .block-section-name 2rem (32px),
     letter-spacing 0.1em uppercase. Colour swung from --red to
     --black per the IA spec (E): section name reads consistently
     dark, no orange. */
.participant-heading-primary{
  font-family:var(--fh);
  font-size:clamp(32px,4vw,48px);
  letter-spacing:0.02em;
  color:var(--black);
  line-height:1;
  margin:0;
}
.participant-heading-section{
  font-family:var(--fh);
  font-size:2rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--black);
  font-weight:400;
  line-height:1;
  margin:0;
}
/* Body-font subheading. Replaces every place that used to render
   Bebas as a soft heading: question prompt, intro heading field,
   etc. ~20px medium weight to read as a heading without competing
   with the two Bebas tiers. */
.participant-subheading{
  font-family:var(--font-body);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
  color:var(--color-text);
  letter-spacing:0;
  margin:0;
}
/* Inline-prompt class for the comparison question (F). Body font,
   black, 17px medium. Distinct from .participant-subheading
   because the comparison-question row sits in a flex layout next
   to the action buttons — different vertical rhythm. */
.participant-question-prompt{
  font-family:var(--font-body);
  font-size:17px;
  font-weight:500;
  line-height:1.4;
  color:var(--color-text);
  letter-spacing:0;
  text-transform:none;
  margin:0;
}
/* Canonical section-question typography — body font, accent red,
   17px medium, 1.4 line-height. !important because the seeded
   compare-screen heading block emits inline colour/size overrides
   (cmp2 heading: size:24 colour:black) that would otherwise win.
   The wrapper class .compare-question-text is now applied to BOTH
   render sites:
     - compare main: <x-block-renderer> emits the heading block,
       wrapped here by .compare-question-text (compare.blade.php).
     - section intro overlay: rendered directly as
       <div class="compare-question-text"><div class="block-heading">
       …</div></div> from $sectionIntro['issue'].
   One class, one rule, two surfaces — no per-screen overrides. */
.compare-question-text .block-heading{
  font-family:var(--fh) !important;
  font-size:var(--text-2xl) !important;
  color:var(--accent) !important;
  text-align:center !important;
}
/* Small orientation header used below the progress nav on the
   participant fields (info) screen. Muted, body font. (D) */
.participant-context-title{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--color-label);
  text-align:center;
  margin:0;
}

/* Participant context header — single horizontal row of small
   label/value pills shown above each participant screen (except
   compare). Each pill is a stacked label+value cell; fields skipped
   when their source value is empty. The --inline variant keeps the
   whole row on one line until space runs out, then wraps gracefully. */
.participant-context-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:14px 48px;
  margin:32px 0 20px;
}
.participant-context-field{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:160px;
  text-align:center;
}
.participant-context-label{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-text-tertiary, #8C8078);
}
.participant-context-value{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--color-text);
}
/* Inline pill variant — overrides the centred-column layout above so
   the four session-metadata fields render on a single horizontal row
   that wraps only when the viewport can't fit them. */
.participant-context-header--inline{
  gap:8px 20px;
  margin:24px 0 16px;
}
.participant-context-header--inline .participant-context-field{
  min-width:0;
  align-items:flex-start;
  text-align:left;
  gap:2px;
  padding:6px 12px;
  background:var(--color-bg-subtle, #F7F4F0);
}
.participant-context-header--inline .participant-context-label{
  font-size:10px;
  letter-spacing:0.08em;
  font-weight:600;
}
.participant-context-header--inline .participant-context-value{
  font-size:14px;
  font-weight:400;
  line-height:1.2;
}
@media(max-width:640px){
  .participant-context-header{
    flex-direction:column;
    gap:14px;
    margin:24px 0 16px;
  }
  .participant-context-field{
    width:100%;
    min-width:0;
  }
  /* Inline variant keeps row-wrap behaviour on mobile rather than
     collapsing to a column — pills are compact enough to wrap. */
  .participant-context-header--inline{
    flex-direction:row;
    gap:6px 8px;
  }
  .participant-context-header--inline .participant-context-field{
    width:auto;
  }
}

/* Facilitator contact card (J). Shared partial sits above the
   Start button on the intro screen and below the Results button
   on pre-results. Subtle border + slightly-lighter background so
   it reads as a context block, not a CTA. Max-width 400px,
   centered, padding 16px 24px per spec. */
.participant-facilitator-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  max-width:400px;
  margin:24px auto;
  padding:16px 24px;
  background:var(--bg);
  border:1px solid var(--color-border);
  text-align:center;
}
.participant-facilitator-card-label{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-label);
}
.participant-facilitator-card-contact{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--color-text);
  line-height:1.4;
}
.participant-facilitator-card-contact a{
  color:var(--color-text);
  text-decoration:underline;
}
.participant-facilitator-card-contact a:hover{
  color:var(--accent);
}

/* Kicker — uppercase eyebrow used as an eyebrow on welcome / results /
   pre-results screens. font-size is overridable per-block via the size
   config; letter-spacing was 0.2em (very wide) and is now 0.08em —
   noticeably tighter so the kicker reads as a heading rather than a
   caption. */
.block-kicker{
  font-family:var(--fh);
  font-size:16px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--red);
  line-height:1;
  margin:0
}

/* Kicker → heading pairing. Tightens the gap whenever a .block-heading
   sits directly after a .block-kicker (welcome, compare section-intro,
   compare main, question, results chrome, future screens). The kicker's
   inline margin-bottom:16px at every render site adds visual space below
   the kicker; this rule pulls the heading up by 8px so the net gap
   reads as 8px — half the original spacing, tighter visual pairing.
   !important is required because the older render sites' inline
   shorthand on the heading (style="margin:0 0 16px;" / 0 0 24px;)
   resolves margin-top:0 with higher specificity than any class rule. */
.block-kicker + .block-heading{
  margin-top:-8px !important;
}

/* Section name — alias of .participant-heading-section. Legacy markup
   in the block-renderer still emits .block-section-name; the rule
   below keeps that markup rendering identically. Source of truth is
   .participant-heading-section above (black, Bebas, 2rem). */
.block-section-name{
  font-family:var(--fh);
  font-size:2rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--black);
  font-weight:400;
  line-height:1;
  margin:0
}

/* Heading — primary block heading. text-align defaults to center
   for class-only usage; block-renderer emissions always inline a
   text-align value, so this default only applies when .block-heading
   is hand-applied in a view (e.g. participant/info-blocks). */
.block-heading{
  font-family:var(--fh);
  font-size:var(--text-2xl);
  color:var(--color-text);
  font-weight:400;
  line-height:0.92;
  letter-spacing:0.01em;
  text-align:center;
  margin:0
}

.block-heading-section{
  font-family:var(--fh);
  font-size:22px;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.92;
  color:var(--color-text);
  text-align:left;
  margin:0
}

/* Subheading — secondary heading. text-align defaults to center
   for class-only usage; block-renderer emissions always inline a
   text-align value, so this default only applies when .block-subheading
   is hand-applied in a view (e.g. participant/info-blocks). */
.block-subheading{
  font-family:var(--fh);
  font-size:var(--text-xl);
  color:var(--color-text);
  font-weight:400;
  letter-spacing:0.02em;
  line-height:1.05;
  text-align:center;
  margin:0
}

/* Image */
.block-image img{width:100%;display:block}
.block-image figcaption{font-family:var(--fb);font-size:12px;color:var(--muted);margin-top:6px}
.block-image-ph{
  background:var(--mid);height:200px;display:flex;align-items:center;
  justify-content:center;font-family:var(--fb);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)
}

/* Divider */
.block-divider{border:none;border-top:1px solid var(--mid)}

/* CTA wrapper helpers (heading / body inside a CTA block) */
.block-cta-heading{font-family:var(--fh);font-size:var(--text-2xl);color:var(--color-text);line-height:0.93;letter-spacing:0.01em;margin-bottom:10px}
.block-cta-body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--color-label);margin-bottom:20px}

/* Secondary action button (I). White bg, hairline border, body
   font, same height + padding as the primary green button. Used
   for the Back action wherever it sits next to a primary CTA. */
.btn-secondary{
  display:inline-block;
  background:#fff;
  color:var(--black);
  border:1px solid var(--color-border);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  padding:12px 32px;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.15s;
}
.btn-secondary:hover{background:var(--bg);}

/* Universal content-button standard.
   Fixed: padding, border-radius, border, font-size, letter-spacing,
          text-transform, display.
   Configurable per block (inline overrides only): background, color,
   font-family, border-radius (rounded toggle), border (border toggle),
   text-align (on the wrapper). */
.block-btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#fff;
  background:var(--red);
  padding:12px 28px;
  border:none;
  border-radius:0;
  cursor:pointer;
  text-decoration:none;
  transition:opacity 0.2s
}
.block-btn:link,.block-btn:visited{color:#fff;text-decoration:none}
.block-btn:hover{opacity:0.87}

/* Participant primary CTA — the green "advance the flow" button used on
   the question-intro Continue and end-question Submit screens. Sibling
   of .block-btn (the page-level red CTA) but with the success palette to
   signal "commit your answer and move forward" rather than "primary
   call-to-action". Page-scoped variants used to live as .q-submit and
   as fully inline button styles; consolidated here so the two call
   sites stay visually identical. */
.p-btn-primary{
  display:inline-block;
  background:var(--success);
  color:#fff;
  border:none;
  padding:12px 32px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity 0.15s;
}
.p-btn-primary:hover{opacity:0.9}
.p-btn-primary:disabled{opacity:0.35;cursor:not-allowed}

/* Participant "access blocked" panel — dark-bg centred chrome shared by
   closed.blade.php (session ended) and not-ready.blade.php (session
   not yet published). Both files still push the matching
   body{background;flex centring} rule because layouts.participant has
   no body-class injection hook; the panel + CTA classes below carry
   the rest. */
.participant-fullscreen-dark{
  text-align:center;
  max-width:400px;
  padding:2rem;
}
.participant-fullscreen-dark__cta{
  color:var(--accent);
  font-family:var(--font-body);
  text-decoration:none;
}

/* Participant welcome screen — force the primary CTA (Begin button) to
   sit dead centre, regardless of the per-block align / container_align
   settings the operator chose in the block editor. The block-renderer
   emits the button inside two wrappers with inline text-align /
   justify-content; block-centring the button itself with auto margins
   wins over both since the button becomes its own block element with
   width:max-content. */
.participant-welcome .block-btn{
  display:block;
  width:max-content;
  margin-left:auto;
  margin-right:auto;
}

/* Table */
.block-table{width:100%;border-collapse:collapse;font-family:var(--fb);font-size:15px}
.block-table td{padding:11px 14px;border-bottom:1px solid var(--mid);vertical-align:top}
.block-table td:first-child{
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);width:1%;padding-right:24px
}
.block-table.bordered td{border:1px solid var(--mid)}

/* Columns */
.block-columns{display:grid;gap:20px}
.block-columns.col-2{grid-template-columns:1fr 1fr}
.block-columns.col-3{grid-template-columns:1fr 1fr 1fr}

@media(max-width:640px){
  .block-columns.col-2,.block-columns.col-3{grid-template-columns:1fr}
}

/* ── Input blocks (facilitator setup) ─────────────────── */

/* Card wrapper */
.field-card{
  background:var(--color-white);
  border:1px solid var(--color-card-border);
  padding:var(--space-xl);
}

/* Section heading inside a card */
.field-section-heading{
  font-family:var(--fh);
  font-size:0.85rem;
  letter-spacing:0.01em;
  color:var(--color-section);
  margin-bottom:var(--space-lg);
  padding-bottom:0.75rem;
  border-bottom:1px solid var(--color-divider);
}

/* Uppercase label above a field */
.field-label{
  display:block;
  font-family:var(--fb);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--color-label);
  margin-bottom:var(--space-sm);
}

/* Required asterisk: canonical definition lives in public/css/tokens.css
   (.field-required::after — applies to the label element). This file
   intentionally no longer declares a .field-required rule; the legacy
   '<span class="field-required">*</span>' pattern was migrated to
   '<label class="field-label field-required">…</label>'. */

/* Underline text input — required variant (heavier border) */
.field-input{
  width:100%;
  border:none;
  border-bottom:2px solid var(--black);
  padding:0.625rem 0;
  font-family:var(--fb);
  font-size:1.05rem;
  color:var(--black);
  background:transparent;
  outline:none;
  box-sizing:border-box;
}

/* Underline text input — optional variant (lighter border) */
.field-input-opt{
  width:100%;
  border:none;
  border-bottom:1px solid var(--color-field-border);
  padding:0.625rem 0;
  font-family:var(--fb);
  font-size:1.05rem;
  color:var(--black);
  background:transparent;
  outline:none;
  box-sizing:border-box;
}

/* Boxed input (datetime, select) */
.field-input-box{
  width:100%;
  border:1px solid var(--color-card-border);
  padding:0.75rem;
  font-family:var(--fb);
  font-size:var(--text-base);
  color:var(--black);
  box-sizing:border-box;
  border-radius:0;
  background:var(--color-white);
}
select.field-input-box{cursor:pointer}

/* Validation error message */
.field-error{
  display:none;
  font-family:var(--fb);
  font-size:0.8rem;
  color:var(--color-error);
  margin-top:var(--space-xs);
}

/* Invalid input state — apply alongside any input/textarea/select class
   to flag a field that failed server-side validation. Sets the border
   colour to the error red; the input's own rule defines border-style
   and width, so this rule composes with any bordered field (full
   border or border-bottom-only). Pages whose inputs declare their
   border with a more specific selector (e.g. .tpl-issue:not(...) in
   templates/start.blade.php) reinforce the rule there with matching
   specificity so the cascade still resolves in favour of the error
   state — see .tpl-start input.field-invalid for that pattern. */
.field-invalid{
  border-color:var(--color-error);
}

/* Item row number pill */
.field-item-num{
  font-family:var(--fh);
  font-size:var(--text-base);
  color:var(--red);
  min-width:24px;
  text-align:right;
  border-right:2px solid var(--red);
  padding-right:10px;
  line-height:44px;
}

/* Item row input */
.field-item-input{
  flex:1;
  border:none;
  border-bottom:1px solid var(--color-card-border);
  padding:10px 0;
  font-family:var(--fb);
  font-size:var(--text-base);
  color:var(--black);
  background:transparent;
  outline:none;
}

/* Remove / close button (items, fields) */
.field-remove-btn{
  background:none;
  border:none;
  color:var(--color-field-border);
  font-size:1.25rem;
  cursor:pointer;
  padding:0 4px;
  line-height:1;
}

/* Dashed "add" button */
.field-add-btn{
  background:none;
  border:2px dashed var(--color-card-border);
  color:var(--color-section);
  font-family:var(--fb);
  font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:10px 20px;
  cursor:pointer;
  width:100%;
  text-align:left;
}

/* Preset quick-add chip */
.field-preset-btn{
  background:var(--bg);
  border:1px solid var(--color-card-border);
  font-family:var(--fb);
  font-size:0.85rem;
  color:var(--color-preset-text);
  padding:0.375rem 0.875rem;
  cursor:pointer;
}
.field-preset-btn:hover{border-color:var(--red);color:var(--red)}
/* Preset chip — active state. Applied by JS when a preset is toggled
   on. Used by the session-manage participant-fields editor and the
   section-type chooser in the sections editor. */
.field-preset-btn.is-on{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
}
.field-preset-btn.is-on:hover{border-color:var(--black);color:#fff;}

/* Custom field row (built by JS) */
.field-row{
  border:1px solid var(--color-card-border);
  background:var(--color-field-row-bg);
  padding:var(--space-md);
  display:grid;
  gap:0.75rem;
}
/* Horizontal variant — children sit on one line. Used by the
   session-manage participant-fields editor for Information field
   rows (label + type select + required pill + remove). */
.field-row--inline{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}

/* ── Compact variants of .field-* controls ──────────────────────────
   Smaller, tighter form-control siblings used inside JS-built
   editor rows (e.g. session-manage's PFS editor) where the canonical
   .field-input / .field-input-box are too tall for the inline layout.
   Same visual family — just dialled-down geometry. */
.field-input-compact{
  width:100%;
  border:none;
  border-bottom:1px solid var(--color-card-border);
  padding:0.25rem 0;
  font-family:var(--fb);
  font-size:0.9rem;
  color:var(--color-text);
  background:transparent;
  outline:none;
  box-sizing:border-box;
}
.field-select-compact{
  border:1px solid var(--color-card-border);
  padding:0.25rem 0.375rem;
  font-family:var(--fb);
  font-size:0.8rem;
  color:var(--color-preset-text);
  background:#fff;
  cursor:pointer;
}
.field-textarea-compact{
  width:100%;
  border:1px solid var(--color-card-border);
  padding:0.375rem;
  font-family:var(--fb);
  font-size:0.8rem;
  color:var(--color-preset-text);
  background:#fff;
  resize:vertical;
  box-sizing:border-box;
  outline:none;
}

/* Small bordered chip wrapping a "Required" checkbox + label.
   Used in PFS editor rows. */
.field-required-pill{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--fb);
  font-size:0.85rem;
  color:var(--color-text);
  cursor:pointer;
  background:#fff;
  border:1px solid var(--color-card-border);
  padding:0.3rem 0.6rem;
  flex-shrink:0;
}
.field-required-pill input[type="checkbox"]{
  margin:0;
  width:14px;
  height:14px;
  accent-color:var(--red);
  cursor:pointer;
}

/* Primary save button for inline editor sub-forms (e.g. PFS editor
   "Save Participant Fields"). Green to distinguish from the page-
   level red CTAs — communicates "commit this nested editor". */
.field-save-btn{
  background:var(--success);
  color:#fff;
  font-family:var(--fb);
  font-size:0.9rem;
  padding:0.5rem 1.5rem;
  border:none;
  cursor:pointer;
}

@media(max-width:640px){
  .field-card{padding:var(--space-lg)}
}

/* Data block header wrapper. Children pick up .block-kicker / .block-subheading
   defaults from the base classes above; layout (margins) goes inline per use. */
.block-header{margin-bottom:var(--space-lg)}

/* Body text — standard paragraph copy across the platform.
   Single class, single source of truth. Uses --color-text (the
   canonical body-text token, ~#1a1a1a) rather than --color-label
   (which is form-label grey, ~#6b7280). Section intros, welcome
   bodies, and every other consumer of .block-body-text now render
   in body-text black; if a specific surface needs a muted variant
   it should compose with a muted class, not retarget this rule. */
.block-body-text{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--color-text);
  margin:0
}

/* ── Participant progress bar ───────────────────────────────
   Shared between participant/compare and participant/question
   via partials/participant-progress-bar.blade.php. The wrapper
   spacing is set per-view; everything inside lives here. */
.counter-bar{width:100%;height:2px;background:rgba(26,22,18,0.12);margin-bottom:14px;}
.counter-fill{height:100%;background:var(--accent);transition:width 0.4s ease;}
/* Section indicator + comparison number share a single flex row.
   Section indicator left-aligned in red, comparison number right-
   aligned in black via margin-left:auto so it stays right-aligned
   even when the section indicator is absent. When .counter-text is
   absent (question screen), the section indicator stays left. */
.progress-row{display:flex;align-items:baseline;gap:var(--space-md);}
.compare-section-progress{font-family:var(--fb);font-size:var(--text-sm);color:var(--accent);text-transform:uppercase;letter-spacing:0.12em;}
.counter-text{font-family:var(--fb);font-size:var(--text-sm);color:var(--black);text-transform:uppercase;letter-spacing:0.12em;margin-left:auto;}