/* VitOffice pages (G20): the shell of every /forum* and /ops page, in the "גיליון שרטוט" language over tokens.css. Tokens only:
   no colour literal (SP-14.09). External file (CSP style-src 'self'). */
.forum-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vit-space-3) var(--vit-space-5); padding: var(--vit-space-4) clamp(16px, 4vw, 48px); border-bottom: 2px solid var(--vit-ink); }
.forum-logo { display: inline-flex; line-height: 0; }
.forum-logo img { display: block; height: 36px; width: auto; max-width: 100%; }
.forum-header nav { display: flex; flex-wrap: wrap; gap: var(--vit-space-1) var(--vit-space-4); margin-inline-start: auto; font-size: 15px; }
.forum-header nav a { text-decoration: none; padding: var(--vit-space-2) 0; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.forum-header nav a:hover, .forum-header nav a[aria-current="page"] { border-bottom-color: var(--vit-clay); }
/* the fixed banner of D19: on every page, visible without scrolling the page's own content away */
.forum-banner { margin: 0; padding: var(--vit-space-2) clamp(16px, 4vw, 48px); background: var(--vit-paper-3); border-bottom: 1px solid var(--vit-line-strong); font-size: 14px; max-width: none; }
.forum-banner a { color: var(--vit-ink); }
main[data-zone="forum"] { padding: var(--vit-space-6) clamp(16px, 4vw, 48px) var(--vit-space-7); min-height: 50vh; }
main[data-zone="forum"] h1 { margin-top: 0; }
main[data-zone="forum"] [data-view][hidden] { display: none; }
.signin { display: grid; gap: var(--vit-space-3); max-width: 420px; margin-top: var(--vit-space-4); }
.signin button, .signin input { font: inherit; min-height: 44px; }
.signin form { display: grid; gap: var(--vit-space-2); margin-top: var(--vit-space-3); padding-top: var(--vit-space-4); border-top: 1px solid var(--vit-line-default); }
.signin input { padding: 0 var(--vit-space-3); border: 2px solid var(--vit-ink); border-radius: var(--vit-r-sm); background: var(--vit-paper); color: var(--vit-ink); }
.signin button:not([data-cta]) { padding: 0 var(--vit-space-4); }
.signin .ghost { text-align: center; }
.status { min-height: 1.5em; margin: var(--vit-space-3) 0 0; color: var(--vit-ink-2); }
.shell-note { margin: var(--vit-space-3) 0 0; color: var(--vit-ink-3); font-size: 14px; }
main[data-zone="forum"] button[disabled][data-cta] { background: var(--vit-clay); opacity: .55; cursor: not-allowed; }
.forum-footer { display: flex; flex-wrap: wrap; gap: var(--vit-space-2) var(--vit-space-4); padding: var(--vit-space-4) clamp(16px, 4vw, 48px); border-top: 2px solid var(--vit-ink); font-size: 13px; color: var(--vit-ink-2); }
.forum-footer a { color: var(--vit-ink); }
/* controls take the page's face (Heebo): a button's default is the system font, which is not ours */
main[data-zone="forum"] button, main[data-zone="forum"] input, main[data-zone="forum"] select, main[data-zone="forum"] textarea { font-family: inherit; font-size: inherit; }
/* the primary way in is the one solid clay button of the screen (site.css's .signin button is the muted account-portal style) */
main[data-zone="forum"] .signin button[data-cta] { background: var(--vit-clay); color: var(--vit-on-clay); border: 2px solid var(--vit-ink); box-shadow: 3px 3px 0 var(--vit-ink); }
main[data-zone="forum"] .signin button[data-cta]:hover { background: var(--vit-clay-strong); }
main[data-zone="forum"] .signin button.ghost { background: transparent; color: var(--vit-ink); }
main[data-zone="forum"] .signin button.ghost:hover { background: var(--vit-ink); color: var(--vit-paper); }

/* the sign-out control above the signed-in page */
.appbar { margin: 0 0 var(--vit-space-4, 1rem); text-align: start; }
.appbar button { font-family: inherit; background: transparent; color: var(--vit-ink); border: 1px solid var(--vit-ink); padding: 0.4rem 0.9rem; cursor: pointer; }
.appbar button:hover { background: var(--vit-ink); color: var(--vit-paper); }

/* ── the join screen (G21, F-03): the agreement notice, the engagement choice, the two acceptance boxes ── */
.join { max-width: 46rem; }
.join .join-status { min-height: 1.5em; font-weight: 700; }
.join .notice { margin: var(--vit-space-4, 1rem) 0; padding-inline-start: var(--vit-space-4, 1rem); border-inline-start: 3px solid var(--vit-ink); }
.join .notice p { margin: 0 0 0.6em; }
.join .engagement { margin: var(--vit-space-4, 1rem) 0; border: 1.5px solid var(--vit-ink); padding: var(--vit-space-3, 0.75rem) var(--vit-space-4, 1rem); }
.join .engagement label, .join .accept { display: flex; align-items: flex-start; gap: 0.6em; margin: 0.4em 0; }
.join .accept span p { margin: 0; }
.join input[type="checkbox"], .join input[type="radio"] { width: 1.25rem; height: 1.25rem; margin-top: 0.2em; accent-color: var(--vit-ink); }
.join [data-join-submit]:disabled { opacity: 0.5; cursor: not-allowed; }
[data-join-blocked] { max-width: 46rem; padding: var(--vit-space-4, 1rem); border: 2px solid var(--vit-ink); font-weight: 700; }

/* ── proposals (G22, F-05): the feed, the new-proposal form, one proposal, the approver's queue, the results ── */
.feed, .newprop, .proposal, .queue, .results { max-width: 52rem; }
.feed-status, .new-status, .proposal-status, .queue-status, .results-status { min-height: 1.5em; font-weight: 700; }
.feed-controls { display: flex; flex-wrap: wrap; gap: var(--vit-space-3) var(--vit-space-4); align-items: center; margin: var(--vit-space-3) 0; }
.feed-controls [aria-pressed] { background: transparent; color: var(--vit-ink); border: 1.5px solid var(--vit-ink); padding: 0.5rem 1rem; min-height: 44px; cursor: pointer; }
.feed-controls [aria-pressed="true"] { background: var(--vit-ink); color: var(--vit-paper); }
.feed-list { list-style: none; margin: var(--vit-space-3) 0; padding: 0; display: grid; gap: var(--vit-space-3); }
.prop { border: 1.5px solid var(--vit-ink); padding: var(--vit-space-3) var(--vit-space-4); }
.prop h3 { margin: 0 0 var(--vit-space-2); font-size: 1.1rem; }
.prop .meta, .prop .stats { margin: 0.2em 0; color: var(--vit-ink-2); font-size: 0.95rem; }
.state { font-weight: 800; color: var(--vit-ink); }
.author.anon { font-style: italic; }
.champ { font-size: 0.75rem; border: 1px solid var(--vit-ink); padding: 0 0.3em; }
.newprop label, .proposal label { display: block; margin-top: var(--vit-space-3); font-weight: 700; }
.newprop input[type="text"], .newprop textarea, .newprop select, .proposal textarea { width: 100%; box-sizing: border-box; padding: 0.6rem; border: 1.5px solid var(--vit-ink); background: var(--vit-paper); color: var(--vit-ink); }
.newprop .np-anon { display: flex; gap: 0.6em; align-items: center; font-weight: 400; }
.np-actions, .proposal .actions, .queue-batch { display: flex; flex-wrap: wrap; gap: var(--vit-space-3); margin: var(--vit-space-4) 0; }
.proposal .pre { white-space: pre-wrap; }
.proposal .facts dt { font-weight: 800; margin-top: 0.5em; }
.proposal .facts dd { margin: 0; }
.proposal .comments .reply { margin-inline-start: var(--vit-space-5); }
.queue .prop .quick { margin: 0.4em 0 0; }
.queue-members { list-style: none; padding: 0; }
.results [data-pain-table] { width: 100%; }
@media (max-width: 480px) { .prop { padding: var(--vit-space-3); } }
.prop .plus, .proposal [data-plus] { min-height: 44px; padding: 0.3rem 0.9rem; }
.prop .plus[aria-pressed="true"], .proposal [data-plus][aria-pressed="true"], .proposal .label-row [aria-pressed="true"] { background: var(--vit-ink); color: var(--vit-paper); }
.proposal .composer { margin-top: var(--vit-space-3); }
.proposal .warn { display: block; color: var(--vit-ink-2); }
.proposal .cbar { margin: 0.3em 0; }
.proposal .comments ul { list-style: none; padding-inline-start: var(--vit-space-5); }