:root{color-scheme:dark;--bg:#0d1117;--panel:#161b22;--raised:#21262d;--line:#30363d;--muted:#8b949e;--text:#e6edf3;--link:#58a6ff;--green:#3fb950;--green-tint:#12261e;--red:#f85149;--red-tint:#3a1113;--chart:#4493f8;--radius:6px;--radius-lg:8px}
/* Pseudo-elements too: the bare `*` selector does not match them, so the tooltip's max-width was a
   content-box width and a box capped at "200px" actually occupied 222 once its padding and border
   were added — which is how a tooltip that had been measured as fitting still pushed the page two
   pixels sideways. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;color:var(--text);background:var(--bg);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.topbar{display:flex;align-items:center;gap:20px;padding:0 24px;height:56px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:600;font-size:15px;color:var(--text)}
.topbar nav{display:flex;gap:16px;flex:1}
.topbar nav a{color:var(--muted);font-size:13px;padding:4px 0;border-bottom:2px solid transparent}
.topbar nav a.current{color:var(--text);border-bottom-color:var(--link)}
.read-only-chip{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:11.5px;color:var(--muted);background:var(--raised);cursor:default}
main{max-width:1040px;margin:0 auto;padding:28px 24px 8px}
/* A run of text with no space in it — a repository's owner/name, a commit sha, a passthrough path —
   sets a minimum width of its own, and a minimum wider than the window is a page that scrolls
   sideways however the boxes around it are laid out. `anywhere` rather than `break-word` because only
   `anywhere` is counted when the browser works out that minimum.

   Applied to the things that actually contain such runs, and NOT to ordinary prose or to short
   labels. Applying it everywhere let the browser shrink a table column to a single character, which
   is how "getRepository" came to be laid out as "getRe / posit / ory" in a column with room to
   spare: a cell that CAN be one character wide will be made one character wide by a column that is
   competing with a 300-character path for the same width. */
h1,code,dd,.stat-value,.error-message,.cause-chain li{overflow-wrap:anywhere}
/* Only the cells holding a name with no space in it — a repository's owner/name, a passthrough path —
   may be broken anywhere. That is deliberately not every row title: a column allowed to shrink to one
   character WILL be shrunk to one by a table competing for width, which is how "getRepository" came to
   be set as "getReposito / ry" in a table with room to spare. Letting the resource names absorb the
   squeeze, and nothing else, keeps every other column at least as wide as its longest word. */
.resource-name{overflow-wrap:anywhere}
h1{font-size:22px;margin:0 0 6px}
/* Both of these put a label beside its info icon in a flex row. A flex row does not wrap unless it
   is told to, and a flex item will not shrink below its longest word, so at phone width the pair
   set a minimum wider than the card holding it and pushed the page sideways by a few pixels. */
h2.section-title{font-size:14px;margin:0 0 10px;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.page-sub{color:var(--muted);margin:0 0 22px;font-size:13px}
.panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:16px 18px;margin:0 0 18px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 18px}
.stat{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:14px 16px}
.stat-label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-bottom:8px;flex-wrap:wrap;min-width:0}
.stat-value{font-size:19px;font-weight:600;line-height:1.25;word-break:break-word}
.stat-note{color:var(--muted);font-size:12px;margin-top:6px}
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600;border:1px solid var(--line)}
.state-green{color:var(--green);background:var(--green-tint);border-color:var(--green)}
.state-red{color:var(--red);background:var(--red-tint);border-color:var(--red)}
/* The page is the only thing that scrolls. A wrapper that scrolled sideways hid whatever it held
   behind an inner bar, stole the wheel from the page, and on a touch screen froze the page wherever
   it lay under the finger — so the table reflows to the width it is given instead. What makes that
   possible is that the cells holding something unbreakable — a passthrough path, a repository's
   owner/name — may be broken anywhere, so they absorb the squeeze and every other column keeps at
   least its longest word. See .resource-name and .row-note.mono below. */
.table-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
table{border-collapse:collapse;width:100%;table-layout:auto}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
/* A raw passthrough path: three hundred characters whose only break opportunities are the hyphens in
   a handoff filename, and whose trailing forty-character ?ref= sha has none at all. */
.row-note.mono,td.mono{overflow-wrap:anywhere}
tr:last-child td{border-bottom:0}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.empty{padding:22px;color:var(--muted);font-size:13px;text-align:center}
dl.facts{display:grid;grid-template-columns:200px 1fr;gap:10px 18px;margin:0}
dl.facts dt{color:var(--muted);font-size:12.5px}
dl.facts dd{margin:0;font-size:13.5px;word-break:break-word}
.info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:10px;font-style:italic;font-weight:700;line-height:1;cursor:help}
.tooltip{position:relative}
.tooltip::after{content:attr(aria-label);position:absolute;left:auto;right:0;top:calc(100% + 6px);z-index:60;width:max-content;max-width:min(280px,calc(100vw - 32px));padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);color:var(--text);font:400 12px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;text-transform:none;letter-spacing:normal;white-space:normal;box-shadow:0 8px 24px rgba(1,4,9,.6);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 120ms ease}
.tooltip:hover::after,.tooltip:focus-visible::after{opacity:1;visibility:visible}
/* Every explanation opens LEFTWARDS by default, and that default is load-bearing rather than
   cosmetic. The pseudo-element is only hidden, never removed, so its box is part of the page's
   layout at all times: anchored from the left it laid out up to 280px to the right of whatever
   carried it, which made every page scroll sideways whether or not anyone hovered anything — 157px
   on the top-bar chip, 127px on a section heading at phone width. Opening leftwards cannot do that,
   whatever the markup, because a box running past the LEFT edge of the window is not somewhere a
   page can be scrolled to and so adds no scrollable width at all. The guarantee is therefore
   structural: no arrangement of headings, cards, or columns can reintroduce the overflow.
   Leftwards is the wrong direction to read from when the thing being explained is near the left
   edge, and .tooltip-start is what the page script adds back for exactly those — see APP_JS. It is
   an enhancement on top of a layout that is already correct without it, never the thing that makes
   it correct. */
.tooltip-start::after{left:0;right:auto}
/* The widths the page script may choose between. They are classes rather than an inline style because
   every response carries a same-origin Content-Security-Policy, under which a style attribute this
   page wrote would silently not apply. Keep this ladder in step with WIDTHS in APP_JS. */
.tooltip-w240::after{max-width:240px}
.tooltip-w200::after{max-width:200px}
.tooltip-w160::after{max-width:160px}
.tooltip-w120::after{max-width:120px}
.tooltip:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.timestamp{display:flex;flex-direction:column;line-height:1.35}
.timestamp-relative{color:var(--text);font-weight:600;font-size:12px}
.timestamp-precise{color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.read-only-note{border:1px solid var(--line);border-left:3px solid var(--link);border-radius:var(--radius);background:var(--raised);padding:12px 14px;margin:0 0 20px;color:var(--muted);font-size:12.5px}
.read-only-note strong{color:var(--text)}
.freshness-control{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:14px 16px;margin:0 0 18px}
.freshness-control-title{display:block;font-size:12px;font-weight:600;margin-bottom:8px}
.freshness-options{display:flex;gap:8px;flex-wrap:wrap}
.freshness-option{display:inline-block;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:5px 11px;font-size:12px}
.freshness-option:hover{text-decoration:none;border-color:var(--link)}
.freshness-option:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.freshness-option-current{border-color:var(--link);background:var(--raised);color:var(--text);font-weight:600}
.freshness-control p{color:var(--muted);font-size:12px;margin:8px 0 0}
.freshness-notice{border:1px solid var(--line);border-left:3px solid var(--link);border-radius:var(--radius);background:var(--raised);padding:10px 12px;margin:0 0 18px;color:var(--muted);font-size:12.5px}
.freshness-notice strong{color:var(--text)}
.freshness-warning{border-left-color:var(--red)}
.error-panel{border-left:3px solid var(--red)}
.row-note-block{display:block}
.method-badge{display:inline-block;margin-right:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);padding:1px 6px;font:600 11px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text)}
/* chart */
.chart-caption{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.chart-figure{margin:0}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-day-rule{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6;opacity:.6}
.chart-axis-label{fill:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.chart-line{fill:none;stroke:var(--chart);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-line-partial{stroke-dasharray:4 4}
.chart-point{fill:var(--chart);stroke:var(--panel);stroke-width:2}
.chart-point-latest{fill:var(--panel);stroke:var(--chart);stroke-width:2}
.chart-point-label{fill:var(--text);font-size:11.5px;font-weight:600}
.chart-hit{fill:transparent}
.chart-stats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.chart-freshness{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chart-freshness-label{color:var(--muted);font-size:12.5px}
.error-what{margin:0 0 8px;font-size:14px;color:var(--text)}
.error-message{margin:0 0 16px;font-size:13px;color:var(--red);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.cause-chain{margin:0;padding-left:20px;color:var(--muted);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cause-chain li{margin-bottom:4px;word-break:break-word}
.state-blue{color:var(--link);background:#0d2440;border-color:var(--link)}
.state-neutral{color:var(--muted);background:var(--raised);border-color:var(--line)}
.unit{font-size:12px;font-weight:400;color:var(--muted)}
.row-failure{margin-top:5px;color:var(--red);font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-word}
.account-panel .section-title{margin:0}
.account-panel .stat-grid{margin:14px 0 0}
.cap-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.cap-label{font-size:12px;color:var(--muted)}
.cap-input{width:120px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--text);font:13px/1.4 inherit}
/* A field holding a credential wants room for one: 120px shows a dozen characters of a token and
   leaves the reader unable to see what they pasted. Capped at the container so it still wraps. */
.cap-input-wide{width:min(320px,100%)}
/* A label and the field it names wrap together. Left as separate flex items they wrap apart, which
   on a form whose fields are a GitHub token and two different credentials is not a cosmetic
   problem — it is an invitation to paste one into the other. */
.cap-field{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cap-input:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.cap-submit{padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);color:var(--text);font:600 12.5px/1.4 inherit;cursor:pointer}
.cap-submit:hover{border-color:var(--link)}
.cap-submit:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.cap-submit-link{display:inline-block;text-decoration:none}
.cap-submit-link:hover{text-decoration:none}
.cap-help{flex-basis:100%;margin:2px 0 0;color:var(--muted);font-size:11.5px}
.cap-help strong{color:var(--text)}
/* The pages set no inline style attributes: the Content-Security-Policy is style-src 'self', which
   blocks them, so a layout rule written inline would silently not apply in a browser. */
.read-at{margin-top:18px}
@media(max-width:640px){.topbar{height:auto;padding:10px 16px;flex-wrap:wrap;gap:10px}.topbar nav{flex-wrap:wrap;gap:12px}}
.footer{max-width:1040px;margin:0 auto;padding:18px 24px 28px;display:flex;gap:18px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.back-link{display:inline-block;margin-bottom:14px;font-size:12.5px}
.repository-heading,.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.repository-description,.pull-request-body{margin:0 0 12px;white-space:pre-wrap;word-break:break-word}
.badge-row,.filter-row{display:flex;gap:8px;flex-wrap:wrap}
.resource-link{display:inline-block;border:1px solid var(--line);border-radius:var(--radius);padding:7px 11px;overflow-wrap:anywhere;background:var(--raised)}
.filter-row{margin:0 0 14px}
.row-title{display:block;font-weight:600;margin-bottom:3px}
.row-note{display:block;color:var(--muted);font-size:11.5px}
.pagination{display:flex;justify-content:flex-end;gap:8px;margin:14px 0 0}
.title-row h1{margin-bottom:4px}
.count-chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:0 7px;color:var(--muted);font-size:11px}
/* On a phone a six-column table has about sixty pixels a column, which is not a narrow table — it is
   an unreadable one, with every heading set one letter to a line. Below 640px each row becomes a small
   card instead: the header row is dropped and every cell carries its own label, taken from the
   data-label the page renders on it. Nothing is hidden, nothing scrolls sideways, and each value is
   read beside the word that says what it is. */
@media(max-width:640px){
  .repository-heading,.title-row{flex-direction:column}
  dl.facts{grid-template-columns:1fr;gap:3px}
  dl.facts dd{margin-bottom:9px}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:auto}
  .table-wrap thead{display:none}
  .table-wrap tr{border-bottom:1px solid var(--line);padding:6px 0}
  .table-wrap tr:last-child{border-bottom:0}
  /* minmax(0,1fr), not 1fr: a grid track's automatic minimum is its content's minimum, so a plain
     1fr would refuse to go narrower than the longest repository name and push the card off a small
     phone. Zero lets the track shrink and the text inside it wrap instead. */
  .table-wrap td{border-bottom:0;padding:5px 14px;display:grid;grid-template-columns:minmax(84px,32%) minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;justify-items:start}
  .table-wrap td::before{content:attr(data-label);grid-column:1;grid-row:1;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;line-height:1.5}
  /* Cells routinely hold more than one part — an operation name and the account under it, a reason
     and the failure text below it, a method badge and a path. Every part belongs in the value column;
     left to auto-placement the second part lands under the LABEL instead, reading as though it were
     labelling the row beneath it. */
  .table-wrap td > *{grid-column:2;max-width:100%}
  /* A cell the page rendered no label for spans the row rather than leaving an empty column. */
  .table-wrap td:not([data-label]){display:block}
}