/* The level sample on One task: the level heading buttons and the compact prompt card above
   the table. The result pages do not load studio.css, so the card rules below repeat its compact
   prompt card rules inside .level-sample. As on Inspect prompts, "Prompt details & sources" sits
   at the top right of the answer and opens as a popover, so it takes no space while closed. */

.level-sample-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.level-sample-button:hover,
.level-sample-button[aria-pressed="true"] { color: var(--blue); }
.level-sample-button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 2px; }
.level-sample-button:focus-visible { outline: 3px solid #8db0ff; outline-offset: 2px; }

.level-sample { margin: 0 0 12px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.level-sample-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.level-sample-heading h2 { margin: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.level-sample-heading a { color: var(--blue); font-size: 12px; font-weight: 650; }
.level-sample-close { margin-left: auto; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: white; color: var(--ink-soft); font: inherit; font-size: 11px; cursor: pointer; }
.level-sample-close:hover { border-color: var(--blue); color: var(--blue); }
.level-sample-close:focus-visible { outline: 3px solid #8db0ff; outline-offset: 2px; }
.level-sample > .table-note,
.level-sample > .state-card { margin: 8px 0 0; }

.level-sample .explorer-prompts { display: grid; gap: 8px; margin-top: 8px; }
.level-sample pre { margin: 0; color: #203b52; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.level-sample pre:focus-visible,
.level-sample summary:focus-visible { outline: 3px solid #8db0ff; outline-offset: 3px; }
.level-sample .explorer-prompt-card { border: 1px solid var(--line); border-radius: 8px; background: white; }
.level-sample .compact-prompt-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); overflow: visible; }
.level-sample .compact-prompt-index { margin: 0; padding: 6px 3px; border-right: 1px solid var(--line); border-radius: 8px 0 0 8px; background: #f4f7fa; color: var(--muted); text-align: center; font: 11px/1.5 ui-monospace, SFMono-Regular, monospace; }
.level-sample .compact-prompt-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.level-sample .explorer-message { min-height: 0; padding: 6px 12px; }
.level-sample .role-label { display: block; margin-bottom: 5px; color: #456783; font: 700 10px ui-monospace, SFMono-Regular, monospace; letter-spacing: 1px; }
.level-sample .empty-message { margin: 0; color: #718192; font-size: 12px; font-style: italic; }
.level-sample .answer-message { display: flow-root; min-width: 0; border-left: 1px solid #cfe3d8; border-radius: 0 8px 8px 0; background: #f4fbf7; }
.level-sample .message-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; margin-bottom: 2px; }
.level-sample .answer-message .role-label { margin: 0; color: #266248; white-space: nowrap; }
.level-sample .answer-type { color: #557365; font: 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.7px; }
.level-sample .compact-answer-meta { float: right; min-width: 0; max-width: 50%; margin: 0 0 2px 10px; text-align: right; }
.level-sample .compact-difficulty { display: block; max-width: 100%; margin-top: 1px; color: var(--muted); font: 9px/1.2 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; }
.level-sample .compact-prompt-details { position: relative; }
.level-sample .compact-prompt-details summary { color: #486784; font-size: 10px; font-weight: 650; cursor: pointer; }
.level-sample .compact-detail-content { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; width: min(36rem, calc(100vw - 76px)); max-height: 70vh; overflow: auto; padding: 0 12px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfd; box-shadow: 0 5px 18px #253e5726; text-align: left; }
.level-sample .compact-prompt-meta { margin: 0; padding: 9px 0; color: var(--muted); font: 10px/1.5 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; }
.level-sample .compact-detail-content .system-message { padding: 9px 0; border-top: 1px solid var(--line); }
.level-sample .prompt-sources { padding: 9px 0 0; color: var(--muted); font-size: 10px; }
.level-sample .prompt-source-label { font-weight: 700; letter-spacing: 0.7px; }
.level-sample .prompt-source-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 7px 0 0; padding-left: 18px; }
.level-sample .prompt-source-list a { color: var(--blue); overflow-wrap: anywhere; }
.level-sample .text-credits { grid-column: 1 / -1; margin: 0; padding: 2px 12px 6px; list-style: none; color: var(--muted); font-size: 10px; line-height: 1.5; }
.level-sample .text-credits a { color: var(--blue); overflow-wrap: anywhere; }
.level-sample .boolean-answer-true { border-color: #b8ddc5; background: #ecf8f0; }
.level-sample .boolean-answer-false { border-color: #ecc2bd; background: #fff1ef; }
.level-sample .boolean-answer-true .role-label,
.level-sample .boolean-answer-true .answer-type,
.level-sample .boolean-answer-true > pre { color: #176b3d; }
.level-sample .boolean-answer-false .role-label,
.level-sample .boolean-answer-false .answer-type,
.level-sample .boolean-answer-false > pre { color: #a12d26; }

@media (max-width: 900px) {
  .level-sample .compact-prompt-body { grid-template-columns: 1fr; }
  .level-sample .answer-message { border-top: 1px solid #cfe3d8; border-left: 0; border-radius: 0 0 8px 0; }
}