/* Challenges: the list, the bar during a challenge, the result on the end screen. Same dark glass as the
   feedback form. */
#challenges-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 24px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #0f141d; color: #cbd5e1; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9);
  overflow: auto; font-family: inherit; box-sizing: border-box; }
#challenges-dialog::backdrop { background: rgba(4, 6, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ch-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; margin-bottom: 18px; }
.ch-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, .3); color: #fcd34d; }
.ch-top h2 { margin: 0 0 4px; color: #fff; font: 400 1.35rem/1.25 Georgia, "Times New Roman", serif; }
.ch-top p { margin: 0; color: #94a3b8; font-size: .92rem; line-height: 1.5; }
.ch-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #111722, #0c1119); }
.ch-card h3 { margin: 0 0 4px; color: #f1f5f9; font-size: 1rem; font-weight: 600; }
.ch-card p { margin: 0; color: #94a3b8; font-size: .88rem; line-height: 1.5; }
.ch-card .ch-status { margin-top: 8px; color: #64748b; font-size: .8rem; }
.ch-card.passed .ch-status { color: #86efac; }
.ch-card.locked { opacity: .55; }
/* Filled pill: the action a block exists for. Light-to-deep cyan fill, dark text, a lit top edge and a soft
   glow; the arrow sits in its own disc and steps forward on hover. */
.ch-go, .cr-again, #challenge-ask .ca-go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box;
  padding: 0 7px 0 20px; border-radius: 999px; border: 1px solid rgba(186, 230, 253, .6);
  background: linear-gradient(180deg, #8fdcfd 0%, #38bdf8 52%, #0ea5e9 100%);
  color: #04121d; font: inherit; font-weight: 650; font-size: .88rem; line-height: 1; letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(3, 105, 161, .35), 0 10px 26px -12px rgba(56, 189, 248, .85);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.ch-go::after, .cr-again::after, #challenge-ask .ca-go::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(4, 18, 29, .13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .22s ease, background-color .22s ease;
}
.ch-go:hover, .cr-again:hover, #challenge-ask .ca-go:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(3, 105, 161, .35), 0 16px 34px -12px rgba(56, 189, 248, .95); }
.ch-go:hover::after, .cr-again:hover::after, #challenge-ask .ca-go:hover::after { transform: translateX(2px); background-color: rgba(4, 18, 29, .2); }
.ch-go:active, .cr-again:active, #challenge-ask .ca-go:active { transform: translateY(0); filter: brightness(.96); }
.ch-go:focus-visible, .cr-again:focus-visible, #challenge-ask .ca-go:focus-visible { outline: 2px solid #bae6fd; outline-offset: 3px; }


/* The challenge line: the middle of the row under the session numbers, only while a challenge is on. */
body.challenge-on #ribbon-current-label { display: none; }
#challenge-status { display: inline-flex; align-items: center; justify-content: center; gap: 6px; justify-self: center; pointer-events: auto;
  color: #cbd5e1; font-size: 11px; letter-spacing: .03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
#challenge-status[hidden] { display: none; }
#challenge-status .cb-icon { display: grid; color: #fcd34d; }
#challenge-status strong { color: #fde68a; font-weight: 600; }
#challenge-status .cb-state::before { content: "\00b7"; margin-right: 6px; color: #64748b; }
#challenge-status .cb-cancel { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: transparent;
  color: #94a3b8; font-size: 11px; line-height: 1; cursor: pointer; }
#challenge-status .cb-cancel[hidden] { display: none; }

#challenge-result { display: grid; gap: 6px; justify-items: start; margin: 0 0 22px; padding: 16px 18px; border-radius: 14px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .1); background: #0c1119; }
#challenge-result.passed { border-color: rgba(134, 239, 172, .35); }
#challenge-result p { margin: 0; }
#challenge-result .cr-k { color: #94a3b8; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
#challenge-result.passed .cr-k { color: #86efac; }
#challenge-result .cr-line { color: #f1f5f9; font-size: 1.05rem; line-height: 1.4; }
#challenge-result .cr-points { color: #94a3b8; font-size: .9rem; }
#challenge-result .cr-points strong { color: #fcd34d; font-weight: 600; }
#challenge-result .cr-opened { color: #86efac; font-size: .9rem; }
#challenge-result .cr-again { margin-top: 8px; }
@media (max-width: 520px) {
  #challenges-dialog { padding: 20px 16px; }
  .ch-card { grid-template-columns: 1fr; }
  .ch-go { justify-self: start; }
}
body.zen-mode .zen-drawer-toggle-row > #btn-open-challenges {
  flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
body.zen-mode .zen-drawer-toggle-row > #btn-open-challenges .ui-icon { display: block; width: 20px; height: 20px; }
#climax-modal #challenge-result { margin-top: 30px; }
.ch-icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(56, 189, 248, .16); align-self: start; }
@media (max-width: 520px) { .ch-card { grid-template-columns: auto 1fr; } .ch-go { grid-column: 2; } }

/* Nudges: a strip on the start screen, and a card on the summary after a session that met a goal. */
#challenge-ask { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(720px, calc(100% - 24px)); box-sizing: border-box; padding: 10px 10px 10px 16px; border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, .28); background: rgba(15, 20, 29, .94); color: #cbd5e1; font-size: .86rem;
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ca-in .5s ease both; }
#challenge-ask[hidden] { display: none; }
#challenge-ask .cb-icon { display: grid; color: #fcd34d; }
#challenge-ask .ca-text { display: grid; gap: 2px; line-height: 1.4; }
#challenge-ask .ca-text strong { color: #f8fafc; font-weight: 600; }
#challenge-ask .ca-text span { color: #94a3b8; }
#challenge-ask .ca-go { flex: none; min-height: 40px; padding-left: 16px; font-size: .84rem; }
#challenge-ask .ca-go::after { width: 26px; height: 26px; }
#challenge-ask .cb-cancel { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: #94a3b8; cursor: pointer; }
@keyframes ca-in { from { opacity: 0; transform: translate(-50%, -8px); } }
#challenge-nudge { display: grid; gap: 6px; justify-items: start; margin: 0 0 22px; padding: 16px 18px; border-radius: 14px; text-align: left;
  border: 1px solid rgba(251, 191, 36, .25); background: #0c1119; }
#climax-modal #challenge-nudge { margin-top: 30px; }
#challenge-nudge p { margin: 0; }
#challenge-nudge .cr-k { color: #fcd34d; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
#challenge-nudge .cr-line { color: #f1f5f9; font-size: 1rem; line-height: 1.45; }
.cn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.cn-later { padding: 0; border: 0; background: none; color: #94a3b8; font: inherit; font-size: .88rem; cursor: pointer; }
@media (max-width: 520px) {
  #challenge-ask { top: 70px; flex-wrap: wrap; font-size: .82rem; }
  #challenge-ask .ca-text { flex: 1 1 70%; }
}
@media (prefers-reduced-motion: reduce) { #challenge-ask { animation: none; } }

/* Joining the challenge board (board-share.js): the dialog reuses the feedback form's fields. */
#board-join { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #0f141d; color: #cbd5e1; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); overflow: auto; font-family: inherit; }
#board-join::backdrop { background: rgba(4, 6, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#board-join .bs-seg { grid-template-columns: repeat(4, 1fr); }
#board-join select { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .12); background: #0a0e15; color: #f1f5f9; font: inherit; font-size: .95rem; }
#board-join .fb-mark { color: #fcd34d; border-color: rgba(251, 191, 36, .3); }
@media (max-width: 480px) { #board-join .bs-seg { grid-template-columns: repeat(2, 1fr); } }
.bs-ask { display: grid; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.bs-ask p { margin: 0; color: #94a3b8; font-size: .9rem; line-height: 1.5; }
.bs-ask strong { color: #f1f5f9; }
.bs-sent { margin: 8px 0 0 !important; color: #86efac; font-size: .82rem; }
.bs-line { margin: 16px 2px 0; color: #94a3b8; font-size: .85rem; line-height: 1.5; }
.bs-line[hidden] { display: none; }
.bs-line .cn-later { color: #7dd3fc; }
#board-join [hidden] { display: none !important; }
.ch-go.ch-cancel { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); color: #e2e8f0; border-color: rgba(148, 163, 184, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.ch-go.ch-cancel::after { display: none; }
.ch-go.ch-cancel { padding-right: 20px; }

/* The board place on a challenge result: a big ordinal, one line of context, a link to the board. */
#challenge-result .cr-rank { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; margin: 10px 0 4px;
  padding: 12px 14px; border-radius: 12px; background: rgba(251, 191, 36, .06); border: 1px solid rgba(251, 191, 36, .2); width: 100%; box-sizing: border-box; }
#challenge-result .cr-place { grid-row: span 3; color: #fcd34d; font: 600 1.9rem/1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#challenge-result .cr-rank-text { color: #e2e8f0; font-size: .92rem; line-height: 1.45; }
#challenge-result .cr-rank a { color: #7dd3fc; font-size: .82rem; text-decoration: none; justify-self: start; }
#challenge-result .cr-rank a:hover { text-decoration: underline; }
#challenge-result .cr-compare { color: #fde68a; font-size: .88rem; line-height: 1.45; }
.bs-sent.later { color: #94a3b8; }

/* The two tiers in the challenge list, and the break line on a result. */
.ch-tier { list-style: none; margin: 12px 2px 2px; }
.ch-tier:first-child { margin-top: 0; }
.ch-tier h3 { margin: 0 0 4px; color: #f8fafc; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.ch-tier p { margin: 0; color: #94a3b8; font-size: .84rem; line-height: 1.5; }
#challenge-result .cr-breaks { color: #fbbf24; font-size: .88rem; }