/* Sentry's pages (#3481, design epic #3432): #/integrations/sentry (setup
 * steps or the connected page) and #/integrations/sentry/settings. Designed by
 * us, not in Figma: Figma has no Sentry frame. Built from the design system:
 * the Integrations header (#3476), cards with a mono "// label" (#3479's
 * section label), Settings' sections and setting rows (#3482: .set-section,
 * .set-panel), ds forms (.field, .choice, .select), ds buttons and badges.
 * sentry*.ts draws them. Tokens only; light and dark come from tokens.css. */

/* ---- Page and header (as Integrations, #3476) ---- */
.sentry-detail { display: grid; gap: var(--space-6); min-width: 0; }
.sentry-detail > .back { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin: 0 0 calc(-1 * var(--space-3)); font: 500 13px/20px var(--font-sans); color: var(--fg-muted); text-decoration: none; }
.sentry-detail > .back:hover { color: var(--fg-strong); }
.sentry-detail > .page-header { align-items: center; margin: 0; }
.sentry-detail > .page-header h1 { font: 600 22px/normal var(--font-sans); letter-spacing: normal; color: var(--fg-strong); }
.sentry-detail > .page-header .subtitle { margin-top: 7px; font: var(--type-body); color: var(--fg-muted); }
.sentry-page { display: grid; gap: var(--space-5); min-width: 0; }
.sentry-page p { margin: 0; }
.sentry-page .form-status { margin: 0; font: var(--type-body-sm); }
.sentry-page .form-status.danger { color: var(--danger-fg); }
.sentry-page .form-status.success { color: var(--success-fg); }
.sentry-page .form-status.neutral { color: var(--fg-muted); }
.sentry-page .form-status:empty { display: none; }

/* ---- Card with its mono section label ---- */
.sentry-card {
  display: grid; gap: var(--space-3); min-width: 0; box-sizing: border-box; padding: var(--space-5) var(--space-6);
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
}
.sentry-eyebrow { margin: 0; font: var(--type-code-eyebrow); letter-spacing: var(--type-code-eyebrow-tracking); color: var(--fg-muted); }
.sentry-card-title, .sentry-card h2 { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--fg-strong); }
.sentry-card-text { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.sentry-card .muted { font-size: 13px; line-height: 20px; }

/* The connection overview: what happens to errors, then the status strip. */
.sentry-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.sentry-settings-view > .sentry-strip { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-card); border-radius: var(--radius-lg); background: var(--surface); }
.sentry-strip-meta { font: var(--type-body-sm); color: var(--fg-muted); }
.sentry-settings-btn { margin-left: auto; }
.sentry-settings-btn svg { width: 14px; height: 14px; }

/* Sentry auto-fix lives on Settings: a quiet note with its link. */
.sentry-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); font: 400 13px/20px var(--font-sans); color: var(--fg); }
.sentry-note svg { flex: none; margin-top: 2px; color: var(--fg-muted); }

/* ---- Needs your attention: the card with a warning edge ---- */
.sentry-attention { border-left: 3px solid var(--warning-fg); }
.sentry-attention > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font: 400 13px/20px var(--font-sans); }
.sentry-attention > ul > li { display: grid; gap: var(--space-1); }
.sentry-attention-fix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sentry-attention select { max-width: 100%; min-width: 0; }

/* ---- Projects and Recent errors: a head (label, title, action) and a list ---- */
.sentry-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.sentry-section-head > div:first-child { display: grid; gap: var(--space-1); }
.sentry-section-head .search { min-width: min(260px, 100%); }
.sentry-section-head .search input { width: 100%; }
.sentry-plist, .sentry-issues { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.sentry-plist-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); font: 400 13px/20px var(--font-sans); color: var(--fg); }
.sentry-plist-row + .sentry-plist-row, .sentry-issue + .sentry-issue { border-top: 1px solid var(--border); }
.sentry-plist-repo .mono { font: 400 12px var(--font-mono); color: var(--fg-strong); }
.sentry-plist-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.sentry-plist-link select { min-width: 0; max-width: 100%; }
.sentry-plist-row .sentry-map-warning { flex-basis: 100%; }
.sentry-map-warning { display: grid; gap: var(--space-1); justify-items: start; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--danger-fg); border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger-fg); font: var(--type-body-sm); }
.sentry-unlinked { margin: var(--space-2) 0 0; font: var(--type-body-sm); }
.sentry-import { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font: var(--type-body-sm); color: var(--fg-muted); }

/* Recent errors (#3906): the search and filters, one line per error, the details when opened, the pager. */
.sentry-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sentry-list-tools .search { flex: 1 1 240px; min-width: 0; }
.sentry-list-tools .search input { width: 100%; }
.sentry-list-tools select { flex: 0 1 200px; min-width: 0; max-width: 100%; }
.sentry-issue { min-width: 0; }
.sentry-issue-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; }
.sentry-issue-line::-webkit-details-marker { display: none; }
.sentry-issue-line::after { content: ""; width: 7px; height: 7px; margin: 0 2px 3px 0; border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted); transform: rotate(45deg); }
.sentry-issue[open] > .sentry-issue-line::after { margin: 3px 2px 0 0; transform: rotate(-135deg); }
.sentry-issue-line:hover { background: var(--surface-sunken); }
.sentry-issue-line .sentry-issue-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sentry-issue[open] > .sentry-issue-line .sentry-issue-title { white-space: normal; } /* opened: the whole title */
.sentry-issue-line .sentry-issue-meta { margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.sentry-issue-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: var(--space-4); padding: var(--space-1) var(--space-4) var(--space-4); }
.sentry-issue-body .sentry-issue-meta { margin: 0; align-items: center; }
.sentry-issue-title { font: 600 13px/20px var(--font-sans); color: var(--fg-strong); overflow-wrap: anywhere; }
.sentry-issue-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font: var(--type-meta); color: var(--fg-muted); }
.sentry-issue-meta a:not(.badge) { color: var(--primary-text); }
.sentry-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font: var(--type-body-sm); }
.sentry-pager-buttons { display: flex; gap: var(--space-2); }
.sentry-says { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--primary); border-radius: var(--radius-sm); background: var(--surface-sunken); font: var(--type-body-sm); }
.sentry-says > strong { display: block; margin-bottom: var(--space-1); font: var(--type-code-eyebrow); letter-spacing: var(--type-code-eyebrow-tracking); text-transform: uppercase; color: var(--fg-muted); }
.sentry-analysis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); font: var(--type-meta); }
.sentry-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.sentry-state .sub { font: var(--type-meta); color: var(--fg-muted); overflow-wrap: anywhere; }
.sentry-state .sub a { color: var(--primary-text); }
.sentry-state a.sub, .sentry-state .sub a { display: inline-flex; align-items: center; min-height: 24px; } /* axe target-size: stacked links */
.sentry-state .badge { gap: 6px; }
.sentry-run { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.sentry-run select { max-width: 100%; min-width: 0; }
.sentry-run-note { font: var(--type-meta); color: var(--fg-muted); }
.sentry-run-note.danger { color: var(--danger-fg); }

/* ---- Price and roadmap ---- */
.sentry-roadmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sentry-roadmap-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sentry-roadmap-text { display: grid; gap: 2px; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.sentry-roadmap-text strong { font-weight: 600; color: var(--fg-strong); }
.sentry-roadmap-list .badge { flex: none; }

/* ---- Setup: the stepper on the left, the step's card, Back / Continue ---- */
.sentry-flow { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-4) var(--space-7); align-items: start; }
.sentry-flow > .sentry-flow-progress { margin: 0; }
.sentry-flow-main { display: grid; gap: var(--space-4); min-width: 0; }
.sentry-flow-progress > p { margin: 0 0 var(--space-3); font: var(--type-code-eyebrow); letter-spacing: var(--type-code-eyebrow-tracking); text-transform: uppercase; color: var(--fg-muted); }
.sentry-flow-progress ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sentry-flow-progress li { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.sentry-flow-progress li + li::before { content: ""; position: absolute; left: 11.5px; top: -8px; height: 16px; border-left: 1px solid var(--border-strong); }
.sentry-flow-progress li[aria-current="step"] { font-weight: 600; color: var(--fg-strong); }
.sentry-flow-progress li[aria-current="step"] .step-badge { background: var(--action); border-color: var(--action); color: var(--action-fg); }
.sentry-flow-progress li.is-done .step-badge { background: var(--success-bg); border-color: var(--success-fg); color: var(--success-fg); }
.sentry-flow-step > h2 { font: 600 16px/24px var(--font-sans); }
.sentry-flow-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: 0; }
.sentry-flow-actions .save-status { margin: 0 auto 0 0; font: var(--type-body-sm); color: var(--fg-muted); }
.sentry-flow-actions .save-status:empty { display: none; }
.sentry-page > .sentry-price { margin-top: var(--space-1); }

/* ---- Settings: sections and rows as on Settings (#3482) ---- */
.sentry-settings-view { display: grid; gap: var(--space-7); min-width: 0; }
.sentry-settings-view > .muted { margin: 0; }
.sentry-set-row { display: grid; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border); min-width: 0; }
.set-panel > .sentry-set-row:last-child { border-bottom: 0; }
.sentry-set-row > .field > .title, .sentry-set-row > .choice-list > legend, .sentry-set-row .sentry-read-fields > .field > .title,
.sentry-set-row > .stack > .field > .title, .sentry-set-row > [data-contract="sentry-agent-prompt"] > .title { font: 500 13px/19px var(--font-sans); color: var(--fg-strong); }
.sentry-set-row .field > .muted, .sentry-set-row .choice .muted { font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.sentry-set-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); margin: 0; }
.sentry-set-save .form-status { margin: 0 auto 0 0; }
.sentry-set-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sentry-set-danger p { flex: 1 1 280px; margin: 0; }
.sentry-set-row .table-wrap { margin: 0; }

/* ---- Fields shared by the steps and Settings ---- */
.sentry-flow-step p, .sentry-settings-section p { margin: 0; }
.sentry-read-fields { display: grid; gap: var(--space-4); }
.sentry-flow-step .field input[type=text], .sentry-settings-section .field input[type=text]:not([readonly]) { width: 100%; max-width: 520px; }
/* Secrets are masked text, never password inputs (#2728). */
.masked-input { -webkit-text-security: disc; text-security: disc; font-family: var(--font-mono); }
/* A saved secret or token: the masked value in a sunken box, its badge and Replace (#3480's credential). */
.sentry-secret-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sentry-secret-saved > .mono:first-child {
  display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; max-width: 100%; padding: 0 12px; overflow-wrap: anywhere;
  background: var(--surface-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); font: 400 11px/normal var(--font-mono); color: var(--fg-strong);
}
.sentry-secret-test { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.copy-field { display: flex; gap: var(--space-2); }
.copy-field input { flex: 1; min-width: 0; background: var(--surface-sunken); font: 400 11px/normal var(--font-mono); }
.sentry-flow-step .checklist, .sentry-settings-section .checklist { display: grid; gap: var(--space-1); padding-left: var(--space-4); list-style: disc; font: 400 13px/20px var(--font-sans); }
.sentry-flow-step .crumbs, .sentry-settings-section .crumbs { display: inline-flex; vertical-align: middle; }
.sentry-map { width: 100%; }
.sentry-map th[scope=row] { font: 500 13px/20px var(--font-sans); letter-spacing: normal; text-transform: none; color: var(--fg); background: none; overflow-wrap: anywhere; }
.sentry-map select { width: 100%; min-width: 0; max-width: 320px; }

/* ---- Reflow (not in Figma): stepper above the step below 900; rows stack below 640 ---- */
@media (max-width: 900px) {
  .sentry-flow { grid-template-columns: minmax(0, 1fr); }
  .sentry-flow-progress ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .sentry-flow-progress li + li::before { display: none; }
}
@media (max-width: 640px) {
  .sentry-card { padding: var(--space-4); }
  .sentry-issue-body { grid-template-columns: minmax(0, 1fr); }
  .sentry-issue-line { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; }
  .sentry-issue-line .sentry-issue-meta { grid-area: 2 / 1 / 3 / 3; flex-wrap: wrap; margin-top: var(--space-1); } /* project, environment and time under the line */
  .sentry-settings-btn { margin-left: 0; }
  .sentry-map thead { display: none; }
  .sentry-map, .sentry-map tbody { display: block; width: 100%; }
  .sentry-set-row { padding: var(--space-4); }
  .sentry-map tr { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-top: 1px solid var(--border-soft); }
  .sentry-map th[scope=row], .sentry-map td { display: block; padding: 0 var(--space-2); border: 0; white-space: normal; }
  .sentry-map select { max-width: 100%; }
}