/* css/views/forum-info.css: the Biomedical Forum Info Session row and sheet in the member app (js/views/_forum-info.js).
   The row is the Forum screen's grouped row (the annual gathering's card), its action word in the Forum green. The sheet is
   the Forum's solid cream sheet with 16 px fields, 52 px tall, every control 44 px, errors under their field in the house red. */
.mx-fi-row .mx-row-l { min-width: 0; }
.mx-fi-time { display: inline-block; white-space: nowrap; }
.mx-fi-state { flex: none; margin-left: auto; font: 600 var(--fs-2nd)/20px var(--font-ui); color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mx-fi-state.is-go { color: var(--proj-forum); }
.mx-fi-state.is-done { color: var(--proj-forum); }
.mx-fi-intro { margin: 0 0 16px; font: 400 var(--fs-2nd)/20px var(--font-ui); color: var(--soft); text-wrap: pretty; }
.mx-fi-form { display: flex; flex-direction: column; gap: 14px; }
.mx-fi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mx-fi-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mx-fi-l { font: 600 var(--fs-2nd)/1.4 var(--font-ui); color: var(--ink); }
.mx-fi-h { margin-top: -4px; font: 400 var(--fs-label)/1.4 var(--font-ui); color: var(--muted); }
.mx-fi-in { width: 100%; min-height: 52px; padding: 13px 14px; box-sizing: border-box; border: 1px solid var(--field-line, #928a80); border-radius: var(--r-sm);
  background-color: var(--card); font: 400 var(--fs-body)/24px var(--font-ui); color: var(--ink); }
.mx-fi-in:focus { outline: none; border-color: var(--proj-forum); box-shadow: 0 0 0 3px var(--proj-forum-tint); }
.mx-fi-in[aria-invalid="true"] { border-color: var(--crimson); }
.mx-fi-c { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding-top: 2px; font: 400 var(--fs-2nd)/1.4 var(--font-ui); color: var(--soft); cursor: pointer; }
.mx-fi-c input { width: 22px; height: 22px; margin: 0; accent-color: var(--proj-forum); }
.mx-fi-c span { text-wrap: pretty; }
.mx-fi-privacy { margin: -8px 0 4px 36px; font: 400 var(--fs-label)/1.4 var(--font-ui); color: var(--muted); text-wrap: pretty; }
.mx-fi-e { display: none; font: 400 var(--fs-2nd)/20px var(--font-ui); color: var(--crimson); }
.mx-fi-e.on { display: block; }
.mx-fi-e--c { margin: -10px 0 0 36px; }
@media (max-width: 380px) { .mx-fi-two { grid-template-columns: 1fr; } }

/* This sheet also opens outside Forum membership, where forum-mode.css is not loaded. */
.mx-modal.mx-fi-sheet { --crimson: var(--proj-forum); --crimson-hover: #061f17; background: #b8b1a6; }
.mx-modal.mx-fi-sheet .mx-modal-head { z-index: 2; background: var(--cream); border-bottom: 1px solid transparent; transition: border-color 180ms ease; }
.mx-modal.mx-fi-sheet .mx-modal-head::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -24px; height: 24px; background: linear-gradient(var(--cream) 0 42%, transparent); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.mx-modal.mx-fi-sheet .mx-modal-head.is-scrolled::after { opacity: 1; }
.mx-modal.mx-fi-sheet .mx-modal-head.is-scrolled { border-bottom-color: rgba(25, 21, 18, .12); }
.mx-modal.mx-fi-sheet .mx-modal-sheet::before { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* R6 decision B (30 Oct 2026): the sheet's actions in the one button style of the project pages (Home's "My ticket"), over
   forum-mode.css's 14 px when Forum Home opens it */
.mx-modal.mx-fi-sheet .mx-modal-foot > [role="button"]:is(.btn-primary, .btn-ghost) { font: 600 16px/20px var(--font-ui); letter-spacing: -.01em; text-transform: none; }

/* R6 item 31 (Alen, 29 Oct 2026): the block's head is the Forum's yearly gathering now, not "Plexus Week": the display face in
   sentence case as the pages' other heads (on the Forum page and on Forum Home), one line under it, the info session's row after */
.mx-fi > .mx-sh > .mx-sh-t { font: var(--fw-title1) 28px/34px var(--font-display); letter-spacing: var(--ls-title1); text-transform: none; color: var(--ink); }
@media (min-width: 901px) { .mx-fi > .mx-sh > .mx-sh-t { font-size: var(--fs-title1); line-height: 36px; } }
.mx-fi-lede { margin: -6px 0 18px; max-width: 620px; font: 400 var(--fs-body)/24px var(--font-ui); color: var(--soft); text-wrap: pretty; }
/* what the session is for, inside its card under the row (fix round 5's rule: a one-line caption folds into its card) */
.mx-fi-foot { margin: 0; padding: 0 16px 14px 50px; font: 400 var(--fs-2nd)/20px var(--font-ui); color: var(--soft); text-wrap: pretty; }
.mx-fi-list > .mx-fi-row { padding-bottom: 6px; }

/* The public mailbox link uses this same form inside the existing portal. */
.mx-fi-event { width: min(100% - 40px, 600px); margin: max(32px, env(safe-area-inset-top)) auto; padding-bottom: max(40px, env(safe-area-inset-bottom)); color: var(--ink); overflow-wrap: anywhere; }
.mx-fi-event h1 { margin: 32px 0 20px; font: var(--fw-title1) clamp(28px, 6vw, 40px)/1.12 var(--font-display); letter-spacing: var(--ls-title1); text-wrap: balance; }
.mx-fi-event > p, .mx-fi-event [data-fi-content] > p { font: 400 var(--fs-body)/1.5 var(--font-ui); }
.mx-fi-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--proj-forum); font: 600 var(--fs-body)/1.4 var(--font-ui); }
.mx-fi-event .mx-fi-form { margin-top: 24px; }
.mx-fi-event .btn-primary { background: var(--proj-forum); }
.mx-fi-interests { margin: 0; padding: 0; border: 0; min-width: 0; }
.mx-fi-interests legend { margin-bottom: 12px; }
.mx-fi-form [hidden] { display: none; }
.mx-fi-submit, .mx-fi-result button { min-height: 48px; font: 600 var(--fs-body)/1.4 var(--font-ui); text-transform: none; letter-spacing: normal; white-space: normal; }
.mx-fi-submit:disabled { opacity: .55; cursor: default; }
.mx-fi-in:read-only { color: var(--soft); }
.mx-fi-result h2 { font: var(--fw-title2) 26px/1.2 var(--font-display); text-wrap: balance; }
.mx-fi-result p { font: 400 var(--fs-body)/1.5 var(--font-ui); color: var(--soft); text-wrap: pretty; }
.mx-fi-result .mx-fi-qr { display: block; width: min(100%, 280px); height: auto; margin: 24px auto; }
.mx-fi-result a, .mx-fi-result button { margin: 8px 8px 0 0; }
.mx-fi-sheet .mx-fi-submit { width: 100%; }
@media (prefers-color-scheme: dark) {
 .mx-fi-event .mx-fi-in { background: var(--card); color: var(--ink); }
}