/*
 * rcn-styles.css — shared form styling injected into every in5 bundle (served at /forms/rcn-styles.css,
 * inserted near the top of <head> by the bundle route). Carries the field border treatment + the
 * manifest-driven validation styling used by rcn-forms-core.js (the .rcn-invalid highlight + the floating
 * .rcn-field-error tooltip). Modelled on the "Action Vin" reference form (the norm); themeable via CSS
 * custom properties, so a per-bundle stylesheet (loaded after this one) can override any value. Scoped so
 * it never restyles a form's non-form content.
 */

/* 
 * RC International Branding Colors
 *
 * #17458f Rotary Royal Blue Masterbrand Signature
 * #f7a81b Rotary Gold Masterbrand Signature
 * #0067c8 Rotary Azure Masterbrand Signature
 * #00a2e0 Sky Blue Interact
 * #d41367 Cranberry Rotaract
 * #e02927 Cardinal End Polio Now
 * #00adbb Turquoise
 * #ff7600 Orange
 * #901f93 Violet
 * #009739 Grass
 * #b9d9eb Powder Blue
 * #a7aca2 Moss
 * #c6bcd0 Lavender
 * #d9c89e Taupe
 * #9ba4b4 Mist
 * #657f99 Slate
 * #54565a Charcoal
 * #898a8d Pewter
 * #b1b1b1 Smoke
 * #d0cfcd Silver
 * #ffffff White
 * #000000 Black
 * #7a6e66 Storm
 * #968b83 Ash
 * #bfb7b0 Platinum
 * #d6d1ca Cloud
 *
 * Rotary Golf Club NE 
 *
 * #184279 Navy
 * #93a9c3 Powder
 * #dbd5d5 Sand
 * #e8edf3 Field
 */

 :root {
  /* field border treatment */
  --rcn-field-padding-left: 10px;
  --rcn-field-border-width: 2px;
  --rcn-valid-border: #17458f;          /* Rotary Royal Blue */
  --rcn-invalid-border: #e02927;        /* Rotary Cardinal */
  --rcn-field-bg: transparent;
  --rcn-disabled-border: transparent;
  --rcn-disabled-bg: transparent;
  /* validation tooltip */
  --rcn-error-bg: #e02927;
  --rcn-error-color: #ffffff;
  --rcn-error-radius: 6px;
  --rcn-error-font: inherit;
  /* warning = orange: shown, never blocking (a foreign postcode, a recommended field left empty) */
  --rcn-warn-border: #d97706;
  --rcn-warn-bg: #d97706;
  --rcn-warn-color: #ffffff;
}

/* Comfortable left padding so input text isn't flush against the border. */
input, textarea { padding-left: var(--rcn-field-padding-left, 10px) !important; }

/* Border treatment: required = solid, optional = dotted; disabled/read-only blend out (incl. placeholder). */
input, textarea { border-width: var(--rcn-field-border-width, 2px) !important; }
input:required, textarea:required { border-style: solid !important; }
input:optional, textarea:optional { border-style: dotted !important; }
input:read-only,
input:disabled {
  border-color: var(--rcn-disabled-border, transparent) !important;
  background-color: var(--rcn-disabled-bg, transparent) !important;
}
input:disabled::placeholder { color: transparent !important; }

/* Valid = blue (continuous). Invalid = red via the engine-toggled .rcn-invalid class (shown on blur/submit,
   cleared when valid). Swap `.rcn-invalid` for `input:invalid` if you want continuous, on-load feedback. */
input:valid,
textarea:valid {
  border-color: var(--rcn-valid-border, #17458f) !important;
  background-color: var(--rcn-field-bg, transparent) !important;
}
.rcn-invalid {
  border-color: var(--rcn-invalid-border, #e02927) !important;
  background-color: var(--rcn-field-bg, transparent) !important;
}
/* Warning: the field is VALID (it sends), so `input:valid` above also matches — `input.rcn-warn` outranks it. */
input.rcn-warn,
select.rcn-warn,
textarea.rcn-warn {
  border-color: var(--rcn-warn-border, #d97706) !important;
}

/* What the server actually said, written by the engine INTO the popup's own box (the in5 export already keeps
   the box and the outlined lettering as separate elements, so the lettering is hidden and this takes its
   place). Deliberately no background or radius of its own: it inherits the designed box, so a popup restyled
   in InDesign keeps its look. Only the type is ours, because outlined text carries no font to inherit. */
.rcn-popup-msg {
  /* The box (an in5 .pageItem) is absolutely positioned, so filling it and centring with flex puts the message
     exactly where the designed lettering was — no guessing at the artwork's baseline. */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 24px;
  text-align: center;
  white-space: pre-line;      /* one line per shortfall, still wrapping a long one */
  overflow-wrap: break-word;
  /* Longhands, NOT the `font` shorthand: `font: … var(--rcn-font, inherit)` falls back to an invalid
     font-family and browsers then drop the WHOLE declaration, which is why this first rendered unstyled. */
  font-family: var(--rcn-font, inherit);
  font-size: var(--rcn-popup-msg-size, 17px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rcn-popup-msg-color, #1a1a1a);
}

/* Inventory (docs/34): an item with nothing left is disabled AND labelled. A silently disabled control is a
   support call — this says the item is gone, without publishing how many remain.
   The class goes on the CONTROL and the word rides in its placeholder: on a pixel canvas there is nowhere to
   put a floating chip, and a marker appended to the shared parent would be clobbered by the next sibling. */
input.rcn-soldout {
  background: var(--rcn-soldout-bg, #f2f2f2) !important;
  border-style: dashed !important;
  cursor: not-allowed;
  /* The control is as narrow as the designer made it, so the word has to earn its place: the spinner is inert
     on a disabled field and its ~17px is worth more as text room, and the global 10px left padding is not. */
  padding-left: 4px !important;
  padding-right: 2px !important;
  -moz-appearance: textfield;
}
input.rcn-soldout::-webkit-outer-spin-button,
input.rcn-soldout::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; display: none; }

/* Floating explanation tooltip, anchored just under the focused/invalid field. */
.rcn-field-error {
  position: fixed;
  z-index: 99999;
  max-width: 280px;
  padding: 6px 10px;
  background: var(--rcn-error-bg);
  color: var(--rcn-error-color);
  font-family: var(--rcn-error-font, inherit);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: var(--rcn-error-radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.rcn-field-error::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -5px;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: var(--rcn-error-bg);
}
.rcn-field-error.rcn-field-warn { background: var(--rcn-warn-bg, #d97706); color: var(--rcn-warn-color, #ffffff); }
.rcn-field-error.rcn-field-warn::before { border-bottom-color: var(--rcn-warn-bg, #d97706); }

/* -------------------------------------------------------------------------------------------------------
 * Manifest-rendered forms — the "no-InDesign" path (ManifestFormRenderer). Everything here is scoped to
 * <body class="rcn-rendered">, which in5 bundles never carry, so this layout can't touch a designed bundle.
 * The border/validation treatment above still applies (shared); this adds page layout, cards, field rows,
 * choice groups, buttons and status popups so a form built purely from the manifest looks like the site.
 * ------------------------------------------------------------------------------------------------------- */
/* The page itself (theme, header, hero, description, footer) is the public site's: /css/site.css, loaded by the
   rendered page after this file. What follows is the form only, on a light card. The card carries
   data-theme="club", so the design system's tokens (--ground, --ink, --brand, --line…) take their light values
   inside it even on the centenary page, and every colour below comes from them. The fallbacks keep the form
   legible should site.css ever fail to load. */
.rcn-rendered .rcn-rf-section { padding-top: 0; }
/* The description's last line (« Inscriptions et réservations de tables ») is the card's heading: keep them close. */
.rcn-rendered .rcn-landing { padding-bottom: var(--space-6, 24px); }
.rcn-rendered .rcn-rf-description > :last-child { margin-bottom: 0; }
.rcn-rendered .rcn-rf-panel {
  --rcn-rf-blue: var(--brand, #17458f);
  --rcn-rf-gold: var(--accent, #f7a81b);
  --rcn-valid-border: var(--brand, #17458f);
  /* A generated form's fields keep their white fill whatever their state. The default (transparent, for in5's designed
     boxes) let a VALID field — an empty optional one counts — show the grey block behind it: only the border may say
     « optional » (dotted). */
  --rcn-field-bg: var(--ground, #fff);
  max-width: var(--measure, 40rem); margin: 0 auto; text-align: left;
  background: var(--ground, #fff); color: var(--ink, #1a1a1a);
  border-radius: var(--radius-lg, 10px); box-shadow: 0 8px 32px #0c1a3d33;
  padding: var(--space-6, 24px) var(--space-4, 16px);
}
@media (min-width: 720px) { .rcn-rendered .rcn-rf-panel { padding: var(--space-8, 32px); } }

/* Sections inside the card: framed blocks, not cards in a card. */
.rcn-rendered .rcn-participant, .rcn-rendered .rcn-registration, .rcn-rendered .rcn-business, .rcn-rendered .rcn-consent {
  border: 1px solid var(--line, #d0cfcd); border-radius: var(--radius-md, 6px);
  padding: var(--space-4, 16px); margin: 0 0 var(--space-4, 16px);
}
.rcn-rendered .rcn-participant { border-top: 3px solid var(--rcn-rf-gold); }
/* Communications opt-in (docs/21): a block like the others, so its title and link read on the centenary navy too. */
.rcn-rendered .rcn-consent-intro { margin: 0 0 var(--space-3, 12px); }
.rcn-rendered .rcn-consent-note { margin: var(--space-2, 8px) 0 0; font-size: 14px; }
.rcn-rendered .rcn-participant-title { color: var(--rcn-rf-blue); font-size: 17px; line-height: 24px; font-weight: 600; margin: 0 0 var(--space-3, 12px); }

/* Field rows: label above a full-width control. */
.rcn-rendered .rcn-field { display: block; margin: 0 0 var(--space-3, 12px); }
/* Fields sharing a line (manifest `width`, FieldLayout — the same rule drives the admin editor). Each field keeps its
   exact share: basis = N/12 of the line minus its part of the gaps, so 3/4 + 1/4 fill the line exactly and a lone 1/2
   stays half. In a narrow block (a phone) 1/3, 1/2 and 2/3 take a whole line each, while the 1/4 + 3/4 pairs — rue
   and n°, NPA and localité — stay side by side. The line measures itself (container query), not the screen. The
   margins stay on the fields, so a field the engine hides (a guest's billing choice) leaves no gap behind. */
.rcn-rendered .rcn-line { display: flex; flex-wrap: wrap; column-gap: var(--rcn-line-gap, 12px); container-type: inline-size; }
.rcn-rendered .rcn-line > .rcn-field { flex: 0 1 auto; min-width: 0; }
.rcn-rendered .rcn-line > .rcn-w-3 { flex-basis: calc(25% - var(--rcn-line-gap, 12px) * 0.75); }
.rcn-rendered .rcn-line > .rcn-w-4 { flex-basis: calc(100% / 3 - var(--rcn-line-gap, 12px) * 2 / 3); }
.rcn-rendered .rcn-line > .rcn-w-6 { flex-basis: calc(50% - var(--rcn-line-gap, 12px) * 0.5); }
.rcn-rendered .rcn-line > .rcn-w-8 { flex-basis: calc(200% / 3 - var(--rcn-line-gap, 12px) / 3); }
.rcn-rendered .rcn-line > .rcn-w-9 { flex-basis: calc(75% - var(--rcn-line-gap, 12px) * 0.25); }
@container (max-width: 26rem) {
  .rcn-rendered .rcn-line > .rcn-w-4,
  .rcn-rendered .rcn-line > .rcn-w-6,
  .rcn-rendered .rcn-line > .rcn-w-8 { flex-basis: 100%; }
  /* A quarter of a phone line is too narrow for a postcode or a house number: it keeps a readable minimum and its
     3/4 partner takes the rest. */
  .rcn-rendered .rcn-line > .rcn-w-3 { flex-basis: max(calc(25% - var(--rcn-line-gap, 12px) * 0.75), 5.5rem); flex-shrink: 0; }
  .rcn-rendered .rcn-line > .rcn-w-9 { flex: 1 1 0; }
}
.rcn-rendered .rcn-field-label { display: block; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink, #1a1a1a); margin-bottom: var(--space-1, 4px); }
/* Borders in slate: 3:1 against white, the contrast a form control's edge needs (WCAG 1.4.11). */
.rcn-rendered .rcn-field input,
.rcn-rendered .rcn-field select,
.rcn-rendered .rcn-field textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.4rem 0.6rem;
  border: var(--rcn-field-border-width, 2px) solid var(--line-strong, #657f99); border-radius: var(--radius-md, 6px);
  font: inherit; color: var(--ink, #1a1a1a); background: var(--ground, #fff);
}
/* Locked (category-gated) fields read as greyed, not the in5 "transparent/invisible" treatment. The global
   input:disabled rule uses !important, so these overrides do too — higher specificity settles the tie. */
.rcn-rendered .rcn-field input:disabled,
.rcn-rendered .rcn-field select:disabled,
.rcn-rendered .rcn-field textarea:disabled {
  border-color: #e3e7ee !important; background-color: var(--ground-alt, #f5f7fa) !important; color: #9aa2b1;
}
.rcn-rendered .rcn-field input:disabled::placeholder { color: #b9c0cc !important; }
/* A field the page fills itself (the donation amount, from a proposed amount): greyed like a locked field, but its value
   readable — the global input:read-only rule (in5's designed boxes) would make it vanish. Attribute selector on purpose:
   :read-only also matches radios and checkboxes. */
.rcn-rendered .rcn-field input[readonly] {
  border-color: #c9d0db !important; border-style: solid !important; background-color: var(--ground-alt, #f5f7fa) !important;
  color: var(--ink, #1a1a1a);
}
/* The donation page: the selected cause's description under the list, and the conditions reminder above the button. */
.rcn-rendered .rcn-cause-desc { margin: calc(-1 * var(--space-1, 4px)) 0 var(--space-3, 12px); font-size: 14px; line-height: 1.5; }
.rcn-rendered .rcn-cause-desc > :last-child { margin-bottom: 0; }
.rcn-rendered .rcn-cause-desc a { color: var(--brand, #17458f); }
.rcn-rendered .rcn-don-terms { text-align: center; font-size: 14px; margin: var(--space-4, 16px) 0 var(--space-3, 12px); }
.rcn-rendered[data-theme="centenaire"] .rcn-don-terms { color: var(--rcn-rf-page-ink); }
.rcn-rendered[data-theme="centenaire"] .rcn-don-terms a { color: inherit; text-decoration: underline; }
.rcn-rendered .rcn-field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.4; }

/* Single inline checkbox: box + label on one row. */
.rcn-rendered .rcn-field-check { display: flex; align-items: center; gap: var(--space-2, 8px); }
.rcn-rendered .rcn-field-check .rcn-field-label { margin: 0; font-weight: 400; }
/* Radio group. */
.rcn-rendered .rcn-choice { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-4, 16px); }
.rcn-rendered .rcn-choice-opt { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; }
.rcn-rendered .rcn-field-check input,
.rcn-rendered .rcn-choice-opt input {
  min-height: 0 !important; padding-left: 0 !important;
  width: 20px !important; height: 20px; accent-color: var(--rcn-rf-blue);
}

/* Buttons are the design system's (.rcn-btn primary, .rcn-btn--secondary) — only their place is set here. */
.rcn-rendered .rcn-participant-actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); margin-top: var(--space-2, 8px); }
.rcn-rendered .rcn-btn-remove { color: var(--danger, #e02927); }

/* Table reservations (docs/29): mode selector + book/join panels. */
.rcn-rendered .rcn-tables {
  margin: 0 0 var(--space-4, 16px); padding: var(--space-4, 16px);
  background: var(--ground-alt, #f5f7fa); border: 1px solid var(--line, #d0cfcd); border-radius: var(--radius-md, 6px);
}
.rcn-rendered .rcn-tables-intro { margin: 0 0 var(--space-3, 12px); }
.rcn-rendered .rcn-table-mode {
  display: flex; flex-direction: column; gap: var(--space-2, 8px); border: 0; margin: 0 0 var(--space-3, 12px); padding: 0;
}
.rcn-rendered .rcn-table-mode .rcn-choice-opt { font-weight: 600; }
.rcn-rendered .rcn-table-book, .rcn-rendered .rcn-table-join { padding-top: var(--space-1, 4px); }
.rcn-rendered .rcn-btn-verify { margin-top: var(--space-1, 4px); }
/* The join summary is SHARED: the engine adds .rcn-table-summary + .rcn-ok/.rcn-ko to an in5 bundle's
   « TableJoinSummary » element too, so these three rules must stay unscoped (as they always were). The rendered
   form only takes the design system's colours on top. */
.rcn-table-summary { margin: 0.5rem 0 0; font-weight: 600; min-height: 1.2em; }
.rcn-table-summary.rcn-ok { color: #1c6b34; }
.rcn-table-summary.rcn-ko { color: #b0301f; }
.rcn-rendered .rcn-table-summary.rcn-ok { color: var(--success, #1c6b34); }
.rcn-rendered .rcn-table-summary.rcn-ko { color: var(--danger, #b0301f); }

.rcn-rendered .rcn-rf-total {
  margin: var(--space-4, 16px) 0; padding-top: var(--space-4, 16px); border-top: 1px solid var(--line, #d0cfcd);
  text-align: right; font-size: 19px; line-height: 28px; font-weight: 600; color: var(--rcn-rf-blue);
  font-variant-numeric: tabular-nums;
}
.rcn-rendered .rcn-rf-submit { text-align: center; }
.rcn-rendered .rcn-btn-submit { min-width: 12rem; }

/* On the centenary page a white card is the brightest thing on screen and outshines the hero. There the card takes
   the page's own navy and only the blocks people fill in stay light — a soft blue-grey, with the inputs themselves
   white — while the total and the button follow the page's colours (white, the gold action). The page's tokens are
   captured on <body>, before the card resets them to the light palette: a custom property inherits its value as
   computed where it is declared, so these keep the centenary values inside the card. The club theme keeps the
   white card, which does not stand out on a light page. */
.rcn-rendered[data-theme="centenaire"] {
  --rcn-rf-page-ink: var(--ink);
  --rcn-rf-page-action: var(--action); --rcn-rf-page-on-action: var(--on-action);
  --rcn-rf-page-action-strong: var(--action-strong); --rcn-rf-page-focus: var(--focus);
}
/* The card one step lighter than the page's navy (first review, 2026-10-07: the page's own --ground-alt sat too
   close to the background to read as a card). */
.rcn-rendered[data-theme="centenaire"] .rcn-rf-panel {
  --rcn-rf-card-line: #4a619c;
  background: #34497f; border: 1px solid var(--rcn-rf-card-line); box-shadow: none;
}
.rcn-rendered[data-theme="centenaire"] .rcn-participant,
.rcn-rendered[data-theme="centenaire"] .rcn-registration,
.rcn-rendered[data-theme="centenaire"] .rcn-business,
.rcn-rendered[data-theme="centenaire"] .rcn-consent,
.rcn-rendered[data-theme="centenaire"] .rcn-tables { background: #e9eef5; border-color: #c9d3e1; }
.rcn-rendered[data-theme="centenaire"] .rcn-participant { border-top-color: var(--rcn-rf-gold); }
.rcn-rendered[data-theme="centenaire"] .rcn-rf-total { color: var(--rcn-rf-page-ink); border-top-color: var(--rcn-rf-card-line); }
.rcn-rendered[data-theme="centenaire"] .rcn-btn-submit { background: var(--rcn-rf-page-action); color: var(--rcn-rf-page-on-action); }
.rcn-rendered[data-theme="centenaire"] .rcn-btn-submit:hover { background: var(--rcn-rf-page-action-strong); color: var(--rcn-rf-page-on-action); }
.rcn-rendered[data-theme="centenaire"] .rcn-btn-submit:focus-visible { outline-color: var(--rcn-rf-page-focus); }

/* Status popups — the engine toggles their visibility; style as a centered toast. */
.rcn-rendered .rcn-popup {
  position: fixed; left: 50%; top: 1.5rem; transform: translateX(-50%); z-index: 1000;
  max-width: 90%; padding: 0.9rem 1.4rem; border-radius: 10px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); background: #fff; color: #222;
}
/* Here the popup is a real toast that sizes itself, so the reason belongs INSIDE it, in normal flow and in the
   toast's own colours — not pinned underneath as it has to be on an in5 pixel canvas. */
.rcn-rendered .rcn-popup .rcn-popup-msg {
  position: static; display: block; margin: 0.5rem 0 0; padding: 0;
  background: transparent; color: inherit;
  font-size: 0.95rem; font-style: normal; font-weight: 400;
}
.rcn-rendered .rcn-popup-success { background: #e7f6ec; color: #1c6b34; }
.rcn-rendered .rcn-popup-invalid,
.rcn-rendered .rcn-popup-error { background: #fdecea; color: #b0301f; }
.rcn-rendered .rcn-popup-sending { background: #eef2f9; color: var(--rcn-rf-blue); }

/* Sold-out fields keep a VISIBLE placeholder, overriding the rules above that blank a disabled field's
   placeholder. Last in the file on purpose: same specificity and both !important, so order decides. */
input.rcn-soldout:disabled::placeholder,
.rcn-rendered .rcn-field input.rcn-soldout:disabled::placeholder {
  color: var(--rcn-soldout-color, #8a5a00) !important;
  opacity: 1 !important;
  /* Relative to the field's own type, so it fits whatever size the bundle uses. */
  font-size: var(--rcn-soldout-size, 0.72em);
  font-style: italic;
  letter-spacing: -0.01em;
}