/* Kessler@home: ports site/assets/css/site.css onto BOINC's Bootstrap 3 pages.
   Loaded after bootstrap.min.css. Light and dark themes share one set of
   rules; only the variables change. The theme comes from <html data-theme>
   (set from the kh_theme cookie, see project.inc and theme.php) or, with no
   attribute, from the OS via prefers-color-scheme. */

:root {
  color-scheme: light;
  --kh-bg: #ffffff;
  --kh-text: #333333;
  --kh-muted: #555555;
  --kh-link: #2a6496;
  --kh-link-hover: #1d4a70;
  --kh-border: #dddddd;
  --kh-border-soft: #eeeeee;
  --kh-panel-bg: #ffffff;
  --kh-panel-head: #f5f5f5;
  --kh-stripe: #f9f9f9;
  --kh-hover: #f5f5f5;
  --kh-input-bg: #ffffff;
  --kh-input-border: #cccccc;
  --kh-code-bg: #f5f5f5;
  --kh-code-text: #c7254e;
  --kh-footer-bg: #f8f8f8;
  --kh-nav-bg: #222222;
  --kh-nav-border: #080808;
  --kh-nav-text: #c8c8c8;
  --kh-space: #050916;
  --kh-accent: #2e7d32;
  --kh-join-bg: #f3f9f3;
  --kh-join-border: #c9dfc9;
  --kh-join-head: #1f5c22;
  --kh-table-bg: #ffffff;
  --kh-primary: #337ab7;
  --kh-info-bg: #d9edf7;
  --kh-info-text: #31708f;
  --kh-success-bg: #dff0d8;
  --kh-success-text: #3c763d;
  --kh-warning-bg: #fcf8e3;
  --kh-warning-text: #8a6d3b;
  --kh-danger-bg: #f2dede;
  --kh-danger-text: #a94442;
  --kh-max: 1170px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --kh-bg: #14171d;
  --kh-text: #d7dbe2;
  --kh-muted: #9aa3b2;
  --kh-link: #7fb2e6;
  --kh-link-hover: #a9cdf1;
  --kh-border: #343a46;
  --kh-border-soft: #2a2f3a;
  --kh-panel-bg: #1c2029;
  --kh-panel-head: #242933;
  --kh-stripe: #1f242e;
  --kh-hover: #262c38;
  --kh-input-bg: #10131a;
  --kh-input-border: #3d4453;
  --kh-code-bg: #0e1116;
  --kh-code-text: #f0a0b4;
  --kh-footer-bg: #11141a;
  --kh-nav-bg: #181b21;
  --kh-nav-border: #000000;
  --kh-nav-text: #c8c8c8;
  --kh-join-bg: #172117;
  --kh-join-border: #2b4a2e;
  --kh-join-head: #8fd394;
  --kh-table-bg: #1c2029;
  --kh-primary: #2b5f8f;
  --kh-info-bg: #1b3340;
  --kh-info-text: #9fd3ea;
  --kh-success-bg: #1b3320;
  --kh-success-text: #a3d9a8;
  --kh-warning-bg: #3a3214;
  --kh-warning-text: #e6cf7a;
  --kh-danger-bg: #3d1f21;
  --kh-danger-text: #f0a3a3;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --kh-bg: #14171d;
    --kh-text: #d7dbe2;
    --kh-muted: #9aa3b2;
    --kh-link: #7fb2e6;
    --kh-link-hover: #a9cdf1;
    --kh-border: #343a46;
    --kh-border-soft: #2a2f3a;
    --kh-panel-bg: #1c2029;
    --kh-panel-head: #242933;
    --kh-stripe: #1f242e;
    --kh-hover: #262c38;
    --kh-input-bg: #10131a;
    --kh-input-border: #3d4453;
    --kh-code-bg: #0e1116;
    --kh-code-text: #f0a0b4;
    --kh-footer-bg: #11141a;
    --kh-nav-bg: #181b21;
    --kh-nav-border: #000000;
    --kh-nav-text: #c8c8c8;
    --kh-join-bg: #172117;
    --kh-join-border: #2b4a2e;
    --kh-join-head: #8fd394;
    --kh-table-bg: #1c2029;
    --kh-primary: #2b5f8f;
    --kh-info-bg: #1b3340;
    --kh-info-text: #9fd3ea;
    --kh-success-bg: #1b3320;
    --kh-success-text: #a3d9a8;
    --kh-warning-bg: #3a3214;
    --kh-warning-text: #e6cf7a;
    --kh-danger-bg: #3d1f21;
    --kh-danger-text: #f0a3a3;
  }
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kh-text);
  background: var(--kh-bg);
}
a { color: var(--kh-link); }
a:hover { color: var(--kh-link-hover); }

/* page_head() wraps everything in .container-fluid; make it full-bleed and
   let the banner, navbar and footer span the viewport. */
body > .container-fluid { padding-left: 0; padding-right: 0; }

/* ---------- banner ---------- */
.kh-banner { position: relative; height: 240px; overflow: hidden; background: var(--kh-space); }
/* The image is 2880 layout px wide with the Earth 305px right of its center.
   Centring it puts the Earth's right limb ~40px past the 1170px content column
   on wide screens; below 1170px the shift tracks the viewport edge instead. */
.kh-banner__img {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; display: block;
  transform: translateX(calc(-50% + var(--kh-banner-shift, 0px)));
}
@media (max-width: 1169px) { .kh-banner { --kh-banner-shift: calc(50vw - 585px); } }
.kh-banner__text {
  position: relative; max-width: var(--kh-max); margin: 0 auto; padding: 0 16px; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.kh-banner__title, .kh-banner__title:hover, .kh-banner__title:focus {
  color: #ffffff; text-decoration: none;
  font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: 0.3px;
}
.kh-banner__tagline { font-size: 18px; color: #c6d4ec; max-width: 440px; margin: 0; }
.kh-banner__title, .kh-banner__tagline { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

/* ---------- navbar ---------- */
.navbar-inverse {
  background: var(--kh-nav-bg); border: 0; border-bottom: 1px solid var(--kh-nav-border);
  border-radius: 0; margin-bottom: 0; min-height: 52px;
}
.navbar-inverse > .container-fluid { max-width: var(--kh-max); margin: 0 auto; padding: 0 16px; }
.navbar-inverse .navbar-collapse { padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
  .navbar-inverse .navbar-nav { margin-left: -12px; }
  .navbar-inverse .navbar-nav.navbar-right { margin-left: 0; margin-right: 0; }
}
.navbar-inverse .navbar-nav > li > a { color: var(--kh-nav-text); padding: 16px 12px; }
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus { color: #ffffff; background: transparent; }
.navbar-inverse .navbar-toggle { border-color: #555; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: #333; }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: var(--kh-nav-border); }
.dropdown-menu { min-width: 220px; padding: 6px 0; background: var(--kh-panel-bg); border: 1px solid var(--kh-border); box-shadow: 0 6px 12px rgba(0,0,0,0.18); }
.dropdown-menu > li > a { padding: 8px 16px; color: var(--kh-text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--kh-hover); color: var(--kh-text); }
.dropdown-menu .divider { background: var(--kh-border); }
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: var(--kh-nav-text); }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover { color: #ffffff; }
}

/* ---------- main ---------- */
.kh-main { max-width: var(--kh-max); margin: 0 auto; padding: 24px 16px 40px; }
.kh-page-title { margin: 0 0 20px; font-size: 26px; font-weight: 600; }
.kh-columns { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: flex-start; }
.kh-col-main { flex: 999 1 560px; min-width: 0; }
.kh-col-side { flex: 1 1 320px; min-width: 0; }

/* ---------- panels ---------- */
.panel, .panel-primary, .panel-default, .panel-info {
  background: var(--kh-panel-bg); border: 1px solid var(--kh-border); border-radius: 4px; box-shadow: none; margin-bottom: 24px;
}
.panel-footer { background: var(--kh-panel-head); border-color: var(--kh-border); }
.panel-primary > .panel-heading, .panel-default > .panel-heading, .panel-info > .panel-heading {
  background: var(--kh-panel-head); border-color: var(--kh-border); color: var(--kh-text);
  padding: 10px 16px;
}
.panel-title, .panel-heading h1.panel-title { font-size: 17px; font-weight: 600; margin: 0; }
.panel-body { padding: 16px 20px 20px; }
.panel-body p { margin: 0 0 12px; }
.panel-body p:last-child { margin-bottom: 0; }
.kh-muted { color: var(--kh-muted); font-size: 14px; }

/* ---------- join box ---------- */
.kh-join {
  margin-top: 8px; padding: 16px 18px; border-radius: 4px;
  background: var(--kh-join-bg); border: 1px solid var(--kh-join-border);
}
.kh-join h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--kh-join-head); }
.kh-join p { margin: 0 0 10px; }
.kh-join .small { font-size: 14px; color: var(--kh-muted); }
.btn.kh-btn, .btn.kh-btn:hover, .btn.kh-btn:focus {
  font-size: 16px; font-weight: 600; color: #ffffff; background: var(--kh-accent); border: 0;
  border-radius: 4px; padding: 10px 22px;
}
.btn.kh-btn:hover { filter: brightness(0.92); }

/* ---------- steps, news, status ---------- */
.kh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.kh-steps h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.kh-steps p { font-size: 14px; margin: 0; }

.kh-news h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.kh-news p { font-size: 14px; margin: 0 0 6px; }
.kh-news__date { font-size: 13px !important; color: var(--kh-muted); }
.kh-news__links { border-top: 1px solid var(--kh-border-soft); margin-top: 12px; padding-top: 12px; font-size: 14px; }
.kh-news__links a { margin-right: 16px; }
.panel-body .lead { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

.kh-status { margin: 0; padding-left: 20px; font-size: 14px; }
.kh-status li { margin-bottom: 6px; }

/* ---------- footer ---------- */
.kh-footer { border-top: 1px solid var(--kh-border); background: var(--kh-footer-bg); }
.kh-footer__inner {
  max-width: var(--kh-max); margin: 0 auto; padding: 18px 16px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 13px; color: var(--kh-muted);
}

/* ---------- Bootstrap components on BOINC's own pages ----------
   Light values equal Bootstrap's defaults; dark values come from the
   variables above. */
hr { border-color: var(--kh-border); }
.text-muted, .help-block { color: var(--kh-muted); }
.page-header { border-color: var(--kh-border-soft); }
/* BOINC wraps every table in <div class="table">, so Bootstrap's nested
   ".table .table" rule (white) applies; match its specificity. */
.table, .table .table { background: var(--kh-table-bg); color: var(--kh-text); }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-color: var(--kh-border); }
.table > thead > tr > th { border-bottom-color: var(--kh-border); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > th { border-color: var(--kh-border); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--kh-stripe); }
.table-hover > tbody > tr:hover { background: var(--kh-hover); }
.table > tbody > tr.active > td, .table > tbody > tr > td.active { background: var(--kh-hover); }
.table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info,
.table > thead > tr > th.info, .table > thead > tr.info > th, .bg-info, .alert-info { background: var(--kh-info-bg); color: var(--kh-info-text); border-color: transparent; }
.table > tbody > tr.success > td, .table > tbody > tr > td.success, .bg-success, .alert-success { background: var(--kh-success-bg); color: var(--kh-success-text); border-color: transparent; }
.table > tbody > tr.warning > td, .table > tbody > tr > td.warning, .bg-warning, .alert-warning { background: var(--kh-warning-bg); color: var(--kh-warning-text); border-color: transparent; }
.table > tbody > tr.danger > td, .table > tbody > tr > td.danger, .bg-danger, .alert-danger { background: var(--kh-danger-bg); color: var(--kh-danger-text); border-color: transparent; }
.bg-primary, .table > thead > tr > th.bg-primary, .table > tbody > tr > th.bg-primary { background: var(--kh-primary); color: #ffffff; }
/* Forum category rows (forum_index.php uses <th class="info">): same look as the
   column-heading row above them. */
.table > tbody > tr > th.info, .table > thead > tr > th.info { background: var(--kh-primary); color: #ffffff; }
.panel-body, .panel > .panel-body + .table, .panel > .table + .panel-body { border-color: var(--kh-border); }
.progress { background: var(--kh-panel-head); }
.thumbnail { background: var(--kh-panel-bg); border-color: var(--kh-border); }
.well { background: var(--kh-panel-head); border-color: var(--kh-border); }
.form-control, select, textarea, input[type="text"], input[type="password"], input[type="email"] {
  background: var(--kh-input-bg); color: var(--kh-text); border-color: var(--kh-input-border);
}
.form-control::placeholder { color: var(--kh-muted); }
.form-control[disabled], .form-control[readonly] { background: var(--kh-panel-head); }
.input-group-addon { background: var(--kh-panel-head); color: var(--kh-text); border-color: var(--kh-input-border); }
.btn-default, .btn-default:focus { background: var(--kh-panel-bg); color: var(--kh-text); border-color: var(--kh-input-border); }
.btn-default:hover, .btn-default:active, .btn-default.active { background: var(--kh-hover); color: var(--kh-text); border-color: var(--kh-input-border); }
.list-group-item { background: var(--kh-panel-bg); border-color: var(--kh-border); color: var(--kh-text); }
.nav-tabs { border-bottom-color: var(--kh-border); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background: var(--kh-panel-bg); color: var(--kh-text); border-color: var(--kh-border); border-bottom-color: transparent;
}
.nav > li > a:hover, .nav > li > a:focus { background: var(--kh-hover); }
.pagination > li > a, .pagination > li > span { background: var(--kh-panel-bg); border-color: var(--kh-border); color: var(--kh-link); }
.pagination > li > a:hover, .pagination > li > span:hover { background: var(--kh-hover); border-color: var(--kh-border); color: var(--kh-link-hover); }
.breadcrumb { background: var(--kh-panel-head); }
.modal-content, .popover { background: var(--kh-panel-bg); color: var(--kh-text); border-color: var(--kh-border); }
.modal-header, .modal-footer { border-color: var(--kh-border); }
.close { color: var(--kh-text); text-shadow: none; }
pre, code { background: var(--kh-code-bg); color: var(--kh-code-text); border-color: var(--kh-border); }
pre { color: var(--kh-text); }
blockquote { border-left-color: var(--kh-border); color: var(--kh-muted); }
.label-default { background: var(--kh-muted); }
img.icon { background: transparent; }

/* ---------- appearance page ---------- */
.kh-theme-option { display: block; font-weight: normal; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--kh-border); border-radius: 4px; cursor: pointer; }
.kh-theme-option:hover { background: var(--kh-hover); }
.kh-theme-option input { margin-right: 6px; }

/* ---------- content pages ---------- */
.kh-prose { max-width: 760px; }
.kh-prose h3 { font-size: 19px; font-weight: 600; margin: 24px 0 8px; }
.kh-prose p, .kh-prose li { margin-bottom: 10px; }
.kh-prose table { margin: 10px 0 16px; }

@media (max-width: 600px) {
  .kh-banner { height: 180px; --kh-banner-shift: calc(50vw - 439px); }
  .kh-banner::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(5, 9, 22, 0.75) 0%, rgba(5, 9, 22, 0.35) 70%, rgba(5, 9, 22, 0) 100%);
  }
  .kh-banner__text { z-index: 1; }
  .kh-banner__title { font-size: 36px; }
  .kh-banner__tagline { font-size: 16px; }
}