/* 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-green:#1f883d; --gh-green-hover:#1c8139; --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;

  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-green:#238636; --gh-green-hover:#29903b;

  --gh-header:#010409; --gh-bm-bg:rgba(56,139,253,.1); --gh-bm-ink:#4493f8; --gh-shadow:none;

  color-scheme: dark;

}

/* 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"] 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; green 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-green); 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-green-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 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); }