/* Shared leaderboard session. Keep both entry points on this component. */
/* Event anchors add no rows or dividers to the shared session layout. */
.cc-event { position: relative; scroll-margin-block: 75px; }
.cc-step { float: right; margin-left: 8px; color: #9A928A; font-size: 9px; text-decoration: none; }
.cc-step:hover { color: #EFECE9; }
.cc-code, .cc-actor { color: #8F8880; font-size: 9px; }
.cc-actor { display: block; text-transform: uppercase; letter-spacing: .07em; }
.cc-diff { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.ccwin.compact .cc-think-event { display: none; }
.cc-event:focus, .ccwin :is(a, button, [data-ccout], pre):focus-visible { outline: 1px solid #FF6B2B; outline-offset: 2px; }
.ccwin.cx .cc-event:focus, .ccwin.cx :is(a, button, [data-ccout], pre):focus-visible { outline-color: #8A8FF0; }
.ccwin.cu .cc-event:focus, .ccwin.cu :is(a, button, [data-ccout], pre):focus-visible { outline-color: #C4C4C4; }
.fold { border: 1px solid var(--bg-2); margin-top: 14px; background: #fff; }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; font-size: 12.5px; font-weight: 650; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); font-weight: 400; }
.fold > summary .tw { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); transition: transform 140ms ease; }
.fold[open] > summary .tw { transform: rotate(90deg); }
.fold-in { padding: 4px 14px 14px; border-top: 1px solid var(--bg-2); }

.cc-ask .who .sim { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: #8F8880; }
.ccwin.compact .cc-ask, .ccwin.compact .oguid { display: block; }

/* ----- the trace: a terminal agent window ----- */
.ccwin { margin-top: 2px; background: #141110; border: 1px solid #090808; border-radius: 9px; overflow: hidden; box-shadow: 0 12px 30px rgba(9, 8, 8, 0.22); }
.cc-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #221E1B; border-bottom: 1px solid #090808; }
.cc-dots { display: flex; gap: 6px; }
.cc-dots i { width: 11px; height: 11px; border-radius: 50%; }
.cc-dots i:nth-child(1) { background: #FF5F57; }
.cc-dots i:nth-child(2) { background: #FEBC2E; }
.cc-dots i:nth-child(3) { background: #28C840; }
.cc-title { margin: 0 auto; font-family: var(--font-mono); font-size: 10px; color: #9A928A; display: inline-flex; align-items: center; gap: 7px; }
.cc-title img { width: 13px; height: 13px; object-fit: contain; }
.cc-body { position: relative; padding: 14px 16px 16px; font-family: var(--font-mono); font-size: 11px; line-height: 1.8; color: #D9D4CF; overflow-x: hidden; }
.cc-body.preview { max-height: 400px; overflow: hidden; padding-bottom: 44px; }
.cc-body.preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(20, 17, 16, 0), #141110 78%); pointer-events: none; }
.cc-more { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 2; appearance: none; cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid #FF6B2B; background: #141110; color: #FF6B2B; padding: 7px 14px; }
.cc-more:hover { background: #FF6B2B; color: #141110; }
.cc-splash { display: flex; align-items: flex-start; gap: 13px; margin: 2px 0 16px; }
.clogo { width: 54px; height: 34px; flex: none; margin-top: 2px; }
.clogo.cx { width: 40px; height: 40px; margin-top: 0; }
.clogo.cu { width: 40px; height: 40px; margin-top: 0; }
.clogo.grok { filter: invert(1); }
.cinfo { min-width: 0; line-height: 1.55; }
.cinfo b { display: block; color: #EFECE9; font-weight: 700; font-size: 12.5px; }
.cinfo span { display: block; color: #8F8880; font-size: 10.5px; }
.cc-user { display: flex; gap: 9px; color: #EFECE9; margin-bottom: 10px; }
.cc-user .pr { color: #FF6B2B; flex: none; }
.cc-user .ut { white-space: pre-wrap; word-break: break-word; }
.cc-tool { display: flex; gap: 9px; align-items: baseline; }
.cc-tool .bl { flex: none; color: #A6A6A6; }
.cc-tool.search .bl { color: #FF6B2B; }
.cc-tool .tt { min-width: 0; word-break: break-word; }
.cc-tool .tt b { color: #EFECE9; font-weight: 600; }
.cc-tool .tt span { color: #9A928A; }
.cc-tool.search .tt span { color: #FFB08A; }
.cc-tool .ms { flex: none; margin-left: auto; color: #8F8880; font-size: 9.5px; }
.cc-think { color: #8F8880; font-style: italic; margin: 8px 0; word-break: break-word; }
.cc-think .st { color: #8F8880; font-style: normal; }
.cc-msg { color: #D9D4CF; white-space: pre-wrap; word-break: break-word; margin: 10px 0; }

.cc-skill { color: #C9C2BB; margin: 8px 0; font-size: 12.5px; }
.cc-skill .sk { color: #E0A03A; margin-right: 6px; }
/* The thread renders inside .cc-body, so it inherits the session's mono type at
   11px and 1.8. Nothing here sets a font size: sizes of its own were what made
   the drawer read as a different document from the rest of the session. Labels
   use the 9px uppercase of .cc-final .fl, and the accent is the drawer's
   #FF6B2B, not the site brick. */
.orchw { margin: 0 0 12px; border: 1px solid #2C2825; border-radius: 3px; overflow: hidden; }
.orchw .oh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 11px; background: #1B1817; color: #9A928A; }
.orchw .oh b { color: #EFECE9; font-weight: 600; }
.orchw .ob { padding: 4px 11px 8px; }
.oturn { margin: 10px 0; white-space: pre-wrap; word-break: break-word; }
.oturn .who { display: block; font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 6px; }
.oturn.who-user .who, .oturn.who-gemini .who { color: #FF6B2B; }
.ccwin.cx .oturn.who-user .who, .ccwin.cx .oturn.who-gemini .who { color: #8A8FF0; }
.ccwin.cu .oturn.who-user .who, .ccwin.cu .oturn.who-gemini .who { color: #C4C4C4; }
.oturn.who-agent .who { color: #8F8880; }
.oturn.who-user, .oturn.who-gemini { padding: 8px 10px; border-left: 2px solid #FF6B2B; background: #1B1817; color: #EFECE9; }
.ccwin.cx .oturn.who-user, .ccwin.cx .oturn.who-gemini { border-left-color: #8A8FF0; }
.ccwin.cu .oturn.who-user, .ccwin.cu .oturn.who-gemini { border-left-color: #C4C4C4; }
.oturn.who-agent { color: #D9D4CF; padding-left: 0; }
.oguid { margin: 12px 0 2px; color: #8F8880; }
.oguid summary { cursor: pointer; color: #FF6B2B; }
.ccwin.cx .oguid summary { color: #8A8FF0; }
.ccwin.cu .oguid summary { color: #C4C4C4; }
.orchw.thread { border: 0; margin: 0; }
.orchw.thread .ob { padding: 0; }
.around { margin: 10px 0 12px; padding: 9px 0 1px; border-top: 1px solid #2C2825; }
.around .alab { display: block; font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: #8F8880; margin-bottom: 8px; }
.oguid ul { margin: 8px 0 0 16px; }
.cc-final { border-top: 1px solid #2C2825; margin-top: 12px; padding-top: 12px; color: #EFECE9; white-space: pre-wrap; word-break: break-word; }
.cc-final .fl { display: block; color: #FF6B2B; font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 6px; }
.cc-end { color: #8F8880; margin-top: 10px; }
/* Two ways to read a session. Thinking is the default and is the whole trace.
   Compact drops the reasoning and the tool output so the shape of the run,
   what it ran and what it said, fits on a screen. */
.ccview { display: flex; align-items: center; gap: 0; padding: 10px 16px 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; }
.ccview .vl { color: #8F8880; margin-right: 9px; }
.ccview button { appearance: none; cursor: pointer; font: inherit; border: 1px solid #3A3530; background: #1B1817; color: #9A928A; padding: 5px 12px; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; }
.ccview button + button { margin-left: -1px; }
.ccview button:hover { color: #EFECE9; background: #262220; }
.ccview button.on { position: relative; z-index: 1; border-color: #FF6B2B; color: #FF6B2B; }
.ccwin.cx .ccview button.on { border-color: #8A8FF0; color: #8A8FF0; }
.ccwin.cu .ccview button.on { border-color: #C4C4C4; color: #C4C4C4; }
.ccwin.compact .cc-think, .ccwin.compact .cc-out, .ccwin.compact .cc-res { display: none; }
.ccwin.compact .cc-tool { margin: 1px 0; }
.ccwin.compact .around { padding-top: 7px; }
.ccwin.compact .oturn { margin: 8px 0; }
.cc-load { color: #8F8880; padding: 6px 0; }
.cc-out { position: relative; margin: 2px 0 10px 18px; padding: 6px 10px 6px 22px; border-left: 1px solid #2C2825; background: #1B1817; color: #A39B93; font-size: 10.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.cc-out .lz { position: absolute; left: 6px; top: 5px; color: #5F5952; }
.cc-out.clip { max-height: 116px; overflow: hidden; cursor: pointer; }
.cc-out.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: linear-gradient(rgba(27, 24, 23, 0), #1B1817 88%); }
.cc-out.clip .cc-expand { position: absolute; right: 8px; bottom: 3px; z-index: 1; color: #FF6B2B; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; }
.cc-out.clip.open { max-height: none; }
.cc-out.clip.open::after { display: none; }
.cc-out.clip.open .cc-expand { display: none; }
.cc-res { margin: 2px 0 10px 18px; padding: 6px 10px 6px 22px; border-left: 1px solid #2C2825; background: #1B1817; display: flex; flex-direction: column; gap: 2px; }
.cc-res a { color: #C9A28E; font-size: 10.5px; text-decoration: none; word-break: break-all; }
.cc-res a:hover { color: #FF6B2B; }
.cc-err { color: #FF8A6B; }
.steplink { color: var(--brick); cursor: pointer; }
.steplink:hover { text-decoration: underline; }
.cc-tool.flash { animation: ccFlash 0.9s ease 2; }
@keyframes ccFlash { 0%, 100% { background: none; } 50% { background: rgba(255, 107, 43, 0.18); } }
.ccwin.cx .cc-user .pr, .ccwin.cx .cc-tool.search .bl, .ccwin.cx .cc-final .fl, .ccwin.cx .cc-md .md-b { color: #8A8FF0; }
.ccwin.cx .cc-tool.search .tt span { color: #B9BCF6; }
.ccwin.cx .cc-out.clip .cc-expand { color: #8A8FF0; }
.ccwin.cx .cc-more { border-color: #8A8FF0; color: #8A8FF0; }
.ccwin.cx .cc-more:hover { background: #8A8FF0; color: #141110; }
.ccwin.cx .cc-res a { color: #A9ACF0; }
.ccwin.cx .cc-res a:hover { color: #8A8FF0; }
.ccwin.cx .cc-md a { color: #A9ACF0; }
.ccwin.cx .cc-md a:hover { color: #8A8FF0; }
.ccwin.cu .cc-user .pr, .ccwin.cu .cc-tool.search .bl, .ccwin.cu .cc-final .fl, .ccwin.cu .cc-md .md-b { color: #C4C4C4; }
.ccwin.cu .cc-tool.search .tt span { color: #D8D8D8; }
.ccwin.cu .cc-out.clip .cc-expand { color: #C4C4C4; }
.ccwin.cu .cc-more { border-color: #C4C4C4; color: #C4C4C4; }
.ccwin.cu .cc-more:hover { background: #C4C4C4; color: #141110; }
.ccwin.cu .cc-res a, .ccwin.cu .cc-md a { color: #D0D0D0; }
.ccwin.cu .cc-res a:hover, .ccwin.cu .cc-md a:hover { color: #F0F0F0; }
.cc-md code { background: #262220; color: #EFECE9; padding: 0 4px; border-radius: 3px; }
.cc-md .md-pre { display: block; background: #1B1817; border-left: 2px solid #2C2825; padding: 8px 10px; margin: 6px 0; color: #C9C2BB; }
.cc-md .md-tblwrap { display: block; overflow-x: auto; margin: 8px 0; }
.cc-md .md-tbl { border-collapse: collapse; font-size: 10.5px; line-height: 1.5; }
.cc-md .md-tbl th, .cc-md .md-tbl td { border: 1px solid #2C2825; padding: 3px 9px; text-align: left; color: #C9C2BB; white-space: normal; }
.cc-md .md-tbl th { color: #EFECE9; background: #1B1817; font-weight: 600; }
.cc-md .md-h { display: block; color: #EFECE9; font-weight: 700; margin-top: 8px; }
.cc-md .md-b { color: #FF6B2B; }
.cc-md a { color: #C9A28E; }
.cc-md a:hover { color: #FF6B2B; }
.cc-md b { color: #EFECE9; }