/* OxygenHub's look (oxygenhub#74), close to GitHub's: Primer colours,
   system fonts, rounded boxes, underline navigation, sentence case. It is
   the default, loaded over style.css: every rule is scoped to
   :root[data-look="github"], which base.html sets unless the browser chose
   the classic RetroPlay look with ?look=classic. Light and dark follow the
   theme toggle. */

:root[data-look="github"] {
  --bg:#ffffff; --panel:#ffffff; --soft:#f6f8fa; --ink:#1f2328; --mute:#59636e; --line:#d1d9e0; --dim:#818b98;
  --acc:#0969da; --acc-2:#0969da; --band:#f6f8fa; --band-ink:#1f2328; --band-acc:#0969da; --band-line:transparent; --now:#0969da; --now-ink:#ffffff;
  --ok:#1a7f37; --bad:#d1242f; --warn:#9a6700;
  --add:#dafbe1; --del:#ffebe9; --add-ink:#116329; --del-ink:#82071e;
  --sy-kw:#cf222e; --sy-str:#0a3069; --sy-num:#0550ae; --sy-cmt:#59636e; --sy-fn:#8250df; --sy-ty:#953800; --sy-var:#1f2328; --sy-const:#0550ae;
  --gh-btn:#f6f8fa; --gh-btn-hover:#eff2f5; --gh-btn-line:#d1d9e0; --gh-primary:#0969da; --gh-primary-hover:#0860ca; --gh-tab:#fd8c73;
  --gh-header:#f6f8fa; --gh-bm-bg:#ddf4ff; --gh-bm-ink:#0969da; --gh-shadow:0 1px 0 rgba(31,35,40,.04);
  --gh-font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --gh-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bd-mark:rgba(89,99,110,.16); --bd-lit:rgba(9,105,218,.7); --bd-link:rgba(9,105,218,.22);
  color-scheme: light;
}
:root[data-look="github"][data-theme="dark"] {
  --bg:#0d1117; --panel:#0d1117; --soft:#151b23; --ink:#f0f6fc; --mute:#9198a1; --line:#3d444d; --dim:#656c76;
  --acc:#4493f8; --acc-2:#4493f8; --band:#151b23; --band-ink:#f0f6fc; --band-acc:#4493f8; --now:#1f6feb; --now-ink:#ffffff;
  --ok:#3fb950; --bad:#f85149; --warn:#d29922;
  --add:rgba(46,160,67,.15); --del:rgba(248,81,73,.1); --add-ink:#aff5b4; --del-ink:#ffdcd7;
  --sy-kw:#ff7b72; --sy-str:#a5d6ff; --sy-num:#79c0ff; --sy-cmt:#9198a1; --sy-fn:#d2a8ff; --sy-ty:#ffa657; --sy-var:#f0f6fc; --sy-const:#79c0ff;
  --gh-btn:#212830; --gh-btn-hover:#262c36; --gh-btn-line:#3d444d; --gh-primary:#1f6feb; --gh-primary-hover:#388bfd;
  --gh-header:#010409; --gh-bm-bg:rgba(56,139,253,.1); --gh-bm-ink:#4493f8; --gh-shadow:none;
  color-scheme: dark;
  --bd-mark:rgba(145,152,161,.14); --bd-lit:rgba(0,240,255,.75); --bd-link:rgba(0,240,255,.28);
}

/* Type: the system stack at 14px, no capitals forced on anything. */
:root[data-look="github"] body { font: 14px/1.5 var(--gh-font); }
:root[data-look="github"] code, :root[data-look="github"] pre, :root[data-look="github"] kbd, :root[data-look="github"] .mono,
:root[data-look="github"] table.code td, :root[data-look="github"] .chip { font-family: var(--gh-mono); font-size: 12px; }
:root[data-look="github"] .px, :root[data-look="github"] .pxs { font-family: var(--gh-font); font-size: inherit; }
:root[data-look="github"] h2 { font-size: 16px; font-weight: 600; }
:root[data-look="github"] h3, :root[data-look="github"] th, :root[data-look="github"] dl.facts dt,
:root[data-look="github"] form.card label, :root[data-look="github"] .field label, :root[data-look="github"] .inbox-nav h3,
:root[data-look="github"] .tag, :root[data-look="github"] .kind, :root[data-look="github"] .vis, :root[data-look="github"] .runner-status,
:root[data-look="github"] .chain-state, :root[data-look="github"] aside.side h3 .side-edit {
  text-transform: none; letter-spacing: normal;
}
:root[data-look="github"] h3 { font-size: 14px; font-weight: 600; color: var(--ink); }
:root[data-look="github"] form.card label, :root[data-look="github"] .field label { font-size: 14px; font-weight: 600; color: var(--ink); }
:root[data-look="github"] dl.facts dt { font-size: 14px; color: var(--mute); padding-top: 0; }
:root[data-look="github"] th { font-size: 12px; font-weight: 600; color: var(--mute); }
:root[data-look="github"] a { color: var(--acc); }
:root[data-look="github"] kbd { border-radius: 6px; box-shadow: inset 0 -1px 0 var(--line); }

/* The header: GitHub's global bar; the site band becomes a quiet second row. */
:root[data-look="github"] header { background: var(--gh-header); border-bottom: 1px solid var(--line); padding: 12px 24px; gap: 12px; }
:root[data-look="github"] .brand { gap: 8px; }
:root[data-look="github"] .brand svg { height: 28px; }
:root[data-look="github"] .brand .px { font-size: 0; }
:root[data-look="github"] .brand .px::after { content: "OxygenHub"; font-size: 16px; font-weight: 600; color: var(--ink); }
:root[data-look="github"] form.find input { border-radius: 6px; background: var(--bg); padding: 5px 12px; font-size: 14px; }
:root[data-look="github"] form.find input:focus, :root[data-look="github"] form.card input:focus,
:root[data-look="github"] form.card textarea:focus, :root[data-look="github"] form.card select:focus {
  outline: 2px solid var(--acc); outline-offset: -1px;
}
:root[data-look="github"] header nav .theme-toggle { border-radius: 6px; border-color: var(--gh-btn-line); background: var(--gh-btn); }
:root[data-look="github"] header nav .bell .count { background: var(--acc); }
:root[data-look="github"] .band { background: var(--gh-header); border-bottom: 1px solid var(--line); padding: 0 24px; }
:root[data-look="github"] .band a { color: var(--ink); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 8px 12px; border: 0; }
:root[data-look="github"] .band a:first-child { border: 0; }
:root[data-look="github"] .band a:hover { background: var(--gh-btn-hover); border-radius: 6px; }
:root[data-look="github"] .band a.on { background: none; box-shadow: inset 0 -2px 0 var(--gh-tab); font-weight: 600; }
:root[data-look="github"] .band a.dim { color: var(--mute); opacity: 1; }
:root[data-look="github"] .band a.admin { color: var(--acc); }

/* Repository tabs: underline navigation. */
:root[data-look="github"] .tabs { background: var(--gh-header); }
:root[data-look="github"] .tabs-in { padding: 0 24px; gap: 4px; }
:root[data-look="github"] .tabs .crumb { font-size: 20px; padding: 14px 0 10px; }
:root[data-look="github"] .tabs a:not(.crumb a) { padding: 8px 10px; font-size: 14px; border-radius: 6px; }
:root[data-look="github"] .tabs a.on { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--gh-tab); border-radius: 0; font-weight: 600; }
:root[data-look="github"] .tabs a:hover { background: var(--gh-btn-hover); }
:root[data-look="github"] .tab-menu > summary { padding: 8px 10px; font-size: 14px; border-radius: 6px; }
:root[data-look="github"] .tab-menu > summary.on { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--gh-tab); border-radius: 0; font-weight: 600; }
:root[data-look="github"] .tab-menu > summary:hover { background: var(--gh-btn-hover); }
:root[data-look="github"] .tab-menu-list { border-radius: 6px; padding: 4px; }
:root[data-look="github"] .tabs .tab-menu-list a[aria-current] { box-shadow: inset 2px 0 0 var(--gh-tab); border-radius: 0 6px 6px 0; }
:root[data-look="github"] main { padding: 24px 24px 32px; }

/* Page headings. */
:root[data-look="github"] .head { border-image: none; border-bottom: 1px solid var(--line); margin: 0 0 16px; padding-bottom: 8px; }
:root[data-look="github"] .head h1 { font-size: 24px; font-weight: 400; color: var(--ink); }
:root[data-look="github"] .head h1 small { color: var(--mute); font-size: 14px; }

/* Buttons: grey, rounded, sentence case; the accent blue for the primary action. */
:root[data-look="github"] button, :root[data-look="github"] a.go, :root[data-look="github"] button.go, :root[data-look="github"] summary.go {
  font-family: var(--gh-font); font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: lowercase;
  background: var(--gh-btn); color: var(--ink); border: 1px solid var(--gh-btn-line); border-radius: 6px; padding: 5px 16px;
  box-shadow: var(--gh-shadow); line-height: 20px;
}
:root[data-look="github"] button::first-letter, :root[data-look="github"] a.go::first-letter, :root[data-look="github"] summary.go::first-letter { text-transform: uppercase; }
:root[data-look="github"] button:hover, :root[data-look="github"] a.go:hover, :root[data-look="github"] summary.go:hover { background: var(--gh-btn-hover); color: var(--ink); }
:root[data-look="github"] button.small, :root[data-look="github"] a.go.small, :root[data-look="github"] form.tiny button { padding: 2px 10px; font-size: 12px; }
:root[data-look="github"] form.card button[type=submit], :root[data-look="github"] form.card .primary, :root[data-look="github"] button.primary-btn {
  background: var(--gh-primary); color: #ffffff; border-color: rgba(31,35,40,.15);
}
:root[data-look="github"] form.card button[type=submit]:hover, :root[data-look="github"] button.primary-btn:hover { background: var(--gh-primary-hover); color: #fff; filter: none; }
:root[data-look="github"] button.danger-btn { color: var(--bad); }
:root[data-look="github"] button.linkish { background: none; border: 0; padding: 0; box-shadow: none; color: var(--acc); text-transform: none; }
/* The issue sidebar's actions are quiet rows, not buttons; their first
   letter is an icon, so the look's sentence-case trick must not apply. */
:root[data-look="github"] aside.side button.side-action { background: none; border: 0; box-shadow: none; padding: 5px 0; text-transform: none; font-size: 13px; font-weight: 600; color: var(--ink); }
:root[data-look="github"] aside.side button.side-action:hover { background: none; color: var(--acc); }
:root[data-look="github"] .side-empty button.linkish { font-size: 12px; }
:root[data-look="github"] .menu-actions .menu-action { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 6px 14px; text-transform: none; font-size: 13px; font-weight: 400; color: var(--ink); }
:root[data-look="github"] .menu-actions .menu-action:hover { background: var(--soft); }

/* Boxes: rounded, one border, rows divided inside. */
:root[data-look="github"] .panel, :root[data-look="github"] form.card, :root[data-look="github"] dl.facts, :root[data-look="github"] .table,
:root[data-look="github"] .filebox, :root[data-look="github"] .file-diff, :root[data-look="github"] .hist, :root[data-look="github"] ul.feed,
:root[data-look="github"] article.doc, :root[data-look="github"] .quickstart, :root[data-look="github"] .comment, :root[data-look="github"] .tl-card,
:root[data-look="github"] .lanes-board, :root[data-look="github"] .file-side, :root[data-look="github"] .strip, :root[data-look="github"] pre.msg,
:root[data-look="github"] .board-col, :root[data-look="github"] .card-item, :root[data-look="github"] li.hook, :root[data-look="github"] p.chain,
:root[data-look="github"] .clone-panel, :root[data-look="github"] .sheet, :root[data-look="github"] .empty {
  border-radius: 6px;
}
:root[data-look="github"] .table, :root[data-look="github"] .filebox, :root[data-look="github"] .file-diff, :root[data-look="github"] .hist,
:root[data-look="github"] ul.feed, :root[data-look="github"] .tl-card { overflow: hidden; }
:root[data-look="github"] ul.rows { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
:root[data-look="github"] ul.rows li { margin: 0; border: 0; border-top: 1px solid var(--line); padding: 12px 16px; }
:root[data-look="github"] ul.rows li:first-child { border-top: 0; }
:root[data-look="github"] ul.rows li:hover { background: var(--soft); }
:root[data-look="github"] ul.rows .name { font-size: 16px; font-weight: 600; }
:root[data-look="github"] ul.rows li.unread { box-shadow: inset 3px 0 0 var(--acc); }
:root[data-look="github"] th { background: var(--soft); padding: 8px 16px; }
:root[data-look="github"] td { padding: 8px 16px; }
:root[data-look="github"] tr:last-child > td { border-bottom: 0; }
:root[data-look="github"] tbody tr:hover > td { background: var(--soft); }
:root[data-look="github"] .filebox > header, :root[data-look="github"] .file-diff > header, :root[data-look="github"] .file-diff > summary,
:root[data-look="github"] .tl-head { background: var(--soft); }
:root[data-look="github"] article.doc { padding: 24px 32px; font-size: 16px; line-height: 1.5; }
:root[data-look="github"] article.doc h1 { font-size: 32px; font-weight: 600; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
:root[data-look="github"] article.doc h2 { font-size: 24px; font-weight: 600; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
:root[data-look="github"] article.doc pre { background: var(--soft); border: 0; border-radius: 6px; padding: 16px; }
:root[data-look="github"] article.doc code { background: color-mix(in srgb, var(--mute) 20%, transparent); border-radius: 6px; padding: .2em .4em; font-size: 85%; }
:root[data-look="github"] article.doc blockquote { border-left: 4px solid var(--line); }
:root[data-look="github"] .clone code, :root[data-look="github"] .cmds pre, :root[data-look="github"] .secret { border-radius: 6px; }

/* Forms. */
:root[data-look="github"] form.card input[type=text], :root[data-look="github"] form.card input[type=password], :root[data-look="github"] form.card input[type=email],
:root[data-look="github"] form.card input[type=search], :root[data-look="github"] form.card input[type=number], :root[data-look="github"] form.card input[type=url], :root[data-look="github"] form.card textarea,
:root[data-look="github"] form.card select, :root[data-look="github"] .field input, :root[data-look="github"] .field select, :root[data-look="github"] .field textarea,
:root[data-look="github"] .tiny-form input[type=text], :root[data-look="github"] .tiny-form select, :root[data-look="github"] .compare-bar input,
:root[data-look="github"] details.inline-edit input, :root[data-look="github"] details.inline-edit textarea, :root[data-look="github"] details.linecomment textarea {
  border-radius: 6px; background: var(--bg); padding: 5px 12px; font-size: 14px;
}

/* Labels, tags and status marks: pills. */
:root[data-look="github"] .tag, :root[data-look="github"] .label, :root[data-look="github"] .lbl, :root[data-look="github"] .kind,
:root[data-look="github"] .runner-status, :root[data-look="github"] .vis, :root[data-look="github"] .count-chip, :root[data-look="github"] .chain-link {
  border-radius: 2em; font-size: 12px; font-weight: 500; padding: 0 8px; line-height: 20px;
}
:root[data-look="github"] .lbl-bm { background: var(--gh-bm-bg); color: var(--gh-bm-ink); border-color: transparent; border-radius: 6px; font-family: var(--gh-mono); }
:root[data-look="github"] .tag.head { background: var(--now); color: var(--now-ink); }
:root[data-look="github"] .modes a, :root[data-look="github"] .diff-bar .modes a { border-radius: 6px; }

/* Avatars are round. */
:root[data-look="github"] img.avatar { border-radius: 50%; }
:root[data-look="github"] img.avatar.xl { border-radius: 50%; }

/* Settings and side navigation, as GitHub's: a highlighted row, not a rule. */
:root[data-look="github"] .section-nav a { border-left: 0; border-radius: 6px; color: var(--ink); padding: 6px 8px; }
:root[data-look="github"] .section-nav a:hover { background: var(--gh-btn-hover); }
:root[data-look="github"] .section-nav a.on { background: var(--gh-btn-hover); font-weight: 600; box-shadow: inset 3px 0 0 var(--acc); }

/* Footer: plain, small, muted. */
:root[data-look="github"] footer { background: none; border-top: 1px solid var(--line); }
:root[data-look="github"] footer .brand .px::after { font-size: 14px; color: var(--mute); }
:root[data-look="github"] .foot { font-size: 12px; color: var(--mute); }

/* History: GitHub's commit-list quiet. */
:root[data-look="github"] .lane { stroke: var(--line); }
/* The history and lanes graphs' dots and cards only: other graphs (the
   release trust graph) use .node on groups holding text. */
:root[data-look="github"] :is(circle, rect).node { fill: var(--panel); stroke: var(--mute); }
:root[data-look="github"] :is(circle, rect).node.head { fill: var(--acc); stroke: var(--acc); }
:root[data-look="github"] .chg .title { font-weight: 600; }

/* The file list is one box, as on GitHub. */
:root[data-look="github"] table.tree { border: 1px solid var(--line); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
:root[data-look="github"] table.tree td { padding: 8px 16px; }
:root[data-look="github"] table.tree td.g { color: var(--mute); }
:root[data-look="github"] table.tree tr:first-child > td { border-top: 0; }

/* Form controls everywhere get the look's rounding and focus ring, over
   the older per-place rules (oxygenhub#87). */
:root[data-look="github"] :is(input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input:not([type]), textarea, select) {
  border-radius: 6px; border-color: var(--line); background-color: var(--bg); color: var(--ink);
}
:root[data-look="github"] :is(input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input:not([type]), textarea, select):focus {
  outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}
:root[data-look="github"] select:not([multiple]) { padding-right: 30px; }
:root[data-look="github"] button.menu-item.menu-pick { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 8px 12px; text-transform: none; font-size: 13px; font-weight: 400; text-align: left; }
:root[data-look="github"] button.menu-item.menu-pick:hover { background: var(--soft); }
/* The tree under its shaded head (#152): the head takes the top corners. */
:root[data-look="github"] .tree-box .tree-head + table.tree { border-top-left-radius: 0; border-top-right-radius: 0; }
:root[data-look="github"] .side-card > h3 { font-size: 14px; }
:root[data-look="github"] table.tree td.g.ic-dir { color: #54aeff; }
/* Lists inside a card (#155) take the card's border, not their own. */
:root[data-look="github"] .card-box > ul.rows, :root[data-look="github"] .card-box > ul.feed { border: 0; border-radius: 0; }
/* The page's primary action (#161), as the GitHub look's primary buttons. */
:root[data-look="github"] a.go.primary, :root[data-look="github"] summary.go.primary { background: var(--gh-primary); color: #ffffff; border-color: rgba(31,35,40,.15); }
:root[data-look="github"] a.go.primary:hover, :root[data-look="github"] summary.go.primary:hover { background: var(--gh-primary-hover); color: #ffffff; filter: none; }
:root[data-look="github"] .clone-pop[open] > summary.go.primary { background: var(--gh-primary-hover); }
:root[data-look="github"] :is(.panel, form.card) > h2:first-child,
:root[data-look="github"] :is(.panel, form.card) > input[type=hidden]:first-child + h2 { border-radius: 6px 6px 0 0; font-size: 16px; }

/* Copy buttons (#338) keep their glyph shape in this look. */
:root[data-look="github"] button.copy-btn { padding: 0; width: 32px; min-height: 30px; background: var(--gh-btn); color: var(--mute); box-shadow: none; text-transform: none; }
:root[data-look="github"] button.copy-btn:hover { background: var(--gh-btn-hover); color: var(--ink); }
:root[data-look="github"] button.copy-btn.copied { color: var(--ok); }
:root[data-look="github"] .clone > button.copy-btn, :root[data-look="github"] .drop-clone > button.copy-btn { border-radius: 0 6px 6px 0; }
:root[data-look="github"] .cmds > button.copy-btn { width: 28px; min-height: 28px; border-radius: 6px; }
:root[data-look="github"] :is(.clone, .drop-clone) > input { border-top-right-radius: 0; border-bottom-right-radius: 0; }