/* GitGate Web (WO-994A). Only what SkyUI does not already draw: lane rows, groups, cards, fact lists, the
   stacked tables, capacity meters, the timeline and the command sheet. SDS roles only (var(--sds-*)), SDS type
   tokens for every size, sentence case, no inline style anywhere (the page policy forbids it). Layout follows
   the approved mockup v0 (WO-1001): one column at phone widths, no horizontal page scroll. */

.gg-boot { padding: var(--sds-space-6) var(--sds-space-4); color: var(--sds-color-muted); }
.gg-page { display: flex; flex-direction: column; gap: var(--sds-space-5); min-inline-size: 0; }
.gg-page .sds-page-header { min-inline-size: 0; }
.gg-page .sds-page-header__title { overflow-wrap: anywhere; }

/* Shared bits */
.gg-muted, .gg-help, .gg-stamp { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.gg-help { display: block; overflow-wrap: anywhere; }
.gg-code { font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); padding: 0 var(--sds-space-1); border-radius: var(--sds-radius-small); background: var(--sds-color-fill-gray); color: var(--sds-color-text); overflow-wrap: anywhere; }
.gg-sha { font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); word-break: break-all; }
.gg-mono { font-family: var(--sds-font-mono); }
.gg-wo { font-weight: var(--sds-weight-semibold); }
.gg-summary { color: var(--sds-color-muted); font-size: var(--sds-type-callout); }
.gg-loading { color: var(--sds-color-muted); font-size: var(--sds-type-callout); }
.gg-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sds-space-3); padding: var(--sds-space-5) var(--sds-space-4); border: var(--sds-border-width) dashed var(--sds-color-border); border-radius: var(--sds-radius-panel); color: var(--sds-color-muted); text-align: center; }
.gg-actions { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); }
.gg-actions .sds-button { display: inline-flex; align-items: center; gap: var(--sds-space-1); }
.gg-section-title { margin-block-start: var(--sds-space-2); font-size: var(--sds-type-section); font-weight: var(--sds-weight-semibold); }
.gg-subhead { margin-block-start: var(--sds-space-2); font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); }
.gg-flag { display: inline-flex; align-items: center; gap: var(--sds-space-1); color: var(--sds-color-warning); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.gg-ignored { display: inline-block; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-style: italic; }
.gg-list { display: flex; flex-direction: column; gap: var(--sds-space-2); margin: 0; padding-inline-start: var(--sds-space-5); }
.gg-plain { display: flex; flex-direction: column; gap: var(--sds-space-2); margin: 0; padding: 0; list-style: none; }
.gg-details summary { cursor: pointer; color: var(--sds-color-muted); font-size: var(--sds-type-callout); }
.gg-details[open] summary { margin-block-end: var(--sds-space-3); }
.gg-evidence { align-self: start; }
.gg-evidence > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sds-space-2); min-block-size: var(--sds-size-touch); cursor: pointer; font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); }
.gg-evidence > summary::before { content: "+"; color: var(--sds-color-muted); }
.gg-evidence[open] > summary::before { content: "−"; }
.gg-evidence > summary > span:first-child { flex: 1; }
.gg-evidence__body { display: flex; flex-direction: column; gap: var(--sds-space-3); padding-block-start: var(--sds-space-3); }
.gg-evidence__body > .sds-badge { align-self: flex-start; }

/* Filters and groups */
.gg-filters { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); min-inline-size: 0; }
a.sds-filter-pill { text-decoration: none; }
.gg-groups { display: flex; flex-direction: column; gap: var(--sds-space-6); min-inline-size: 0; }
.gg-group { display: flex; flex-direction: column; gap: var(--sds-space-2); min-inline-size: 0; }
.gg-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); overflow-wrap: anywhere; }
.gg-group__count { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-regular); }
.gg-substate { display: flex; flex-direction: column; gap: var(--sds-space-1); min-inline-size: 0; }
.gg-substate__head { font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); color: var(--sds-color-muted); }
.gg-lane__title { overflow-wrap: anywhere; }
.gg-page .sds-directory-row { min-inline-size: 0; }
.gg-page .sds-directory-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-1) var(--sds-space-2); min-inline-size: 0; overflow-wrap: anywhere; }
.gg-page .sds-directory-row__meta { display: flex; flex-wrap: wrap; gap: var(--sds-space-1) var(--sds-space-3); min-inline-size: 0; }
.gg-page .sds-directory-row__body { min-inline-size: 0; }
.gg-page .sds-badge { display: inline-flex; align-items: center; gap: var(--sds-space-1); }

/* Cards and layout */
.gg-detail { display: flex; flex-direction: column; gap: var(--sds-space-4); min-inline-size: 0; }
.gg-card { display: flex; flex-direction: column; gap: var(--sds-space-3); min-inline-size: 0; padding: var(--sds-space-4) var(--sds-space-5); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); box-shadow: var(--sds-elevation-1); overflow-wrap: anywhere; }
.gg-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sds-space-1) var(--sds-space-3); }
.gg-card__head h2 { display: inline-flex; align-items: center; gap: var(--sds-space-2); font-size: var(--sds-type-headline); font-weight: var(--sds-weight-semibold); }
.gg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sds-space-4); min-inline-size: 0; }
.gg-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--sds-space-4); min-inline-size: 0; }
.gg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--sds-space-3); }
.gg-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--sds-space-3) var(--sds-space-4); margin: 0; }
.gg-facts > div { min-inline-size: 0; }
.gg-facts dt { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.gg-facts dd { margin: 0; overflow-wrap: anywhere; }
pre.gg-wotext { margin: 0; padding: var(--sds-space-3); border-radius: var(--sds-radius-small); background: var(--sds-color-raised); font-family: var(--sds-font-sans); font-size: var(--sds-type-callout); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 24rem; overflow-y: auto; }

/* Tables: a table at desktop width, stacked rows on a phone */
.gg-tablewrap { max-inline-size: 100%; overflow-x: auto; border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); }
.gg-table { inline-size: 100%; border-collapse: collapse; font-size: var(--sds-type-callout); }
.gg-table th, .gg-table td { padding: var(--sds-space-2) var(--sds-space-3); border-block-end: var(--sds-border-width) solid var(--sds-color-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.gg-table th { background: var(--sds-color-raised); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-strong); }
.gg-table tbody tr:last-child td { border-block-end: 0; }
.gg-table tr.is-stale td { background: var(--sds-color-fill-gray); color: var(--sds-color-muted); }
.gg-table tr.is-stale .sds-badge { opacity: 0.7; }
.gg-source { color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.gg-td { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-1) var(--sds-space-2); min-inline-size: 0; }
.gg-td > .gg-help { flex-basis: 100%; }
@media (max-width: 720px) {
  .gg-tablewrap { overflow-x: visible; }
  .gg-table, .gg-table tbody, .gg-table tr, .gg-table td { display: block; }
  .gg-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .gg-table tr { padding: var(--sds-space-3) var(--sds-space-4); border-block-end: var(--sds-border-width) solid var(--sds-color-border); }
  .gg-table tbody tr:last-child { border-block-end: 0; }
  .gg-table td { display: grid; grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr); gap: var(--sds-space-2); padding: var(--sds-space-1) 0; border: 0; }
  .gg-table td::before { content: attr(data-label); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
  .gg-table tr.is-stale { background: var(--sds-color-fill-gray); }
  .gg-table tr.is-stale td { background: transparent; }
}

/* Stamps on architecture facts */
.gg-stampchip { display: inline-grid; place-items: center; min-inline-size: var(--sds-space-6); padding: 0 var(--sds-space-1); border-radius: var(--sds-radius-small); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); font-weight: var(--sds-weight-semibold); }
.gg-stampchip--probed { background: var(--sds-color-success-bg); color: var(--sds-color-success); }
.gg-stampchip--documented { background: var(--sds-color-info-bg); color: var(--sds-color-info); }
.gg-stampchip--reported { background: var(--sds-color-warning-bg); color: var(--sds-color-warning); }
.gg-stampchip--unknown { background: var(--sds-color-unknown-bg); color: var(--sds-color-unknown); }
.gg-legend-row { display: flex; flex-wrap: wrap; gap: var(--sds-space-2) var(--sds-space-4); color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.gg-legend-row span { display: inline-flex; align-items: center; gap: var(--sds-space-1); }

/* Lane detail */
.gg-progress { display: flex; flex-wrap: wrap; gap: var(--sds-space-2) var(--sds-space-5); }
.gg-progress > div { display: flex; flex-direction: column; min-inline-size: 0; }
.gg-progress strong { font-size: var(--sds-type-section); font-variant-numeric: tabular-nums; }
.gg-attempt { display: flex; flex-direction: column; gap: var(--sds-space-1); padding: var(--sds-space-3); border-radius: var(--sds-radius-small); background: var(--sds-color-raised); }
.gg-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.gg-timeline li { position: relative; display: flex; flex-direction: column; gap: var(--sds-space-1); min-inline-size: 0; padding: 0 0 var(--sds-space-3) var(--sds-space-5); border-inline-start: 2px solid var(--sds-color-border); margin-inline-start: var(--sds-space-1); overflow-wrap: anywhere; }
.gg-timeline li:last-child { padding-block-end: 0; border-inline-start-color: transparent; }
.gg-timeline li::before { content: ""; position: absolute; inset-block-start: 0.35em; inset-inline-start: calc(-1 * var(--sds-space-1) - 1px); inline-size: var(--sds-size-dot); block-size: var(--sds-size-dot); border-radius: var(--sds-radius-pill); background: var(--sds-color-control-border); }
.gg-timeline li:first-child::before { background: var(--sds-color-accent); }
.gg-timeline__when { color: var(--sds-color-muted); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); }

/* Hosts */
.gg-hoststate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); font-size: var(--sds-type-callout); }
.gg-meters { display: flex; flex-direction: column; gap: var(--sds-space-3); margin: 0; padding: 0; list-style: none; }
.gg-meter__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sds-space-1) var(--sds-space-3); font-size: var(--sds-type-callout); }
.gg-meter__name { font-weight: var(--sds-weight-semibold); }
.gg-cells { display: flex; gap: 2px; margin-block: var(--sds-space-1); }
.gg-cell { flex: 1 1 0; block-size: 0.625rem; border-radius: 2px; background: var(--sds-color-fill-gray); }
.gg-cell.is-used { background: var(--sds-color-action); }

/* Queue and trains */
.gg-jobs { gap: 0; border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-panel); }
.gg-job { display: flex; flex-direction: column; gap: var(--sds-space-1); min-inline-size: 0; padding: var(--sds-space-3) var(--sds-space-4); border-block-end: var(--sds-border-width) solid var(--sds-color-border); }
.gg-job:last-child { border-block-end: 0; }
.gg-job__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2); min-inline-size: 0; }
.gg-meta { display: flex; flex-wrap: wrap; gap: var(--sds-space-1) var(--sds-space-3); min-inline-size: 0; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }
.gg-meta > span { min-inline-size: 0; overflow-wrap: anywhere; }
.gg-steps { gap: var(--sds-space-3); }
.gg-step { display: flex; flex-direction: column; gap: var(--sds-space-1); padding: var(--sds-space-3); border-radius: var(--sds-radius-small); background: var(--sds-color-raised); }
.gg-trainlanes { display: flex; flex-direction: column; gap: var(--sds-space-1); margin: 0; padding-inline-start: var(--sds-space-5); font-size: var(--sds-type-callout); overflow-wrap: anywhere; }

/* Command sheet */
.gg-fields { display: flex; flex-direction: column; gap: var(--sds-space-3); min-inline-size: 0; }
.gg-field { display: grid; gap: var(--sds-space-1); min-inline-size: 0; margin: 0; }
.gg-label { font-size: var(--sds-type-control); font-weight: var(--sds-weight-strong); }
.gg-input { inline-size: 100%; min-inline-size: 0; }
.gg-fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.gg-legend { margin-block-end: var(--sds-space-2); padding: 0; color: var(--sds-color-muted); font-size: var(--sds-type-section-header); font-weight: var(--sds-weight-semibold); }
.gg-fieldset .sds-filter-pill input { margin: 0; accent-color: var(--sds-color-action); }
.gg-fieldset .sds-filter-pill { display: inline-flex; align-items: center; gap: var(--sds-space-1); cursor: pointer; }
.gg-check { display: flex; align-items: flex-start; gap: var(--sds-space-3); min-block-size: var(--sds-size-touch); cursor: pointer; }
.gg-check input { flex: none; inline-size: var(--sds-size-icon); block-size: var(--sds-size-icon); margin: 0.15em 0 0; accent-color: var(--sds-color-action); }
.gg-check > span { display: flex; flex-direction: column; min-inline-size: 0; }
.gg-runs { display: flex; flex-direction: column; gap: var(--sds-space-2); padding: var(--sds-space-3) var(--sds-space-4); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-panel); background: var(--sds-color-raised); }
.gg-runs h3 { font-size: var(--sds-type-callout); font-weight: var(--sds-weight-semibold); }
.gg-cli { margin: 0; padding: var(--sds-space-3); border-radius: var(--sds-radius-small); background: var(--sds-color-raised); font-family: var(--sds-font-mono); font-size: var(--sds-type-footnote); white-space: pre-wrap; overflow-wrap: anywhere; }
.gg-blocked { color: var(--sds-color-danger); font-size: var(--sds-type-callout); }
.gg-copied { align-self: center; color: var(--sds-color-muted); font-size: var(--sds-type-footnote); }

/* Sign-in */
.gg-signin { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--sds-space-4); }
.gg-signin__card { display: flex; flex-direction: column; gap: var(--sds-space-3); inline-size: min(100%, 26rem); padding: var(--sds-space-6) var(--sds-space-5); border: var(--sds-border-width) solid var(--sds-color-border); border-radius: var(--sds-radius-dialog); background: var(--sds-color-panel); box-shadow: var(--sds-elevation-2); }
.gg-signin__mark { color: var(--sds-color-accent); }
.gg-signin__title { font-size: var(--sds-type-title); font-weight: var(--sds-weight-semibold); }
.gg-signin__token summary { cursor: pointer; color: var(--sds-color-muted); font-size: var(--sds-type-callout); }
.gg-signin__token[open] summary { margin-block-end: var(--sds-space-3); }

@media (max-width: 640px) {
  .gg-card { padding: var(--sds-space-4); }
  .gg-page .sds-page-header__right { inline-size: 100%; }
}

@media (forced-colors: active) {
  .gg-cell.is-used { background: Highlight; }
  .gg-table tr.is-stale td { color: GrayText; }
}

/* WO-1274 — each repository's door on the Line. */
.gg-door { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-2, 8px); margin: 0 0 var(--sds-space-3, 12px); }

.gg-log { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; font-size: var(--sds-type-footnote); }