/* GitHub panel. It reads the shared panel tokens; states, checks and diff
   lines keep the GitHub colors (domain tokens in tokens.css). */
@layer tokens {
:root {
  --comp-github-diff-shade: #000;
  --domain-github-diff-add: #7ee2a0;
  --domain-github-diff-remove: #ffa198;
}
}

@layer legacy {
.gh-panel {
  position: fixed; z-index: 940; inset: 78px 16px 16px auto; width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column; overflow: hidden; color: var(--comp-panel-fg); background: var(--comp-panel-bg);
  border: 1px solid var(--comp-panel-line); border-radius: 20px; box-shadow: var(--comp-panel-shadow); font: 13px/1.5 var(--sys-font, system-ui); box-sizing: border-box;
}
.gh-panel *, .gh-panel *::before, .gh-panel *::after { box-sizing: border-box; }
.gh-panel[hidden], .gh-panel [hidden] { display: none !important; }
.gh-trigger { position: relative; }
.gh-badge { position: absolute; top: 2px; right: 2px; }
.gh-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.gh-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--comp-panel-muted); }
.gh-heading h2 { margin: 2px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.gh-heading-actions { display: flex; gap: 6px; }
.gh-icon { width: 34px; height: 34px; border: 1px solid var(--comp-panel-line); border-radius: 10px; background: var(--comp-panel-soft); color: inherit; font-size: 18px; cursor: pointer; }
.gh-account { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 20px 10px; padding: 9px 12px; border-radius: 12px; background: var(--comp-panel-soft); color: var(--comp-panel-muted); font-size: 12px; }
.gh-text-button { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--comp-panel-line); border-radius: 8px; background: transparent; color: var(--comp-panel-fg); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
.gh-text-button:hover, .gh-text-button:focus-visible, .gh-item:hover, .gh-item:focus-visible { background: var(--comp-panel-hover); }
.gh-text-button.is-primary { background: var(--comp-panel-accent); border-color: transparent; color: var(--comp-button-on-accent); }
.gh-tabs { display: flex; gap: 4px; padding: 0 20px 10px; border-bottom: 1px solid var(--comp-panel-line); }
.gh-tab { padding: 6px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--comp-panel-muted); font: inherit; cursor: pointer; }
.gh-tab[aria-current="page"] { background: var(--comp-panel-accent); color: var(--comp-button-on-accent); }
.gh-status { margin: 0; padding: 0 20px; color: var(--comp-panel-muted); font-size: 12px; }
.gh-status:not(:empty) { padding-top: 8px; }
.gh-status[data-error="true"] { color: var(--sys-status-danger); }
.gh-body { flex: 1; overflow: auto; padding: 10px 20px 20px; }
.gh-empty { margin: 24px 0; color: var(--comp-panel-muted); text-align: center; }
.gh-list { display: flex; flex-direction: column; gap: 6px; }
.gh-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px; border: 1px solid var(--comp-panel-line); border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gh-item-top, .gh-item-meta, .gh-detail-meta, .gh-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gh-item-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.gh-ref { font-family: ui-monospace, monospace; font-size: 11px; color: var(--comp-panel-muted); }
.gh-muted { color: var(--comp-panel-muted); font-size: 12px; }
.gh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--domain-github-draft); }
.gh-pill { padding: 0 7px; border-radius: 999px; background: var(--domain-github-draft); color: var(--domain-github-on-state); font-size: 11px; font-weight: 600; }
.gh-pill.is-muted { background: var(--comp-panel-soft); color: var(--comp-panel-muted); }
[data-state="open"] > * > .gh-dot, [data-state="open"] .gh-pill:not(.is-muted) { background: var(--domain-github-open); }
[data-state="merged"] > * > .gh-dot, [data-state="merged"] .gh-pill:not(.is-muted) { background: var(--domain-github-merged); }
[data-state="closed"] > * > .gh-dot, [data-state="closed"] .gh-pill:not(.is-muted) { background: var(--domain-github-closed); }
.gh-review { padding: 0 7px; border-radius: 999px; font-size: 11px; border: 1px solid var(--comp-panel-line); color: var(--comp-panel-muted); }
.gh-review.is-approved { color: var(--domain-github-success); border-color: color-mix(in srgb, var(--domain-github-success) 53.3%, transparent); }
.gh-review.is-changes_requested { color: var(--domain-github-failure); border-color: color-mix(in srgb, var(--domain-github-failure) 53.3%, transparent); }
.gh-review.is-review_required { color: var(--domain-github-pending); border-color: color-mix(in srgb, var(--domain-github-pending) 53.3%, transparent); }
.gh-check { font-weight: 700; }
.gh-check.is-success, .is-success > .gh-check { color: var(--domain-github-success); }
.gh-check.is-failure, .is-failure > .gh-check { color: var(--domain-github-failure); }
.gh-check.is-pending, .is-pending > .gh-check { color: var(--domain-github-pending); }
.gh-back { margin-bottom: 10px; }
.gh-detail-heading { padding-bottom: 12px; border-bottom: 1px solid var(--comp-panel-line); }
.gh-detail-title { display: block; color: var(--comp-panel-fg); font-size: 18px; font-weight: 650; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.gh-detail-title:hover { text-decoration: underline; }
.gh-detail-meta { margin: 8px 0; }
.gh-add { color: var(--domain-github-success); } .gh-remove { color: var(--domain-github-failure); }
.gh-diffstat { font-size: 12px; color: var(--comp-panel-muted); }
.gh-detail-actions, .gh-comment-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-comment-actions { margin-top: 6px; }
.gh-section { margin-top: 16px; }
.gh-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--comp-panel-muted); }
.gh-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.gh-checks li { display: flex; align-items: center; gap: 8px; }
.gh-link { color: var(--comp-panel-fg); overflow-wrap: anywhere; }
.gh-comment { padding: 10px 12px; border: 1px solid var(--comp-panel-line); border-radius: 12px; margin-bottom: 8px; }
.gh-comment-meta { margin: 0 0 4px; font-size: 12px; }
.gh-thread { border: 1px solid var(--comp-panel-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.gh-thread > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; cursor: pointer; }
.gh-thread.is-resolved { opacity: .75; }
.gh-thread .gh-comment { margin: 8px 0 0; }
.gh-path { font-size: 12px; overflow-wrap: anywhere; }
.gh-diff { margin: 8px 0 0; padding: 8px 0; overflow-x: auto; border-radius: 8px; background: color-mix(in srgb, var(--comp-github-diff-shade) 30%, var(--comp-panel-bg)); font: 12px/1.45 ui-monospace, monospace; white-space: pre; }
.gh-diff span { display: block; padding: 0 10px; min-width: max-content; }
.gh-diff-add { background: color-mix(in srgb, var(--domain-github-success) 13.3%, transparent); color: var(--domain-github-diff-add); }
.gh-diff-remove { background: color-mix(in srgb, var(--domain-github-failure) 13.3%, transparent); color: var(--domain-github-diff-remove); }
.gh-diff-hunk { color: var(--comp-panel-muted); }
.gh-markdown { font-size: 13px; overflow-wrap: anywhere; }
.gh-description > summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--comp-panel-muted); }
@media (max-width: 760px) {
  .gh-panel { inset: 0; width: 100vw; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); }
}
}