/* Community additions share the established dark/light tokens. */
@layer components {
  .template-library { max-width: 1120px; margin-inline: auto; }
  .template-intro { padding: clamp(18px, 4vw, 32px); }
  .template-kicker { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .template-intro h1 { margin: 8px 0 12px; font-size: clamp(26px, 5vw, 38px); }
  .template-search { display: grid; gap: 14px; margin-top: 24px; }
  .template-search label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; }
  .template-search :is(input, select) { width: 100%; min-width: 0; min-height: 46px; padding: 12px 14px; font-size: 16px; }
  .template-search > button { justify-self: start; min-height: 44px; }
  .template-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .template-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .template-card { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
  .template-card h2 { font-size: 23px; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
  .template-card p { margin: 0; line-height: 1.65; white-space: pre-line; }
  .template-author { display: flex; gap: 12px; align-items: center; min-width: 0; }
  .template-author > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .template-author small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
  .template-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
  .template-meta { color: var(--accent); font-size: 12px; font-weight: 700; }
  .template-story { border-top: 1px solid var(--line); padding-top: 12px; }
  .template-story summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 650; }
  .template-story h3 { margin: 18px 0 8px; }
  .template-copy { margin-top: auto; min-height: 48px; justify-content: space-between; width: 100%; }
  .template-confirm-dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--text); }
  .template-confirm-content { padding: 24px; }
  .template-confirm-content p { line-height: 1.6; margin: 16px 0; }
  .template-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
  .template-confirm-actions button { min-height: 46px; flex: 1 1 160px; }
  .motivation-control { width: 100%; flex: 1 0 100%; min-width: 0; }
  .motivation-bar { display: grid; grid-template-columns: minmax(0,1fr) 58px; border: 1px solid #fff; border-radius: 12px; overflow: hidden; background: var(--soft); }
  .motivation-bar button { min-height: 58px; border: 0; border-radius: 0; background: transparent; color: var(--text); }
  .motivation-phrase { min-width: 0; padding: 12px 16px; text-align: center; }
  .motivation-phrase > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
  .motivation-phrase small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
  .motivation-bar .motivation-icon { font-size: 24px; border-left: 1px solid var(--line); }
  .motivation-bar button:hover, .motivation-bar button[aria-expanded="true"] { background: var(--soft); color: var(--accent); }
  .motivation-options { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; background: var(--card); }
  .motivation-options p { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .motivation-options > div { display: grid; gap: 6px; }
  .motivation-options button { min-height: 44px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--text); }
  .motivation-options[data-kind="icon"] > div { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .motivation-options[data-kind="icon"] button { text-align: center; padding: 8px 2px; font-size: 25px; }
  .motivation-status { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
  .motivation-status:empty { display: none; }
}
/* Keep reply reading width stable inside, never enlarge the surrounding card. */
.comment-thread-viewport { container-type: inline-size; width: 100%; max-width: 100%; min-width: 0; overflow: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: thin; padding-bottom: 8px; }
.comment-thread-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.comment-thread-canvas { min-width: 280px; width: 100%; }
.comment-thread-canvas .comment-thread { min-width: 280px; }
.comment-thread-canvas .comment-replies { margin-left: 20px; padding-left: 12px; }
.comment-thread-canvas .comment { min-width: 280px; width: 280px; max-width: none; }
@supports (width: 1cqw) {
  .comment-thread-canvas .comment { width: clamp(280px, 100cqw, 640px); }
}
.comment-thread-canvas .comment-body { min-width: 0; }
.comments { min-width: 0; max-width: 100%; }
/* Joined is an active relation, not a disabled control. */
.participation-action-button.is-leave-action .icon-button-symbol { color: var(--accent); opacity: 1; filter: none; }
.participation-action-button.is-leave-action .icon-button-symbol svg { opacity: 1; filter: none; }
.participation-action-button.is-leave-action .icon-button-symbol svg path:last-child { stroke: #fff; opacity: 1; }
:root:not([data-theme="dark"]) .participation-action-button.is-leave-action .icon-button-symbol svg path:last-child { stroke: #17200f; }
@layer responsive {
  @media (max-width: 760px) {
    .template-grid { grid-template-columns: minmax(0,1fr); }
    .template-card { padding: 20px; }
    .template-intro { padding-top: 36px; }
    .template-filter-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .template-filter-row label:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 430px) {
    .top-actions { gap: 4px; }
    .top-actions > button { width: 34px; min-width: 34px; height: 36px; padding: 5px; }
  }
}

.cf-native-dialog.template-confirm-dialog[open] { display: grid; place-items: center; background: rgba(0,0,0,.55); padding: 16px; }
.template-confirm-dialog .template-confirm-content { width: min(520px,100%); max-height: calc(var(--cf-dialog-height,100vh) - 32px); overflow: auto; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; }

@layer components {
  .template-intro .discover-menu-heading { margin: 0 0 12px; }
  .template-intro .discover-menu-toggle { border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
  .template-filter-field { display: grid; align-content: start; gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; }
  .template-filter { position: relative; min-width: 0; }
  .template-filter summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); color: var(--text); cursor: pointer; list-style: none; }
  .template-filter summary::-webkit-details-marker { display: none; }
  .template-filter summary > span { overflow-wrap: anywhere; min-width: 0; }
  .template-filter summary svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .template-filter[open] summary svg { transform: rotate(180deg); }
  .template-filter[open] summary, .template-filter summary:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-glow); }
  .template-filter-menu.world-country-search-menu { padding: 10px; max-height: 320px; width: max(100%, 240px); max-width: calc(100vw - 64px); }
  .template-filter-field:nth-child(2) .template-filter-menu { left: auto; right: 0; }
  .template-filter-options { margin-block: 8px; }
  .template-filter-error { font-size: 12px; color: var(--muted); }
  .motivation-control.has-selection .motivation-phrase > span { color: var(--accent); }
}
@layer responsive {
  @media (max-width: 760px) {
    body.world-view .header-primary-actions .header-create-button { border: 1px solid var(--accent); background: var(--card); color: var(--text); }
  }
}

/* Selected detail styling; preserve the existing gallery sizing on all devices. */
.challenge-detail-page .challenge-detail-surface { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.challenge-detail-page .challenge-detail-surface::before { display: none; }
.challenge-detail-page .challenge-detail-meta { grid-template-columns: minmax(0,1fr) minmax(0,40%); padding-right: 40px; align-items: start; gap: 12px; }
.challenge-detail-page .challenge-detail-category-slot { max-width: 100%; justify-content: flex-end; justify-self: end; }
.challenge-detail-page .challenge-detail-owner { min-width: 0; }
.challenge-detail-page .challenge-detail-owner > span { min-width: 0; overflow-wrap: anywhere; }
.challenge-detail-page .challenge-detail-actions .detail-action-label { display: none; }
.challenge-detail-page .motivation-bar { border: 1px solid #fff; border-radius: 12px; background: transparent; }
.challenge-detail-page .motivation-bar .motivation-icon { border-left: 0; }
.motivation-custom-choice { width: 100%; margin-top: 6px; }
.motivation-custom-form:not([hidden]) { display: grid; gap: 8px; margin-top: 12px; }
.motivation-custom-form label { display: grid; gap: 8px; }
.motivation-custom-form input { width: 100%; min-width: 0; min-height: 44px; padding: 12px; font-size: 16px; }
.motivation-custom-form small { color: var(--muted); }

#challengeDetailOverview .challenge-hero-head { margin-bottom: 16px; padding-top: 12px; }


.motivation-options { margin-top: 3px; padding: 5px; }
.motivation-options > div { gap: 4px; }
.motivation-control { scroll-margin-block: 90px; }
.notice-unread-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #ef4444; }
.update-actions-primary, .update-actions-secondary { display: contents; }
.update-card > .actionbar.update-feed-actions { display: flex; flex-direction: column; gap: 6px; }
.update-feed-actions .update-actions-primary { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); width: 100%; gap: 0; }
.update-feed-actions .update-actions-primary > button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; min-width: 0; width: 100%; padding: 10px 4px; margin: 0; }
.update-feed-actions .update-actions-primary .icon-button-symbol, .update-feed-actions .update-actions-primary svg { width: 25px; height: 25px; flex-shrink: 0; }
.update-feed-actions .update-actions-primary em { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.update-feed-actions .update-actions-secondary { display: grid; justify-content: flex-end; gap: 8px; width: 100%; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
.cf-native-dialog.motivation-celebration[open] { display: grid; place-items: center; padding: 28px; border: 0; overflow: hidden; background: #090e12; color: #fff; isolation: isolate; animation: motivation-scene-in .25s ease-out both; }
.motivation-celebration::backdrop { background: #090e12; }
.motivation-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.motivation-aura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%,rgba(149,235,72,.19),transparent 58%),radial-gradient(ellipse at 80% 90%,rgba(138,112,242,.13),transparent 55%); animation: motivation-aura-in 1.6s ease-out both; }
.motivation-dismiss { position: absolute; right: max(16px,env(safe-area-inset-right)); top: max(16px,env(safe-area-inset-top)); z-index: 4; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(9,14,18,.7); color: #fff; font: 26px/1 sans-serif; cursor: pointer; }
.motivation-moment { position: relative; z-index: 2; width: min(620px,100%); text-align: center; pointer-events: none; text-shadow: 0 3px 25px #090e12,0 0 60px #090e12; }
.motivation-sender { color: #d6e4d0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; margin: 0 0 26px; animation: motivation-copy-in .6s .1s both; }
.motivation-hero-emoji { font: 110px/1.2 "Apple Color Emoji","Segoe UI Emoji",sans-serif; margin-bottom: 24px; filter: drop-shadow(0 14px 34px rgba(160,245,80,.25)); animation: motivation-emoji-pop 1.1s .12s cubic-bezier(.16,1,.3,1) both; }
.motivation-moment .motivation-message { margin: 0; color: #fff; font-family: var(--font-body); font-size: clamp(28px,7.5vw,56px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-transform: none; overflow-wrap: anywhere; text-wrap: balance; animation: motivation-copy-in .7s .24s both; }
.motivation-signature { display: block; color: #b7fc79; font-size: 13px; letter-spacing: .04em; margin-top: 28px; animation: motivation-copy-in .7s .4s both; }
.cf-native-dialog.motivation-celebration.is-finishing { opacity: 0; transition: opacity .38s ease-in; animation: none; }
@keyframes motivation-scene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes motivation-aura-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes motivation-copy-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes motivation-emoji-pop { 0% { opacity: 0; transform: translateY(36px) scale(.45) rotate(-16deg); } 55% { opacity: 1; transform: translateY(-8px) scale(1.12) rotate(5deg); } 78% { transform: translateY(3px) scale(.98) rotate(-2deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .motivation-celebration .motivation-rain { display: none; } .motivation-celebration :is(.motivation-aura,.motivation-sender,.motivation-hero-emoji,.motivation-message,.motivation-signature) { animation: none; } }
.motivation-bar { grid-template-columns: 58px minmax(0,1fr) 58px; }
.motivation-bar .motivation-phrase { grid-column: 1 / -1; grid-row: 1; padding-inline: 58px; }
.motivation-bar .motivation-icon { grid-column: 3; grid-row: 1; z-index: 1; }

.update-picker-sort { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 0 16px; }
.update-picker-sort summary { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 700; }
.update-picker-sort summary::-webkit-details-marker { display: none; }
.update-picker-sort summary span { margin-left: auto; color: var(--accent); font-size: 13px; }
.update-picker-sort[open] summary b { transform: rotate(180deg); }
.update-picker-sort-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-bottom: 16px; }
.update-picker-sort-options button { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--text); }
.update-picker-sort-options button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.update-picker-group { margin-bottom: 24px; }
.update-picker-group h2 { display: flex; gap: 12px; align-items: center; font-size: 18px; }
.update-picker-group h2 span { color: var(--muted); font-size: 13px; }
.update-picker-card .mine-list-card-head { flex-wrap: wrap; gap: 10px; }
.update-card .update-header-stage { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 45%; }
.update-category-label { color: var(--muted); font-size: 11px; line-height: 1.3; text-align: right; overflow-wrap: anywhere; }

.update-detail-category { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-bottom: 10px; }