/* Issues list and issue detail. Tokens and primitives live in style.css. */

/* Filter bar ------------------------------------------------------------- */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.filters .tabs { flex-basis: 100%; margin-bottom: 12px; }
.filters select { width: auto; flex: 0 0 auto; }
.js .filter-submit { display: none; }
.search-field { position: relative; display: flex; flex: 1 1 280px; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.search-field .icon { color: var(--muted); }
.search-field input[type=search] { min-height: 38px; padding: 0; border: 0; background: transparent; }
.search-field input:focus-visible { outline: 0; }
.search-field:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* The burrow: the fox dives into its hole, dirt flies while it digs, and it
   pops back up. One cycle plays while a search loads; it loops while a new
   project waits for its first event; it shows on slow issue loads. */
.burrow { display: block; }
.burrow .fox { overflow: hidden; } /* the ground hides whatever has dug below it */
.burrow .dirt-particles { stroke: var(--muted); stroke-width: 1.2; }
.dig-overlay { display: none; }
.results { position: relative; }
.is-digging .results > :not(.dig-overlay) { opacity: .25; transition: opacity 200ms ease-out; }
/* The dig takes the place of the results, in the page itself rather than a floating card. */
.is-digging .dig-overlay { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 0 20px; border-bottom: 1px solid var(--border); }
.dig-overlay .burrow { width: 132px; }
.dig-overlay .fox, .empty-fox.burrow .fox { display: block; width: 100%; height: auto; }
.dig-caption { color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
.onboarding .empty-fox.burrow { width: 150px; }
.search-summary { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mini-fox { display: inline-block; width: 52px; margin-bottom: -2px; }
.mini-fox .fox { display: block; width: 100%; height: auto; }
.cleared .empty-fox { width: 132px; }
.no-results .empty-fox.burrow { width: 132px; }
@media (prefers-reduced-motion: no-preference) {
  .is-digging .burrow .fox-head, .looping .fox-head { animation: fox-burrow 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .is-digging .burrow .dirt-particles, .looping .dirt-particles { animation: dirt-burst 2.6s ease-out infinite; }
  .is-digging .burrow .dirt-mound, .looping .dirt-mound { animation: mound-shake 2.6s ease-in-out infinite; }
  .is-digging .burrow .fox-ears, .looping .fox-ears { animation: fox-ear-twitch 2.6s ease-in-out infinite; }
  .looping .fox-head, .looping .dirt-particles, .looping .dirt-mound, .looping .fox-ears { animation-delay: 800ms; }
  /* search: a tight dive and scrabble that finishes before the results load */
  .search-dig .burrow .fox-head { animation: fox-search 700ms cubic-bezier(.45, 0, .55, 1) both; }
  .search-dig .burrow .dirt-particles { animation: dirt-search 700ms linear both; }
  .search-dig .burrow .dirt-mound { animation: mound-shake 700ms ease-in-out both; }
  .search-dig .burrow .fox-ears { animation: none; }
  @keyframes fox-search {
    0% { transform: translateY(0); }
    12% { transform: translateY(-6px) rotate(-2deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    38% { transform: translateY(52px) rotate(3deg); }
    48% { transform: translateY(42px) rotate(-5deg); }
    58% { transform: translateY(54px) rotate(5deg); }
    68% { transform: translateY(44px) rotate(-4deg); }
    78% { transform: translateY(56px) rotate(3deg); }
    100% { transform: translateY(86px); }
  }
  @keyframes dirt-search {
    0%, 36% { opacity: 0; transform: translateY(8px); }
    44% { opacity: 1; transform: translateY(-10px); }
    54% { opacity: .2; transform: translateY(-14px); }
    56% { opacity: 0; transform: translateY(8px); }
    64% { opacity: 1; transform: translateY(-12px); }
    74% { opacity: .2; transform: translateY(-15px); }
    76% { opacity: 0; transform: translateY(8px); }
    84% { opacity: 1; transform: translateY(-12px); }
    100% { opacity: 0; transform: translateY(-16px); }
  }
  .celebrate .fox-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: fox-tail-swish 1.6s ease-in-out 300ms 2; }
  .celebrate .fox-ears { animation: fox-ear-twitch-once 700ms ease-in-out 200ms 1; }
  @keyframes fox-tail-swish { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-8deg); } 70% { transform: rotate(4deg); } }
  .pop-up .fox-head { animation: fox-pop-up 900ms cubic-bezier(.16, 1, .3, 1) 200ms both; }
  .pop-up .dirt-particles { animation: dirt-once 900ms ease-out 200ms both; }
  .pop-up .fox-ears { animation: fox-ear-twitch-once 700ms ease-in-out 1.1s 2; }
  /* crouch, dive head first, dig, pop back out */
  @keyframes fox-burrow {
    0% { transform: translateY(0); }
    10% { transform: translateY(-6px) rotate(-2deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    26% { transform: translateY(86px) rotate(3deg); }
    40% { transform: translateY(80px) rotate(-3deg); }
    52% { transform: translateY(86px) rotate(3deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    70% { transform: translateY(-5px); }
    78%, 100% { transform: translateY(0); }
  }
  @keyframes dirt-burst {
    0%, 24% { opacity: 0; transform: translateY(8px); }
    30% { opacity: 1; transform: translateY(-10px); }
    38% { opacity: 0; transform: translateY(-14px); }
    40% { opacity: 0; transform: translateY(8px); }
    46% { opacity: 1; transform: translateY(-12px); }
    56%, 100% { opacity: 0; transform: translateY(-16px); }
  }
  @keyframes mound-shake { 0%, 24%, 60%, 100% { transform: none; } 32%, 48% { transform: scale(1.08, .82); } 40% { transform: scale(.96, 1.08); } }
  @keyframes fox-ear-twitch { 0%, 76%, 92%, 100% { transform: none; } 82% { transform: rotate(-5deg); } 87% { transform: rotate(4deg); } }
  @keyframes fox-ear-twitch-once { 0%, 100% { transform: none; } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
  @keyframes fox-pop-up { from { transform: translateY(86px); } to { transform: none; } }
  @keyframes dirt-once { 0% { opacity: 0; transform: translateY(8px); } 35% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-16px); } }
}

/* Issue list: each row is a selectable item whose title link covers the row. */
.issue-list .tracklist-head, .issue-row { grid-template-columns: 22px 76px minmax(0, 1fr) 140px 76px 84px; }
.track-row:has(.row-link) { position: relative; }
.track-row .row-link { text-decoration: none; }
.track-row .row-link::after { content: ""; position: absolute; inset: 0; }
.track-row .row-link:focus-visible { outline: 0; }
.track-row:has(.row-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.issue-row:has(:checked) { background: var(--surface-2); }
.track-check { position: relative; z-index: 1; display: flex; align-items: center; }
.issue-row .track-check { align-self: start; padding-top: 2px; }
.issue-row .pill { position: relative; margin-left: 6px; }
.issue-row .track-level { align-self: start; padding-top: 3px; }
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 48px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.bulk-count { min-width: 0; }
.js .no-js-only { display: none; }
.issue-list .empty h2 { margin-bottom: 8px; }
.onboarding .copybox { max-width: 560px; margin: 18px auto 16px; text-align: left; }
.onboarding-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Issue header ----------------------------------------------------------- */
.issue-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding-bottom: 20px; }
.issue-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.issue-head h1 { max-width: 60ch; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; }
.issue-culprit { margin: 6px 0 0; color: var(--muted); font: var(--fs-1)/1.5 var(--mono); overflow-wrap: anywhere; }
.issue-facts { margin: 10px 0 0; color: var(--muted); }
.issue-facts strong { color: var(--text); font: 600 var(--fs-2) var(--mono); }
.issue-facts span { margin: 0 4px; }
.issue-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.flash-undo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.flash-undo button.link { font-weight: 600; }

/* Issue body ------------------------------------------------------------- */
.issue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 32px; }
.issue-body, .issue-side { min-width: 0; }
.exc-title { font: 600 var(--fs-4)/1.3 var(--mono); }
.exc-value, .message { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--code-bg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-2); line-height: 1.6; }
.exception-mechanism { margin: 0 0 14px; font-size: var(--fs-1); }
.unhandled { color: var(--red-text); font-weight: 600; }

.frames { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.frame + .frame { border-top: 1px solid var(--border); }
.frame summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; align-items: center; gap: 12px; min-height: 52px; padding: 9px 14px; list-style: none; cursor: pointer; color: var(--muted); }
.frame summary::-webkit-details-marker { display: none; }
.frame summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.frame[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.frame summary:hover { background: var(--surface); }
.frame.in-app summary { color: var(--text); }
.frame[open] > summary { border-bottom: 1px solid var(--border); }
.frame-location { display: block; min-width: 0; }
.frame-function { display: block; font: 500 var(--fs-2)/1.4 var(--mono); overflow-wrap: anywhere; }
.frame-file { display: block; color: var(--muted); font: var(--fs-1)/1.4 var(--mono); overflow-wrap: anywhere; }
.frame-scope { padding: 0 7px; border: 1px solid var(--rule); border-radius: 99px; font-size: var(--fs-1); white-space: nowrap; }
.code-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; background: var(--code-bg); }
.code-scroll:focus-visible { outline-offset: -2px; }
ol.context { width: max-content; min-width: 100%; margin: 0; padding: 10px 0 10px 56px; font: var(--fs-1)/1.8 var(--mono); tab-size: 2; }
ol.context li { padding: 0 18px 0 12px; border-left: 1px solid var(--border); white-space: pre; }
ol.context li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
ol.context li.hit { background: var(--hit); border-left-color: var(--red); }
ol.context li.hit::marker { color: var(--red-text); font-weight: 600; }
ol.context code { font: inherit; }
.nocontext { margin: 0; padding: 12px 14px; font-size: var(--fs-1); }
.frame-vars { padding: 4px 14px 8px; border-top: 1px solid var(--border); }
.frame-vars .kv th { width: 9rem; }
.frame-vars h3 { margin: 8px 0 2px; color: var(--muted); font-size: var(--fs-1); font-weight: 600; }

.event-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); }
.event-identity { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.event-identity code { color: var(--text); }
.event-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.crumbs-table { min-width: 520px; table-layout: fixed; }
.crumbs-table th, .crumbs-table td { padding: 8px 10px 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; font-size: var(--fs-1); }
.crumbs-table th { color: var(--muted); font-weight: 500; }
.crumbs-table th:nth-child(1) { width: 92px; }
.crumbs-table th:nth-child(2) { width: 110px; }
.crumbs-table th:nth-child(4) { width: 70px; }
.crumbs-table tbody tr:last-child td { border-bottom: 0; }
.crumb-message, .crumb-data { display: block; }
.crumb-data { margin-top: 3px; }
.crumb-fatal td:first-child, .crumb-error td:first-child { color: var(--red-text); }
.raw-event summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.raw-event summary::-webkit-details-marker { display: none; }
.raw-event summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.raw-event details[open] summary::before { transform: rotate(45deg); }
.raw-event summary h2 { margin: 0; }
.raw-event .code { margin-top: 14px; max-height: 640px; overflow: auto; }

/* Sidebar ---------------------------------------------------------------- */
.issue-side { padding-left: 24px; border-left: 1px solid var(--border); }
.side-section { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.side-section h2 { font-size: var(--fs-3); margin-bottom: 10px; }
.side-section p { margin: 8px 0 0; font-size: var(--fs-1); }
.side-section .bars { height: 52px; }
.side-section .bar { flex-basis: 4px; }
.recent { list-style: none; margin: 0; padding: 0; font-size: var(--fs-1); }
.recent li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.recent li:last-child { border-bottom: 0; }
/* Long environment · release labels wrap; the time never breaks mid-word. */
.recent li a { flex: 1 1 auto; min-width: 0; font-family: var(--mono); overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .recent li a { display: inline-flex; align-items: center; min-height: 44px; }
  .raw-event summary { min-height: 44px; }
}
.recent li .muted { flex: none; white-space: nowrap; }
.danger-details { border-bottom: 0; }
.danger-details summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--red-text); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.danger-details[open] summary { margin-bottom: 4px; }
.danger-details p { margin-top: 0; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Narrower bars rather than none: the 14-day glance matters most on a laptop. */
  .issue-list .tracklist-head, .issue-row { grid-template-columns: 22px 76px minmax(0, 1fr) 96px 64px 84px; }
  .issue-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
}
@media (max-width: 900px) {
  .issue-list .tracklist-head, .issue-row { grid-template-columns: 22px 76px minmax(0, 1fr) 76px 96px; }
  .issue-list .track-activity { display: none; }
  .issue-layout { grid-template-columns: minmax(0, 1fr); }
  .issue-side { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 700px) {
  /* The prompt gets its own line so the action buttons stay together on the
     next. Once something is ticked the bar sticks to the top, so the actions
     stay in reach while ticking rows further down. */
  .bulk-bar { padding: 8px 10px; }
  .bulk-bar.has-selection { position: sticky; top: 0; z-index: 2; background: var(--bg); }
  .bulk-count { flex: 1 0 100%; }
  .issue-list .tracklist-head { display: none; }
  .issue-row { grid-template-columns: 26px auto auto minmax(0, 1fr); grid-template-areas: "check main main main" ". level events seen"; gap: 6px 12px; padding: 12px 4px; }
  .issue-row .track-check { grid-area: check; }
  .issue-row .track-main { grid-area: main; }
  .issue-row .track-level { grid-area: level; padding: 0; align-self: center; }
  .issue-row .track-events { grid-area: events; text-align: left; color: var(--muted); }
  .issue-row .track-seen { grid-area: seen; }
  .issue-row .track-events .cell-label { position: static; width: auto; height: auto; clip-path: none; font-family: var(--sans); }
  .issue-row .figure { font-size: var(--fs-1); }
  .track-title { font-size: var(--fs-2); }
  .filters select { flex: 1 1 auto; }
  .issue-head { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
  .issue-actions { justify-content: stretch; }
  .issue-actions form { flex: 1 1 0; }
  .issue-actions button { width: 100%; min-height: 44px; }
  .event-controls .button { min-height: 44px; }
  ol.context { padding-left: 44px; }
  .crumbs-table { min-width: 0; }
  .crumbs-table th:nth-child(1) { width: 74px; }
  .crumbs-table th:nth-child(2) { width: 84px; }
  .crumbs-table th:nth-child(4), .crumbs-table td:nth-child(4) { display: none; }
}
@media (forced-colors: active) {
  ol.context li.hit { outline: 1px solid Highlight; }
}