/* GitHub-style components shared by My Experiments, Account settings and the dashboard: links, pills,
   buttons, inputs, menus, boxes, tabs, banners. Link/green/danger colours follow GitHub's
   light and dark palettes; surfaces, borders and muted text use the site's theme tokens
   (site-shell.css), so the pages still match the rest of Constellation.
   The inline SVG icons on these pages are Octicons (MIT, (c) GitHub Inc.); see
   static/vendor/licenses/octicons-LICENSE.txt. */
:root { --gh-link: #0969da; --gh-green: #1f883d; --gh-green-hover: #1a7f37; --gh-danger: #cf222e; }
html[data-theme="dark"] { --gh-link: #4493f8; --gh-green: #238636; --gh-green-hover: #29903b; --gh-danger: #f85149; }
/* Buttons, menus and hovers use the site's zinc surfaces so they match the rest of the app. */
:root { --gh-btn: var(--shell-surface-alt); --gh-btn-hover: var(--shell-border); }
.gh-link { color: var(--gh-link) !important; font-weight: 600; }
.gh-link:hover { text-decoration: underline; }
.gh-muted { color: var(--docs-muted); }
.gh-border { border: 1px solid var(--shell-border); }
.gh-hr { border: 0; border-top: 1px solid var(--shell-border); }
.gh-pill { display: inline-flex; align-items: center; padding: 0 0.45rem; border: 1px solid var(--shell-border); border-radius: 2em; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; color: var(--docs-muted); white-space: nowrap; }
.gh-pill--submitted { border-color: #d4a72c; color: #9a6700; }
.gh-pill--approved { border-color: #54aeff; color: #0969da; }
.gh-pill--rejected { border-color: #ff8182; color: #cf222e; }
html[data-theme="dark"] .gh-pill--submitted { border-color: #9e6a03; color: #d29922; }
html[data-theme="dark"] .gh-pill--approved { border-color: #1f6feb; color: #58a6ff; }
html[data-theme="dark"] .gh-pill--rejected { border-color: #da3633; color: #f85149; }
.gh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: 0.75rem; color: var(--docs-muted); }
.gh-meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.gh-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.gh-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 9999px; border: 1px solid rgba(127,127,127,0.25); }
.gh-btn { display: inline-flex; align-items: center; gap: 0.35rem; height: 2rem; padding: 0 0.75rem; border: 1px solid var(--shell-border); border-radius: 0.375rem; background: var(--gh-btn); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.gh-btn:hover { background: var(--gh-btn-hover); border-color: var(--shell-border-strong); }
.gh-btn--green { background: var(--gh-green); border-color: rgba(31,35,40,0.15); color: #fff !important; }
.gh-btn--green:hover { background: var(--gh-green-hover); }
.gh-input { height: 2rem; padding: 0 0.75rem; border: 1px solid var(--shell-border); border-radius: 0.375rem; background: transparent; font-size: 0.875rem; width: 100%; color: inherit; }
.gh-input:focus { outline: none; border-color: var(--gh-link); box-shadow: 0 0 0 3px rgba(9,105,218,0.25); }
.gh-input:disabled { opacity: 0.7; cursor: not-allowed; }
.gh-input--search { padding-left: 2rem; }
textarea.gh-input { height: auto; padding: 0.4rem 0.75rem; line-height: 1.5; resize: vertical; }
select.gh-input { padding-right: 2rem; }
.gh-input.is-invalid { border-color: var(--gh-danger); }
.gh-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(207,34,46,0.25); }

/* Forms and settings pages. */
.gh-h2 { font-size: 1.5rem; font-weight: 400; line-height: 1.25; padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--shell-border); }
.gh-h2--danger { color: var(--gh-danger); }
.gh-label { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; }
.gh-label .gh-required { color: var(--gh-danger); }
.gh-help { margin-top: 0.3rem; font-size: 0.75rem; color: var(--docs-muted); }
.gh-help--error { color: var(--gh-danger); }
.gh-success { color: var(--gh-green); }
.gh-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 13rem; padding: 0.25rem 0; border: 1px solid var(--shell-border-strong); border-radius: 0.75rem; background: var(--shell-surface); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
html[data-theme="dark"] .gh-menu { background: var(--shell-surface-alt); box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.gh-menu__title { padding: 0.4rem 0.9rem; font-size: 0.75rem; font-weight: 600; }
/* Menu options only (direct children), not buttons inside a menu's content like Copy. */
.gh-menu > button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.9rem; font-size: 0.875rem; text-align: left; }
.gh-menu > button:hover:not(:disabled) { background: var(--gh-btn-hover); }
.gh-row + .gh-row { border-top: 1px solid var(--shell-border); }
.gh-danger { color: var(--gh-danger); }
.gh-card { border: 1px solid var(--shell-border); border-radius: 0.375rem; transition: border-color 0.15s ease; }
.gh-card:hover { border-color: var(--shell-border-strong); }
.gh-empty { border: 1px dashed var(--shell-border-strong); border-radius: 0.375rem; }
.gh-check { width: 1rem; height: 1rem; accent-color: var(--gh-link); }
.gh-pick + .gh-pick { border-top: 1px solid var(--shell-border); }
/* Side menu (Account settings, dashboard), like GitHub's: a plain list, the active item marked by a bar. */
.settings-nav > a, .settings-nav > button { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; color: var(--docs-body); text-align: left; white-space: nowrap; }
.settings-nav > a:hover, .settings-nav > button:hover { background: var(--gh-btn-hover); }
.settings-nav > .is-active { background: var(--shell-surface-alt); font-weight: 600; color: inherit; }
.settings-nav > .is-active::before { content: ""; position: absolute; left: -0.5rem; top: 0.25rem; bottom: 0.25rem; width: 4px; border-radius: 4px; background: var(--nav-active-border); }
@media (max-width: 767px) { .settings-nav > .is-active::before { left: 0.25rem; right: 0.25rem; top: auto; bottom: -0.25rem; width: auto; height: 3px; } }
/* Tables inside a .gh-box (dashboard). */
.gh-table { width: 100%; font-size: 0.875rem; }
.gh-table th { padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--docs-muted); background: var(--shell-surface-alt); border-bottom: 1px solid var(--shell-border); white-space: nowrap; }
.gh-table td { padding: 0.55rem 1rem; vertical-align: middle; }
.gh-table tbody tr + tr td { border-top: 1px solid var(--shell-border); }
.gh-table tbody tr:hover { background: var(--shell-surface-alt); }
/* Tabs and boxes (experiment page). */
.gh-tabs { display: flex; gap: 0.25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--shell-border); }
.gh-tabs::-webkit-scrollbar { display: none; }
.gh-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.75rem 0.6rem; border-bottom: 2px solid transparent; font-size: 0.875rem; color: var(--docs-body); white-space: nowrap; }
.gh-tab:hover { border-bottom-color: var(--shell-border-strong); }
/* Active tab: Constellation's own accent (as in the account and dashboard menus), not GitHub's orange. */
.gh-tab.is-active { border-bottom-color: var(--nav-active-border); font-weight: 600; color: inherit; }
.gh-counter { display: inline-block; min-width: 1.25rem; padding: 0 0.4rem; border-radius: 2em; background: var(--shell-border); font-size: 0.75rem; font-weight: 500; line-height: 1.125rem; text-align: center; }
.gh-box { border: 1px solid var(--shell-border); border-radius: 0.375rem; }
.gh-box__head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--shell-border); background: var(--shell-surface-alt); border-radius: 0.375rem 0.375rem 0 0; font-size: 0.875rem; }
.gh-box__row { padding: 0.55rem 1rem; font-size: 0.875rem; }
.gh-box__row + .gh-box__row { border-top: 1px solid var(--shell-border); }
.gh-box__row:hover { background: var(--shell-surface-alt); }
.gh-flash { padding: 0.9rem 1rem; border: 1px solid; border-radius: 0.375rem; font-size: 0.875rem; }
.gh-flash--info { border-color: rgba(84,174,255,0.4); background: rgba(84,174,255,0.08); }
.gh-flash--warn { border-color: rgba(212,167,44,0.45); background: rgba(212,167,44,0.1); }
.gh-flash--danger { border-color: rgba(255,129,130,0.45); background: rgba(255,129,130,0.08); }
.gh-flash--muted { border-color: var(--shell-border); background: var(--shell-surface-alt); }
.gh-code { display: block; padding: 0.6rem 0.75rem; border-radius: 0.375rem; background: var(--shell-surface-alt); border: 1px solid var(--shell-border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.6; overflow-x: auto; white-space: pre; }
.gh-danger-zone { border: 1px solid var(--gh-danger); border-radius: 0.375rem; }
.gh-btn--danger { color: var(--gh-danger) !important; }
.gh-btn--danger:hover { background: var(--gh-danger); border-color: var(--gh-danger); color: #fff !important; }
.gh-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Icon-only button without a frame, like GitHub's copy and help buttons. */
.gh-btn--invisible { justify-content: center; width: 2rem; padding: 0; border-color: transparent; background: transparent; color: var(--docs-muted); }
.gh-btn--invisible:hover { background: var(--gh-btn-hover); border-color: transparent; color: inherit; }
/* Dialogs, like GitHub's: a header with the title and a close button, a body that scrolls when
   the dialog is taller than the window, and a footer with the buttons on the right.
   <div class="modal-panel gh-dialog max-w-sm mx-4">
     <div class="gh-dialog__header"><h3 class="gh-dialog__title">…</h3><button class="gh-dialog__close">…</button></div>
     <div class="gh-dialog__body">…</div>
     <div class="gh-dialog__footer">…</div>
   </div> */
.gh-dialog { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); overflow: hidden; border-color: var(--shell-border-strong); border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(66,74,83,0.12), 0 1px 3px rgba(31,35,40,0.12); }
html[data-theme="dark"] .gh-dialog { background: var(--shell-surface); box-shadow: 0 8px 24px rgba(1,4,9,0.75); }
.gh-dialog__header { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-bottom: 1px solid var(--shell-border); }
.gh-dialog__title { flex: 1; min-width: 0; padding: 0.375rem 0; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; overflow-wrap: anywhere; }
.gh-dialog__subtitle { margin-top: 0.125rem; font-size: 0.75rem; font-weight: 400; color: var(--docs-muted); }
.gh-dialog__close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.375rem; color: var(--docs-muted); }
.gh-dialog__close:hover { background: var(--gh-btn-hover); color: inherit; }
.gh-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; font-size: 0.875rem; }
.gh-dialog__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 1rem; border-top: 1px solid var(--shell-border); }
.gh-side h3 { font-size: 1rem; font-weight: 600; }
.gh-side-list { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.875rem; color: var(--docs-muted); }
.gh-side-list > * { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.run-icon--completed { color: #1a7f37; } .run-icon--failed { color: #cf222e; } .run-icon--cancelled, .run-icon--cancelling { color: #bc4c00; }
.run-icon--running, .run-icon--pulling, .run-icon--pending { color: #9a6700; }
html[data-theme="dark"] .run-icon--completed { color: #3fb950; } html[data-theme="dark"] .run-icon--failed { color: #f85149; }
html[data-theme="dark"] .run-icon--cancelled, html[data-theme="dark"] .run-icon--cancelling { color: #db6d28; }
html[data-theme="dark"] .run-icon--running, html[data-theme="dark"] .run-icon--pulling, html[data-theme="dark"] .run-icon--pending { color: #d29922; }
@keyframes gh-spin { to { transform: rotate(360deg); } }
.gh-spin { animation: gh-spin 1.2s linear infinite; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }