/* IP School opens full screen like the wiki and prompts. One page runs the weekly loop: the
   week's drop and goals lead, the board and a rail of things to do sit under them, and
   threads, the full leaderboard, past weeks and About open as deeper pages. */
#communitymodal {
  --cm-bg: #121212;
  --cm-card: #1c1c1f;
  --cm-card-2: #19191b;
  --cm-line: #2e2c29;
  --cm-card-line: #2c2c30;
  --cm-text: #f5f2ec;
  --cm-soft: #d8d3c9;
  --cm-muted: #a39d93;
  --cm-orange: #fc5b0a;
  --cm-yellow: #ffd400;
  --cm-green: #8ee6a8;
  --cm-display: 'Oldschool Grotesk Condensed', 'Arial Narrow', Arial, sans-serif;
  width: calc(100vw - 24px); height: calc(100dvh - 24px); max-width: 1800px; max-height: none;
  box-sizing: border-box; padding: 0; border: 1px solid var(--cm-line); border-radius: 20px; overflow: hidden;
  background: var(--cm-bg); color: var(--cm-text); color-scheme: dark; box-shadow: 0 24px 100px #0009;
}
#communitymodal::backdrop { background: #070709ba; backdrop-filter: blur(7px); }
.community-shell { position: relative; display: flex; flex-direction: column; height: 100%; }

/* ---- masthead (view-masthead.css), plus who's around beside the title ---- */
#community-presence { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--cm-line); color: var(--cm-muted); font-size: 13px; white-space: nowrap; }
#community-presence[hidden] { display: none; }
#community-presence b { color: var(--cm-text); }
.presence-faces { display: flex; }
.presence-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #2a2a2e; border: 2px solid var(--cm-bg); }
.presence-face + .presence-face { margin-left: -8px; }
/* Who's around gives way before the search does, so the search stays centred like the other views'. */
@media (max-width: 1440px) { #community-presence .presence-copy { display: none; } }
@media (max-width: 1080px) { #community-presence { display: none; } }

.community-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.community-scroll:focus { outline: none; }
.community-view[hidden] { display: none; }
#community-home-view { padding: 26px 28px 64px; box-sizing: border-box; }
.community-page { max-width: 1000px; margin: 0 auto; padding: 22px 32px 64px; box-sizing: border-box; }
.community-eyebrow { margin: 0 0 8px; color: var(--cm-orange); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.community-link { padding: 0; border: 0; background: none; color: var(--cm-yellow); cursor: pointer; font: 700 13px/1.3 -apple-system, "Segoe UI", sans-serif; white-space: nowrap; }
.community-link:hover { text-decoration: underline; }
.community-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-bottom: 18px; padding: 0 14px; border: 1px solid #393630; border-radius: 999px; background: #1c1b1a; color: var(--cm-soft); cursor: pointer; font: 800 14px/1 var(--cm-display); letter-spacing: .04em; text-transform: uppercase; }
.community-back:hover { border-color: #ff8c41; color: var(--cm-text); }

/* ---- this week: the drop, the journey, the goals ---- */
.school-week { position: relative; overflow: hidden; padding: 26px 28px 24px; border: 1px solid #3b3326; border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, #3a2410 0%, #221a12 38%, #181614 72%); }
.school-week-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.school-week-heading { min-width: 0; }
#week-hero-title { margin: 0; max-width: 18ch; font: 900 clamp(34px, 4.2vw, 56px)/.98 var(--cm-display); text-transform: uppercase; color: var(--cm-yellow); overflow-wrap: anywhere; }
.school-clock { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.community-next { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border: 1px solid #4a3b26; border-radius: 999px; background: #1a150fcc; color: var(--cm-soft); font-size: 13px; white-space: nowrap; }
.community-next svg { width: 17px; height: 17px; flex: none; fill: #ff6c19; }
.community-next b { color: var(--cm-yellow); font: 900 17px/1 var(--cm-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.school-journey { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.school-journey li { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #4a4238; border-radius: 50%; color: #8d867b; font: 800 12px/1 var(--cm-display); }
.school-journey li.is-past { border-color: #6b5a33; background: #3a3020; color: #d8c79a; }
.school-journey li.is-current { border-color: var(--cm-yellow); background: var(--cm-yellow); color: #1a1712; box-shadow: 0 0 0 3px #ffd40033; }
.school-week-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; margin-top: 24px; }
/* The week folds down to its title and clock once it has been read, so the board leads. */
.school-clock-row { display: flex; align-items: center; gap: 8px; }
.school-week-toggle { display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid #4a3b26; border-radius: 50%; background: #1a150fcc; color: var(--cm-soft); cursor: pointer; }
.school-week-toggle:hover { border-color: #ff8c41; color: var(--cm-text); }
.school-week-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.school-week-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s ease; }
.school-week-fold > .school-week-body { min-height: 0; overflow: hidden; margin-top: 0; padding-top: 24px; padding-bottom: 3px; margin-bottom: -3px; transition: padding-top .45s ease, opacity .3s ease; }
#week-hero-title { transition: font-size .45s ease; }
.school-week.is-collapsed { cursor: pointer; }
.school-week.is-collapsed .school-week-fold { grid-template-rows: 0fr; }
.school-week.is-collapsed .school-week-fold > .school-week-body { padding-top: 0; opacity: 0; }
.school-week.is-collapsed #week-hero-title { max-width: none; font-size: clamp(24px, 2.4vw, 32px); }
.school-week.is-collapsed .school-week-toggle svg { transform: rotate(180deg); }
.school-goals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.school-week h3 { margin: 0; color: var(--cm-text); font: 900 19px/1.1 var(--cm-display); letter-spacing: .03em; text-transform: uppercase; }
#goal-progress { color: var(--cm-muted); font-size: 13px; font-weight: 600; }
.goal-meter { height: 6px; margin: 10px 0 12px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
#goal-meter-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cm-orange), var(--cm-yellow)); transition: width .4s ease; }
#goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border: 1px solid #ffffff12; border-radius: 14px; background: #ffffff08; }
.goal.is-done { border-color: #ffd40040; background: #ffd4000d; }
.goal-check { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid #6f665a; border-radius: 50%; background: transparent; color: transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.goal-check svg { width: 18px; height: 18px; fill: currentColor; }
.goal-check:hover { border-color: var(--cm-yellow); color: #ffd40066; }
.goal-check[aria-pressed="true"] { border-color: var(--cm-yellow); background: var(--cm-yellow); color: #1a1712; }
.goal-check:active { transform: scale(.9); }
.goal-text { color: var(--cm-soft); font-size: 15px; line-height: 1.4; }
.goal.is-done .goal-text { color: var(--cm-text); }
.goal-social { display: flex; align-items: center; gap: 7px; color: var(--cm-muted); font-size: 12.5px; white-space: nowrap; }
.goal-faces { display: flex; }
.goal-face { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #2a2a2e; border: 2px solid #201a14; }
.goal-face + .goal-face { margin-left: -7px; }
.goal-first { color: #7f786d; font-style: italic; }
/* Tracked goals check themselves off; an open one is a link into the workshop. */
.goal.is-tracked { grid-template-columns: minmax(0, 1fr) auto; padding: 0 14px 0 0; }
.goal-go { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0 11px 11px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.goal-go { cursor: pointer; border-radius: 14px; }
.goal-go > svg { width: 20px; height: 20px; fill: var(--cm-muted); transition: transform .15s, fill .15s; }
.goal.is-tracked:has(button.goal-go:hover) { border-color: #ffd40040; }
button.goal-go:hover > svg { fill: var(--cm-yellow); transform: translateX(3px); }
button.goal-go:hover .goal-check { border-color: var(--cm-yellow); }
button.goal-go:hover .goal-text { color: var(--cm-text); }
.goal.is-done .goal-go .goal-check { border-color: var(--cm-yellow); background: var(--cm-yellow); color: #1a1712; }
#goal-complete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding: 12px 14px; border: 1px solid #ffd40055; border-radius: 14px; background: #2a2412; }
#goal-complete[hidden] { display: none; }
#goal-complete p { margin: 0; color: var(--cm-soft); font-size: 14px; }
#goal-complete strong { color: var(--cm-yellow); }
/* Once the week is done and shared, the steps give way to one line. */
.school-goals.is-finished #goal-progress, .school-goals.is-finished .goal-meter, .school-goals.is-finished #goal-list { display: none; }
#goal-finished { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding: 12px 14px; border: 1px solid #ffd40040; border-radius: 14px; background: #ffd4000d; }
#goal-finished[hidden] { display: none; }
#goal-finished p { margin: 0; color: var(--cm-soft); font-size: 14px; }
#goal-finished strong { color: var(--cm-yellow); }
/* A finished week's check sits past the title's widest line, from its cap tops to its last baseline.
   It's placed by community.js and takes no room, so it never moves the header. */
.school-week-title { position: relative; }
.week-done { position: absolute; left: var(--done-left, 100%); top: var(--done-top, 0); width: var(--done-size, 1em); height: var(--done-size, 1em); pointer-events: none; }
.week-done svg { display: block; width: 100%; height: 100%; }
.week-done circle { fill: var(--cm-green); }
.week-done path { fill: none; stroke: #10241a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.week-done[hidden] { display: none; }
.school-updates { display: flex; flex-direction: column; gap: 10px; padding-left: 28px; border-left: 1px solid #ffffff14; }
#week-hero-updates { margin: 0; padding-left: 18px; color: var(--cm-soft); font-size: 14.5px; line-height: 1.55; }
#week-hero-updates li { margin: 0 0 6px; }
#week-hero-updates li::marker { color: var(--cm-yellow); }
.school-updates .community-link { align-self: flex-start; margin-top: 2px; }

/* ---- the board beside the rail ---- */
.community-columns { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px); gap: 28px; align-items: start; margin-top: 28px; }
.board { min-width: 0; }
.board-head { margin-bottom: 14px; }
.board-head h2 { margin: 0; font: 900 32px/1 var(--cm-display); text-transform: uppercase; text-box: trim-start cap alphabetic; }
.board-primary, .board-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer; font: 900 15px/1 var(--cm-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.board-primary { border: 0; background: var(--cm-orange); color: #fff; }
.board-primary:hover { background: #ff6d1f; }
.board-primary:disabled, .board-secondary:disabled { opacity: .55; cursor: wait; }
.board-secondary { border: 1px solid #494035; background: #27231e; color: var(--cm-text); }
.board-secondary:hover { border-color: #ff8c41; }

.board-compose { margin-bottom: 16px; border: 1px solid var(--cm-card-line); border-radius: 18px; background: var(--cm-card); }
.board-compose.is-open { padding: 16px 18px; border-color: #4a4036; }
.board-compose-prompt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 18px; background: none; color: var(--cm-muted); cursor: text; text-align: left; font: 15px/1.4 -apple-system, "Segoe UI", sans-serif; }
.board-compose-prompt:hover { color: var(--cm-soft); background: #212124; }
.board-compose-prompt[hidden], #board-compose-fields[hidden] { display: none; }
#board-compose-fields { display: flex; flex-direction: column; gap: 12px; }
.board-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.board-kinds label { position: relative; cursor: pointer; }
.board-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.board-kinds span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid #3a3530; border-radius: 999px; background: #19191b; color: #c9c3b8; font: 800 14px/1 var(--cm-display); letter-spacing: .03em; text-transform: uppercase; }
.board-kinds label:hover span { border-color: #ff8c41; color: var(--cm-text); }
.board-kinds input:checked + span { border-color: var(--cm-yellow); background: #2a2616; color: var(--cm-yellow); }
.board-field { display: flex; flex-direction: column; gap: 7px; }
.board-field > span:not(.sr-only) { color: var(--cm-soft); font-size: 14px; font-weight: 600; }
.board-field input, .board-field textarea, .board-reply-field textarea { box-sizing: border-box; width: 100%; padding: 11px 13px; border: 1px solid #3a3a3f; border-radius: 12px; background: #141416; color: var(--cm-text); font: 15px/1.5 -apple-system, "Segoe UI", sans-serif; resize: vertical; }
.board-field input { height: 46px; font-size: 16px; font-weight: 600; }
.board-field input:focus, .board-field textarea:focus, .board-reply-field textarea:focus { outline: none; border-color: var(--cm-orange); box-shadow: 0 0 0 3px #fc5b0a33; }
.board-field ::placeholder, .board-reply-field ::placeholder { color: #7f7a72; }
.board-form-error { margin: 0; color: #ff9d80; font-size: 14px; }
.board-form-error:empty { display: none; }
.board-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.board-hint { margin-right: auto; color: #7f7a72; font-size: 12px; }

.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.board-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.board-filters button { height: 34px; padding: 0 13px; border: 1px solid #3a3530; border-radius: 999px; background: #1a1918; color: #c9c3b8; cursor: pointer; font: 800 14px/1 var(--cm-display); letter-spacing: .03em; text-transform: uppercase; }
.board-filters button:hover { border-color: #ff8c41; color: var(--cm-text); }
.board-filters button[aria-pressed="true"] { background: var(--cm-text); border-color: var(--cm-text); color: #161618; }
.board-search { position: relative; flex: 0 1 220px; min-width: 150px; }
.board-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--cm-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.board-search input, #board-sort { box-sizing: border-box; height: 34px; border: 1px solid #3a3a3f; border-radius: 10px; background: #141416; color: var(--cm-text); font: 14px -apple-system, "Segoe UI", sans-serif; }
.board-search input { width: 100%; padding: 0 12px 0 34px; }
#board-sort { -webkit-appearance: none; appearance: none; padding: 0 34px 0 12px; background: #141416 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px; line-height: 32px; cursor: pointer; }
#board-sort:hover { border-color: #ff8c41; }
#board-sort option { background: #141416; color: var(--cm-text); }
.board-search input:focus, #board-sort:focus { outline: none; border-color: var(--cm-orange); box-shadow: 0 0 0 3px #fc5b0a33; }
.board-status { margin: 0 0 14px; padding: 18px; border: 1px dashed #3a3530; border-radius: 16px; color: var(--cm-muted); text-align: center; font-size: 15px; line-height: 1.5; }
.board-status.is-error { border-style: solid; border-color: #6b3a2c; background: #2a1a16; color: #f1cdbf; }
.board-status[hidden] { display: none; }
.board-retry { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--cm-yellow); cursor: pointer; font: inherit; font-weight: 700; }
.board-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.board-starter { --tag: #c9c3b8; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px dashed color-mix(in srgb, var(--tag) 45%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--tag) 6%, transparent); color: var(--cm-text); cursor: pointer; text-align: left; font: inherit; }
.board-starter[data-category="introductions"] { --tag: #ffd400; }
.board-starter[data-category="questions"] { --tag: #62cfff; }
.board-starter[data-category="discussion"] { --tag: #b69cff; }
.board-starter b { color: var(--tag); font: 900 20px/1.05 var(--cm-display); letter-spacing: .02em; text-transform: uppercase; }
.board-starter small { color: var(--cm-muted); font-size: 13px; line-height: 1.4; }
.board-starter:hover { border-style: solid; background: color-mix(in srgb, var(--tag) 12%, transparent); }
#board-threads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#board-more { display: flex; margin: 18px auto 0; }
#board-more[hidden] { display: none; }
.board-row-open { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: start; gap: 14px; width: 100%; padding: 16px 18px; border: 1px solid var(--cm-card-line); border-radius: 16px; background: var(--cm-card); color: var(--cm-text); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s ease, background .15s ease; }
.board-row-open:hover { border-color: #4a4540; background: #212124; }
.board-row.is-fresh .board-row-open { animation: board-arrive 2.4s ease-out; }
@keyframes board-arrive { from { border-color: var(--cm-orange); box-shadow: 0 0 0 3px #fc5b0a55; } }
.board-avatar { display: block; width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: #2a2a2e; }
.board-compose-prompt .board-avatar { width: 36px; height: 36px; }
.board-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.board-row-title { font: 900 21px/1.15 var(--cm-display); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
.board-row-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #bdb7ad; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.board-row-stats { display: flex; gap: 12px; padding-top: 2px; }
.board-stat { display: inline-flex; align-items: center; gap: 5px; color: var(--cm-muted); font: 700 14px/1 -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.board-stat svg { width: 16px; height: 16px; fill: currentColor; }
.board-stat.is-liked { color: #ff6f8e; }
.board-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.board-tag { --tag: #c9c3b8; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tag) 12%, transparent); color: var(--tag); font: 800 12px/1 var(--cm-display); letter-spacing: .06em; text-transform: uppercase; }
.board-tag svg { width: 13px; height: 13px; fill: currentColor; }
.board-tag[data-category="introductions"] { --tag: #ffd400; }
.board-tag[data-category="questions"] { --tag: #62cfff; }
.board-tag[data-category="discussion"] { --tag: #b69cff; }
.board-tag-pin { --tag: #ff8c41; }
.board-tag-answered { --tag: #8ee6a8; }
.board-tag-open { --tag: #ff8c41; border-style: dashed; background: transparent; }
.board-tag-new { --tag: #fc5b0a; background: var(--cm-orange); border-color: var(--cm-orange); color: #fff; }

/* ---- the rail: small things to do, each one a step in the loop ---- */
.community-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rail-card { padding: 16px 16px 12px; border: 1px solid var(--cm-line); border-radius: 18px; background: #1a1918; }
.rail-card[hidden] { display: none; }
.rail-card h3 { margin: 0 0 8px; font: 900 18px/1.1 var(--cm-display); letter-spacing: .03em; text-transform: uppercase; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rail-list { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; }
.rail-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: var(--cm-text); cursor: pointer; text-align: left; font: inherit; }
.rail-item:hover { background: #ffffff0a; }
.rail-face { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: #2a2a2e; }
.rail-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rail-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.rail-copy small { color: var(--cm-muted); font-size: 12px; }
.rail-action { flex: none; padding: 5px 10px; border: 1px solid #4a4036; border-radius: 999px; color: var(--cm-yellow); font: 800 12px/1 var(--cm-display); letter-spacing: .05em; text-transform: uppercase; }
.rail-item:hover .rail-action { border-color: var(--cm-yellow); }
.rail-new { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--cm-orange); color: #fff; font: 800 11px/1 var(--cm-display); letter-spacing: .06em; text-transform: uppercase; }
.rail-empty { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 8px 8px; color: var(--cm-muted); font-size: 13px; line-height: 1.45; }
.rail-rank-row .rail-place { width: 18px; flex: none; color: var(--cm-muted); text-align: center; font: 900 16px/1 var(--cm-display); }
.rail-rank-row:first-child .rail-place { color: var(--cm-yellow); }
.rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.rail-score { flex: none; color: var(--cm-yellow); font: 900 18px/1 var(--cm-display); font-variant-numeric: tabular-nums; }
.rail-rank-row.is-me { background: #ffd40014; box-shadow: inset 0 0 0 1px #ffd40044; }
.rail-you { padding: 18px; border-color: #5a3a22; background: linear-gradient(160deg, #2a1d13, #1a1918 70%); }
.rail-you.is-guest { border-color: #4b4f9a; background: linear-gradient(160deg, #20213a, #1a1918 70%); }
.rail-you p { margin: 0 0 12px; color: var(--cm-soft); font-size: 14px; line-height: 1.5; }
.rail-login { width: 100%; background: #5865f2; }
.rail-login:hover { background: #6b77f4; }
.rail-you-head { display: flex; align-items: center; gap: 10px; }
.rail-you-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-you-label { color: var(--cm-orange); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rail-rank { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; }
.rail-rank strong { color: var(--cm-yellow); font: 900 44px/1 var(--cm-display); font-variant-numeric: tabular-nums; }
.rail-rank span { color: var(--cm-muted); font-size: 13px; }
.rail-you p.rail-you-detail { margin-bottom: 6px; color: var(--cm-text); font-weight: 600; }
.rail-you p.rail-you-facts { margin: 0; color: var(--cm-muted); font-size: 12.5px; }
.rail-about { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 14px 16px; color: var(--cm-soft); cursor: pointer; text-align: left; font: 14px/1.45 -apple-system, "Segoe UI", sans-serif; }
.rail-about svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: var(--cm-orange); }
.rail-about b { color: var(--cm-text); }
.rail-about:hover { border-color: #ff8c41; }

/* ---- one thread ---- */
#board-thread:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
#board-thread .community-back { align-self: flex-start; margin-bottom: 4px; }
.board-thread-head { display: flex; flex-direction: column; gap: 10px; }
.board-thread-title { margin: 0; font: 900 clamp(30px, 3.6vw, 46px)/1.02 var(--cm-display); text-transform: uppercase; overflow-wrap: anywhere; }
.board-post { padding: 18px 20px; border: 1px solid var(--cm-card-line); border-radius: 18px; background: var(--cm-card); scroll-margin: 24px; }
.board-post.is-thread { background: #1f1e1c; border-color: #3a352c; }
.board-post.is-answer { border-color: #3d7a4f; background: #18241c; box-shadow: inset 3px 0 0 var(--cm-green); }
.board-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; color: var(--cm-muted); font-size: 13px; }
.board-author { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: var(--cm-text); cursor: pointer; font: 700 15px/1.2 -apple-system, "Segoe UI", sans-serif; text-align: left; }
.board-author .board-avatar { width: 32px; height: 32px; }
.board-author:hover span { color: #ff8c41; }
.board-edited { font-style: italic; }
.board-op { padding: 2px 7px; border-radius: 6px; background: #2c2822; color: #ffbc8d; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.board-answer-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--cm-green); font: 800 13px/1 var(--cm-display); letter-spacing: .06em; text-transform: uppercase; }
.board-answer-badge svg { width: 15px; height: 15px; fill: currentColor; }
.board-post-body { color: #e6e1d7; font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-post-body a { color: var(--cm-yellow); }
.board-post-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.board-post-actions button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: #2a2a2e; color: var(--cm-text); cursor: pointer; font: 700 13px/1 -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.board-post-actions button svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.board-post-actions button:hover { background: #36363b; }
.board-like[aria-pressed="true"] { background: #3a1d26; color: #ff8fa6; }
.board-mark { color: var(--cm-green); }
.board-post-actions .board-delete { margin-left: auto; color: #f1a993; }
.board-post-actions .board-delete:hover, .board-post-actions .board-delete.is-confirming { background: #5a2a22; color: #fff; }
.board-replies-head { margin: 10px 0 0; color: var(--cm-soft); font: 900 20px/1.1 var(--cm-display); letter-spacing: .03em; text-transform: uppercase; }
.board-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.board-edit { display: flex; flex-direction: column; gap: 12px; }
.board-reply-form, .board-reply-login { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 16px 18px; border: 1px solid var(--cm-card-line); border-radius: 18px; background: var(--cm-card-2); }
.board-reply-field { display: flex; align-items: flex-start; gap: 12px; }
.board-reply-field .board-avatar { width: 36px; height: 36px; }
.board-reply-login { flex-direction: row; align-items: center; justify-content: space-between; }
.board-reply-login p { margin: 0; color: var(--cm-soft); }
.board-reply-login:focus { outline: none; border-color: #ff8c41; }

/* ---- the leaderboard, past weeks and About as deeper pages ---- */
#community-leaderboard .lbheader { align-items: flex-end; }
#community-leaderboard #statsheading { font: 900 clamp(32px, 4vw, 48px)/1.05 var(--cm-display); text-transform: uppercase; margin: 0; }
.lb-periods { display: flex; gap: 4px; padding: 4px; border: 1px solid #39332b; border-radius: 999px; background: #171614; }
.lb-periods button { border: 0; border-radius: 999px; padding: 9px 16px; background: transparent; color: #aaa49a; cursor: pointer; font: 900 14px/1 var(--cm-display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.lb-periods button[aria-pressed="true"] { background: var(--cm-yellow); color: #1a1712; }
#community-weeks #week-modal-title { margin: 0 0 16px; font: 900 44px/1 var(--cm-display); text-transform: uppercase; }
#community-weeks h3 { font-size: 17px; margin: 24px 0 8px; }
#community-weeks #week-heading { font-size: 20px; }
#community-weeks ul { margin: 0; padding-left: 20px; color: var(--cm-soft); font-size: 15.5px; line-height: 1.65; }
#community-weeks li { margin: 8px 0; }
#community-weeks li::marker { color: var(--cm-yellow); }
/* About reads as a page, not a modal card: a hero with the promise, then the five steps as a path. */
#community-about #aboutcard { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; }
#aboutcard h2 { color: var(--cm-text); }
.about-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px 28px; padding: 48px 52px 46px; border: 1px solid #3b3326; border-radius: 28px; background: radial-gradient(90% 130% at 0% 0%, #43260f 0%, #261b12 42%, #181614 78%); }
.about-hero::after { content: ''; position: absolute; right: -90px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, #fc5b0a26 0%, #fc5b0a00 70%); pointer-events: none; }
#community-about .about-hero img { width: 96px; height: 96px; filter: drop-shadow(0 10px 24px #fc5b0a55); }
.about-hero-text { display: flex; flex-direction: column; gap: 10px; }
#community-about #aboutcard .sub { color: #fc8b52; font-size: 15px; letter-spacing: .2em; }
#community-about #aboutcard h2 { font-size: clamp(44px, 6.4vw, 78px); line-height: .92; letter-spacing: 0; }
#community-about #aboutcard .about-lead { grid-column: 1 / -1; position: relative; z-index: 1; max-width: 36em; margin: 10px 0 0; color: #e6e1d7; font-size: 21px; line-height: 1.6; }
#community-about #aboutcard .about-lead-pace { display: block; margin-top: 12px; }
.about-path { counter-reset: about-step; list-style: none; margin: 44px 0 0; padding: 0 0 0 8px; max-width: 780px; }
#community-about .about-path li { counter-increment: about-step; position: relative; display: block; min-height: 52px; padding: 11px 0 34px 82px; color: #d8d3c9; font-size: 18px; line-height: 1.65; }
#community-about .about-path li::before { content: counter(about-step, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border: 2px solid #fc5b0a; border-radius: 50%; background: #1d1612; color: #ff8c41; font: 900 21px/1 var(--cm-display); letter-spacing: .02em; transform: none; }
#community-about .about-path li::after { content: ''; position: absolute; left: 25px; top: 58px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(#fc5b0a88, #fc5b0a22); }
#community-about .about-path li:last-child { padding-bottom: 0; color: var(--cm-text); }
#community-about .about-path li:last-child::before { border-color: var(--cm-yellow); background: var(--cm-yellow); color: #161618; box-shadow: 0 0 0 6px #ffd40022; }
#community-about .about-path li:last-child::after { display: none; }
#community-about .about-path li strong { color: var(--cm-yellow); }
#community-about .about-path .about-highlight { color: #ff8c41; font-weight: 700; }
.about-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin: 40px 0 0; padding: 30px 0 0 90px; border-top: 1px solid var(--cm-line); max-width: 700px; }
#aboutdiscord { margin-top: 0; }
.about-introduce { border: 0; border-radius: 999px; padding: 14px 30px; cursor: pointer; background: var(--cm-yellow); color: #161618; font: 900 16px/1.2 var(--cm-display); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 3px 0 #b89a00; }
.about-introduce:hover { background: #ffdd33; }
@media (max-width: 640px) {
  .about-hero { grid-template-columns: 1fr; gap: 16px; padding: 28px 22px 26px; border-radius: 20px; }
  #community-about .about-hero img { width: 64px; height: 64px; }
  #community-about #aboutcard h2 { font-size: 42px; }
  #community-about #aboutcard .about-lead { margin-top: 4px; font-size: 18px; }
  .about-path { margin-top: 32px; padding-left: 0; }
  #community-about .about-path li { min-height: 42px; padding: 7px 0 26px 58px; font-size: 16.5px; }
  #community-about .about-path li::before { width: 42px; height: 42px; font-size: 17px; }
  #community-about .about-path li::after { left: 20px; top: 48px; }
  .about-actions { margin-top: 30px; padding: 24px 0 0; }
  .about-actions > button { flex: 1 1 100%; justify-content: center; }
}

/* The toast of the map sits under the open page, so the page has its own. */
#community-toast { position: absolute; left: 50%; bottom: 24px; z-index: 5; max-width: calc(100% - 32px); box-sizing: border-box; margin: 0; padding: 11px 18px; border: 1px solid #494035; border-radius: 10px; background: #14110cf0; color: #f5e9d0; font-size: 15px; box-shadow: 0 12px 36px #0008; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .3s; }
#community-toast.is-visible { opacity: 1; }
#community-toast:empty { display: none; }

/* A cheer for each goal reached, stacked at the bottom right of the page. */
#goal-toasts { position: absolute; right: 24px; bottom: 24px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100% - 48px); pointer-events: none; }
.goal-toast { display: flex; align-items: center; gap: 12px; width: 340px; max-width: 100%; box-sizing: border-box; padding: 12px 16px 12px 12px; border: 1px solid #ffd40066; border-radius: 14px; background: linear-gradient(135deg, #2c2410, #17140e); box-shadow: 0 14px 40px #000a, 0 0 0 4px #ffd40014; animation: goal-toast-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.goal-toast.is-leaving { animation: goal-toast-out .35s ease both; }
.goal-toast-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cm-yellow, #ffd400); color: #1a1712; }
.goal-toast-mark svg { width: 18px; height: 18px; fill: currentColor; }
.goal-toast-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.goal-toast-copy strong { color: var(--cm-yellow); font: 900 15px/1 var(--cm-display); letter-spacing: .05em; text-transform: uppercase; }
.goal-toast-copy span { color: var(--cm-soft); font-size: 13.5px; line-height: 1.35; }
@keyframes goal-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes goal-toast-out { to { opacity: 0; transform: translateX(24px); } }

/* Every goal of the week, done: the celebration, and the ask to share. */
#goal-celebration {
  --cm-text: #f5f2ec; --cm-soft: #d8d3c9; --cm-muted: #a39d93; --cm-orange: #fc5b0a; --cm-yellow: #ffd400;
  --cm-display: 'Oldschool Grotesk Condensed', 'Arial Narrow', Arial, sans-serif;
  width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 0; border: 1px solid #ffd40066; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #4a2c0c 0%, #241a10 45%, #16130f 100%); color: var(--cm-text); color-scheme: dark;
  box-shadow: 0 30px 120px #000c, 0 0 0 6px #ffd40014;
}
#goal-celebration[open] { animation: celebration-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
#goal-celebration::backdrop { background: #070709cc; backdrop-filter: blur(6px); }
.celebration-card { position: relative; padding: 40px 32px 28px; text-align: center; }
.celebration-burst { position: absolute; inset: -40% -20% auto; height: 120%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #ffd40018 0 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(closest-side, #000 20%, transparent); animation: celebration-spin 30s linear infinite; }
.celebration-card > :not(.celebration-burst) { position: relative; }
.celebration-eyebrow { margin: 0 0 10px; color: var(--cm-orange); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
#goal-celebration-title { margin: 0 auto; max-width: 14ch; color: var(--cm-yellow); font: 900 clamp(36px, 8vw, 52px)/.95 var(--cm-display); text-transform: uppercase; text-wrap: balance; }
.celebration-lead { margin: 14px auto 0; max-width: 36ch; color: var(--cm-soft); font-size: 16px; line-height: 1.5; }
.celebration-goals { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; text-align: left; }
.celebration-goals li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #ffd40033; border-radius: 12px; background: #ffd4000d; color: var(--cm-text); font-size: 14.5px; line-height: 1.35; }
.celebration-goals .goal-toast-mark { width: 26px; height: 26px; }
.celebration-goals .goal-toast-mark svg { width: 16px; height: 16px; }
.celebration-crowd { margin: 16px 0 0; color: var(--cm-muted); font-size: 14px; }
.celebration-crowd[hidden] { display: none; }
.celebration-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 24px; }
.celebration-share { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--cm-orange); color: #fff; cursor: pointer; font: 900 20px/1 var(--cm-display); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 0 #a83a02; }
.celebration-share:hover { background: #ff6d1f; }
.celebration-later { padding: 8px 12px; border: 0; background: none; color: var(--cm-muted); cursor: pointer; font: 600 14px/1 -apple-system, "Segoe UI", sans-serif; }
.celebration-later:hover { color: var(--cm-text); }
@keyframes celebration-in { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes celebration-spin { to { transform: rotate(360deg); } }

/* The weekly strip's count of posts since your last visit. */
.weekstrip-label { position: relative; }
.weekstrip-new { position: absolute; left: 9px; top: -7px; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border: 2px solid #1c1c1f; border-radius: 8px; background: #fc5b0a; color: #fff; font: 800 9px/12px -apple-system, "Segoe UI", sans-serif; text-align: center; letter-spacing: 0; }
.weekstrip-new[hidden] { display: none; }

/* Narrow windows: one column. Your standing comes first, then the board, then the rest of the rail,
   whose smaller cards sit side by side while there is room for them. */
@media (max-width: 1099px) {
  .community-columns { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
  .community-rail { display: contents; }
  .rail-you, #rail-conversations, .board, .rail-about { grid-column: 1 / -1; }
  .rail-you { order: 1; }
  #rail-conversations { order: 2; }
  .board { order: 3; margin-top: 14px; }
  #rail-welcome { order: 4; }
  #rail-help { order: 5; }
  #rail-top { order: 6; }
  .rail-about { order: 7; }
  .school-week-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .school-updates { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid #ffffff14; }
}
/* A full-width guest card puts its log in button beside the invitation rather than under it. */
@media (min-width: 721px) and (max-width: 1099px) {
  .rail-you.is-guest { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .rail-you.is-guest > :not(.rail-login) { grid-column: 1; }
  .rail-you.is-guest p { margin-bottom: 0; }
  .rail-you.is-guest .rail-login { grid-column: 2; grid-row: 1 / span 2; width: auto; }
}
@media (max-width: 720px) {
  .school-week-top { flex-direction: column; gap: 16px; }
  .school-clock { align-items: flex-start; }
  .goal { grid-template-columns: auto minmax(0, 1fr); }
  .goal-social { grid-column: 2; }
  .goal.is-tracked { grid-template-columns: minmax(0, 1fr); padding: 0 14px 11px 0; }
  .goal.is-tracked .goal-social { grid-column: 1; padding-left: 53px; }
  .board-search { flex: 1 1 100%; }
  .board-starters { grid-template-columns: minmax(0, 1fr); }
  .board-row-open { grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding: 14px; }
  .board-row-open .board-avatar { width: 36px; height: 36px; }
  .board-row-stats { grid-column: 2; }
  .board-row-title { font-size: 19px; }
}
@media (max-width: 640px) {
  #communitymodal { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
  #community-home-view { padding: 14px 14px 40px; }
  .community-page { padding: 16px 14px 40px; }
  .school-week { padding: 20px 16px 18px; border-radius: 18px; }
  .board-post { padding: 14px; }
  .board-reply-login { flex-direction: column; align-items: stretch; }
  #community-leaderboard .lbheader { flex-direction: column; align-items: flex-start; }
  #community-toast { bottom: 16px; }
  #goal-toasts { right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .celebration-card { padding: 32px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .board-row-open, .goal-check, .goal-go > svg, #goal-meter-fill, .school-week-fold, .school-week-fold > .school-week-body, #week-hero-title, .school-week-toggle svg { transition: none; }
  .board-row.is-fresh .board-row-open { animation: none; }
  .goal-toast, .goal-toast.is-leaving, #goal-celebration[open], .celebration-burst { animation: none; }
}