/*
 * Participation surfaces: visitor board and two-step board creation.
 * Desktop keeps the established composition; the compact app-like flow starts
 * at the shared mobile breakpoint.
 */

.visitor-app-title,
.new-mobile-step-back,
.new-mobile-title,
.new-mobile-exit,
.new-mobile-action-bar {
  display: none;
}

.visitor-board-info {
  min-width: 0;
}

.visitor-board-info > summary {
  display: none;
}

.visitor-board-info-content {
  display: grid;
  gap: 12px;
}

.visitor-board-info:not([open]) > .visitor-board-info-content {
  display: none;
}

/* The desktop surface stays expanded; mobile turns secondary controls into disclosures. */
.member-gate {
  display: block;
}

.member-gate > summary,
.feed-tools > summary {
  display: none;
}

.member-gate-content {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(280px, 1fr);
  grid-template-areas:
    "copy form"
    "preview preview";
  gap: clamp(18px, 3vw, 28px);
  align-items: stretch;
}

.member-gate:not([open]) > .member-gate-content,
.feed-tools:not([open]) > .feed-tools-content {
  display: none;
}

.member-gate-copy {
  grid-area: copy;
}

.feed-tools,
.feed-tools-content {
  display: contents;
}

.board-error-state,
.feed-error-state {
  border: 1px solid #d8e0dc;
  background: #fff;
}

.board-error-state {
  display: grid;
  justify-items: start;
  gap: 10px;
  border-radius: 16px;
  padding: clamp(24px, 5vw, 42px);
}

.board-error-state[hidden],
.feed-error-state[hidden] {
  display: none;
}

.board-error-code {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.board-error-state h2,
.board-error-state p {
  margin: 0;
}

.board-error-state h2 {
  color: #17201d;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.18;
}

.board-error-state p {
  color: #68746f;
  line-height: 1.6;
}

.board-error-state button {
  min-height: 44px;
  margin-top: 4px;
}

.feed-error-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 12px;
  padding: 14px 16px;
}

.feed-error-state > div {
  display: grid;
  gap: 3px;
}

.feed-error-state strong {
  color: #17201d;
  font-size: 14px;
}

.feed-error-state span {
  color: #68746f;
  font-size: 13px;
  line-height: 1.45;
}

.feed-error-state button,
#reset-feed-filters {
  min-height: 44px;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .board-body,
  .page-new {
    overflow-x: clip;
  }

  /* Visitor app bar: one normal-flow row for home, title, and locale. */
  .board-body .visitor-shell {
    width: 100%;
    margin: 0;
    padding: 0 0 calc(132px + env(safe-area-inset-bottom));
  }

  .board-body .visitor-board {
    width: 100%;
    max-width: none;
  }

  .board-body .visitor-utility {
    position: relative;
    inset: auto;
    z-index: var(--mobile-layer-utility);
    display: grid;
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr) minmax(54px, auto);
    width: 100%;
    min-height: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top));
    align-items: center;
    gap: 8px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(16, 24, 39, 0.1);
    padding: env(safe-area-inset-top) 12px 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
  }

  .board-body .visitor-home-link,
  .board-body .language-button {
    min-height: var(--mobile-touch-target);
  }

  .board-body .visitor-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
    color: #4d596a;
    font-size: 13px;
    font-weight: 850;
  }

  .board-body .visitor-app-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #17201d;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-body .visitor-title .eyebrow {
    display: none;
  }

  .board-body .language-switcher {
    justify-self: end;
    min-width: 0;
  }

  .board-body .language-switcher > span {
    display: none;
  }

  .board-body .language-button {
    min-width: 54px;
    padding: 0 22px 0 9px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .board-body .language-menu {
    top: calc(100% + 4px);
    right: 0;
  }

  /* Compact board identity; secondary context stays discoverable. */
  .board-body .visitor-title {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #e3e8e5;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .board-body .visitor-title-main {
    display: grid;
    gap: 4px;
    padding: 13px 0 7px 16px;
  }

  .board-body .visitor-title-copy {
    min-width: 0;
  }

  .board-body .visitor-title .eyebrow {
    margin: 0 0 5px;
    font-size: 10px;
  }

  .board-body .visitor-title h1 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .board-body .visitor-title-support {
    display: block;
    border: 0;
    padding: 0;
  }

  .board-body .visitor-count {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 62px;
    min-height: 50px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    margin: 10px 12px 0 0;
    border: 0;
    border-left: 1px solid #e3e8e5;
    border-radius: 0;
    padding: 0 0 0 12px;
    background: transparent;
  }

  .board-body .visitor-count strong {
    font-size: 18px;
  }

  .board-body .visitor-count span {
    font-size: 10px;
  }

  .board-body .visitor-board-info > summary {
    display: flex;
    min-height: var(--mobile-touch-target);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e8ecea;
    color: #4d596a;
    cursor: pointer;
    list-style: none;
  }

  .board-body .visitor-board-info > summary::-webkit-details-marker {
    display: none;
  }

  .board-body .visitor-board-info > summary::after {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 1.5px solid #7b8681;
    border-bottom: 1.5px solid #7b8681;
    content: "";
    transform: rotate(45deg) translateY(-2px);
  }

  .board-body .visitor-board-info[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -1px);
  }

  .board-body .visitor-board-info > summary span {
    font-size: 12px;
    font-weight: 900;
  }

  .board-body .visitor-board-info > summary small {
    display: none;
  }

  .board-body .visitor-board-info-content {
    display: grid;
    gap: 10px;
    padding: 4px 0 8px;
  }

  .board-body #board-description {
    display: block;
    margin: 0;
    color: #68746f;
    font-size: 13px;
    line-height: 1.55;
  }

  .board-body .visitor-board-info .board-meta,
  .board-body .visitor-board-info .starter-prompts {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .board-body .visitor-board-info .starter-prompts button {
    min-height: var(--mobile-touch-target);
  }

  /* Search, categories, then a single-column content feed. */
  .board-body .visitor-content {
    display: block;
  }

  .board-body .member-gate {
    margin: 12px 16px 0;
    border: 1px solid #d7e0dc;
    border-radius: 10px;
    padding: 0;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
  }

  .board-body .member-gate > summary,
  .board-body .feed-tools > summary {
    display: flex;
    min-height: var(--mobile-touch-target);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    color: #26332e;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 900;
  }

  .board-body .member-gate > summary::-webkit-details-marker,
  .board-body .feed-tools > summary::-webkit-details-marker {
    display: none;
  }

  .board-body .member-gate > summary::after,
  .board-body .feed-tools > summary::after {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 1.5px solid #7b8681;
    border-bottom: 1.5px solid #7b8681;
    content: "";
    transform: rotate(45deg) translateY(-2px);
  }

  .board-body .member-gate[open] > summary::after,
  .board-body .feed-tools[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -1px);
  }

  .board-body .member-gate-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "form";
    gap: 14px;
    border-top: 1px solid #e5eae7;
    padding: 16px 14px;
  }

  .board-body .member-gate:not([open]) > .member-gate-content {
    display: none;
  }

  .board-body .member-gate-copy .eyebrow,
  .board-body .locked-board-preview {
    display: none;
  }

  .board-body .member-gate h2 {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.25;
  }

  .board-body .member-gate p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .board-body .member-login-form {
    gap: 12px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .board-body .visitor-feed {
    display: grid;
    width: 100%;
    gap: 0;
    border: 0;
    border-radius: 0;
    padding: 10px 16px 20px;
    background: #fff;
    box-shadow: none;
    overflow: visible;
  }

  .board-body .feed-tools {
    display: grid;
    order: 2;
    margin: 0 0 8px;
    border-bottom: 1px solid #e4e9e6;
  }

  .board-body .feed-tools > summary {
    margin: 0 -4px;
    padding: 0 4px;
  }

  .board-body .feed-tools-content {
    display: grid;
    gap: 8px;
    padding: 2px 0 12px;
  }

  .board-body .feed-tools:not([open]) > .feed-tools-content {
    display: none;
  }

  .board-body .board-search {
    position: relative;
    top: auto;
    z-index: var(--mobile-layer-content);
    order: initial;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .board-body .board-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .board-body .board-search input {
    min-height: 48px;
    border: 1px solid #ced8d3;
    border-radius: 10px;
    padding: 0 14px;
    background: #f8faf9;
    box-shadow: none;
  }

  .board-body .feed-filter-bar {
    display: flex;
    order: initial;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin: 0;
    padding: 0;
    border-bottom: 0;
  }

  .board-body .visitor-feed .category-tabs,
  .board-body .visitor-feed .sort-tabs {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
  }

  .board-body .visitor-feed .category-tabs {
    order: 1;
  }

  .board-body .visitor-feed .sort-tabs {
    order: 2;
  }

  .board-body .visitor-feed .category-tabs::-webkit-scrollbar,
  .board-body .visitor-feed .sort-tabs::-webkit-scrollbar {
    display: none;
  }

  .board-body .visitor-feed .category-tabs button,
  .board-body .visitor-feed .sort-tabs button {
    min-height: var(--mobile-touch-target);
    flex: 0 0 auto;
    padding: 0 14px;
    white-space: nowrap;
  }

  .board-body .visitor-feed .category-tabs button {
    border: 1px solid #d9e1dd;
    border-radius: 999px;
    background: #fff;
  }

  .board-body .visitor-feed .category-tabs button.active {
    border-color: #0f766e;
    color: #fff;
    background: #0f766e;
    box-shadow: none;
  }

  .board-body .visitor-feed .sort-tabs button {
    border-radius: 6px;
  }

  .board-body .feed-heading {
    order: 1;
    align-items: center;
    margin: 0;
    border: 0;
    padding: 4px 0 6px;
  }

  .board-body .feed-heading strong {
    font-size: 18px;
  }

  .board-body .feed-heading span {
    display: none;
  }

  .board-body #refresh-feed {
    display: none;
  }

  .board-body #pinned-section {
    order: 3;
  }

  .board-body .feed-error-state {
    order: 4;
  }

  .board-body #post-list {
    order: 5;
  }

  .board-body #load-more-posts {
    order: 6;
  }

  .board-body #empty-state {
    order: 7;
  }

  .board-body .visitor-post-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
  }

  .board-body .visitor-post {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #e5eae7;
    border-radius: 0;
    padding: 16px 2px;
    background: transparent;
    box-shadow: none;
  }

  .board-body .visitor-post:not(.list-row):not(.summary-row) {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 6px;
    align-items: start;
  }

  .board-body .visitor-post:not(.list-row):not(.summary-row) > .post-meta,
  .board-body .visitor-post:not(.list-row):not(.summary-row) > p,
  .board-body .visitor-post:not(.list-row):not(.summary-row) > .comment-box > .comment-panel {
    grid-column: 1 / -1;
  }

  .board-body .visitor-post:not(.list-row):not(.summary-row) > .post-actions {
    grid-column: 1;
  }

  .board-body .visitor-post:not(.list-row):not(.summary-row) > .comment-box {
    display: contents;
  }

  .board-body .visitor-post:not(.list-row):not(.summary-row) > .comment-box > .comment-toggle {
    grid-column: 2;
    margin-top: 4px;
  }

  .board-body .visitor-post:nth-child(2n) {
    background: transparent;
  }

  .board-body .visitor-post.pinned,
  .board-body .visitor-post.official-notice {
    border: 0;
    border-bottom: 1px solid #dfe7e3;
    border-radius: 0;
    background: #fffdf2;
    box-shadow: none;
  }

  .board-body .visitor-post p {
    font-size: 16px;
    line-height: 1.6;
  }

  .board-body .post-meta-signal {
    display: none;
  }

  .board-body .post-meta-signal::before {
    content: none !important;
  }

  .board-body .post-actions button,
  .board-body .comment-toggle,
  .board-body .comment-form button,
  .board-body #refresh-feed,
  .board-body .pinned-toggle,
  .board-body .load-more-posts {
    min-height: var(--mobile-touch-target);
  }

  .board-body .pinned-section {
    margin: 4px 0 8px;
    border-radius: 8px;
    box-shadow: none;
  }

  .board-body .empty-state {
    min-height: 240px;
    margin-top: 6px;
    border-radius: 10px;
  }

  .board-body .feed-error-state {
    align-items: flex-start;
    margin: 10px 0 2px;
    border-radius: 8px;
    padding: 14px;
  }

  .board-body .board-error-state {
    margin: 16px;
    border-radius: 10px;
    padding: 24px 20px;
  }

  .board-body #open-composer {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: var(--mobile-layer-bottom-nav);
    width: auto;
    min-height: 54px;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.18);
  }

  .board-body #open-composer:disabled {
    display: none;
  }

  .board-body::after {
    z-index: calc(var(--mobile-layer-bottom-nav) - 1);
    height: calc(104px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(16, 24, 39, 0.08);
    background: #fff;
  }

  .board-body.board-error::after {
    display: none;
  }

  /* Composer occupies the visual viewport so the keyboard cannot cover it. */
  .board-body .composer-sheet {
    inset: 0 auto auto 0;
    display: block;
    width: 100%;
    height: var(--composer-viewport-height, 100dvh);
    padding: 0;
  }

  .board-body .composer-backdrop {
    display: none;
  }

  .board-body .composer-panel {
    display: flex;
    width: 100%;
    height: var(--composer-viewport-height, 100dvh);
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    animation: none;
  }

  .board-body .composer-panel .visitor-composer {
    display: grid;
    width: 100%;
    height: 100%;
    max-height: none;
    align-content: start;
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    padding: calc(env(safe-area-inset-top) + 66px) 16px calc(92px + env(safe-area-inset-bottom));
    background: #fff;
  }

  .board-body .composer-heading {
    padding-right: 72px;
  }

  .board-body .composer-close {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 10px);
    right: 12px;
    z-index: 3;
    min-width: 58px;
    min-height: var(--mobile-touch-target);
    border-radius: 8px;
  }

  .board-body .composer-panel textarea {
    min-height: min(34dvh, 260px);
    resize: vertical;
  }

  .board-body .composer-panel .composer-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr) minmax(108px, auto);
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .board-body .composer-panel .composer-footer .secondary-button {
    min-height: 50px;
    border-radius: 8px;
  }

  /* New board: one decision per screen with persistent forward action. */
  .page-new {
    min-height: 100dvh;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    background: #f7f9f8;
  }

  .page-new .site-nav {
    position: sticky;
    top: 0;
    z-index: var(--mobile-layer-sticky);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    width: 100% !important;
    max-width: none;
    min-height: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top));
    align-items: center;
    margin: 0 !important;
    border: 0;
    border-bottom: 1px solid rgba(16, 24, 39, 0.1);
    padding: env(safe-area-inset-top) 12px 0 !important;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  .page-new .site-brand,
  .page-new .site-links {
    display: none !important;
  }

  .page-new .new-mobile-step-back,
  .page-new .new-mobile-exit {
    min-height: var(--mobile-touch-target);
    align-items: center;
    border: 0;
    padding: 0 8px;
    color: #4d596a;
    background: transparent;
    font-size: 13px;
    font-weight: 850;
  }

  .page-new .new-mobile-step-back:not([hidden]) {
    display: inline-flex;
    justify-self: start;
  }

  .page-new .new-mobile-title {
    display: block;
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    color: #17201d;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-new .new-mobile-exit {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
  }

  .page-new .new-shell {
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  }

  body.page-new[data-new-step="purpose"] .new-form,
  body.page-new[data-new-step="details"] .new-copy {
    display: none;
  }

  .page-new .new-copy h1 {
    max-width: 11em;
    margin: 0 0 8px;
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.1;
  }

  .page-new .new-copy > p:not(.new-auto-note) {
    font-size: 14px;
    line-height: 1.6;
  }

  .page-new .new-step-kicker,
  .page-new .new-auto-note {
    display: none;
  }

  .page-new .template-picker {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 16px;
    border-top: 1px solid #dfe6e2;
  }

  .page-new .template-picker button {
    min-height: 58px;
    border: 0;
    border-bottom: 1px solid #dfe6e2;
    border-radius: 0;
    padding: 10px 42px 10px 2px;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .page-new .template-picker button:hover {
    transform: none;
  }

  .page-new .template-picker button.active {
    border-color: #0f766e;
    background: #edf8f3;
    box-shadow: inset 3px 0 0 #0f766e;
  }

  .page-new .template-picker button small {
    display: none;
  }

  .page-new .template-picker button.active small {
    display: block;
    margin-top: 3px;
  }

  .page-new .template-picker button::after {
    right: 8px;
  }

  .page-new .new-form {
    position: static;
    display: grid;
    gap: 18px;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .page-new .new-form > label:first-of-type input {
    min-height: 54px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
  }

  .page-new .creation-summary {
    gap: 0;
    padding: 12px 0;
  }

  .page-new .template-preview,
  .page-new .access-preview dl,
  .page-new .new-change-note {
    display: none;
  }

  .page-new .access-preview > div {
    gap: 3px;
  }

  .page-new .access-preview > div > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .page-new .advanced-settings summary {
    display: flex;
    min-height: var(--mobile-touch-target);
    align-items: center;
  }

  .page-new .mode-picker,
  .page-new .two-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-new .advanced-settings > .mode-picker {
    display: none;
  }

  .page-new .mode-picker button {
    min-height: 68px;
  }

  .page-new .new-desktop-submit {
    display: none;
  }

  .page-new .new-mobile-action-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--mobile-layer-bottom-nav);
    display: grid;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(16, 24, 39, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 32px rgba(24, 31, 42, 0.08);
    backdrop-filter: blur(18px);
  }

  .page-new .new-mobile-action-bar .primary-button:not([hidden]) {
    display: inline-flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
}

@media (max-width: 380px) {
  .board-body .feed-error-state {
    display: grid;
  }

  .board-body .feed-error-state button {
    justify-self: start;
  }
}