:root {
  color-scheme: light;

  --ground:       #fff;
  --panel:        #fff;
  --panel-head:   #f5f5f5;
  --chrome:       #fbfcfc;
  --rule:         #ddd;
  --rule-soft:    #f0f3f3;
  --hover:        #eef2f3;
  --active:       #e6ecee;

  --ink:          #333;
  --ink-muted:    #777;
  --slate:        #455860;
  --slate-dim:    #78929e;
  --link:         #78929e;
  --link-hover:   #303d42;

  --code-bg:      #f4f5f6;
  --code-ink:     #52616b;
  --input-bg:     #fff;
  --input-edge:   #ccc;

  --btn-bg:       #455860;
  --btn-edge:     transparent;
  --btn-ink:      #fff;
  --btn-hover:    #303d42;

  --bad:          #b23b32;
  --bad-bg:       #fdecea;
  --bad-ink:      #6b241e;
  --good:         #2e7d32;
  --good-bg:      #eaf6ec;
  --good-ink:     #1e4620;
  --warn:         #e6a700;
  --warn-bg:      #fff8e1;
  --warn-ink:     #6b5411;

  --tag-bg:       #eceff0;
  --tag-ink:      #52616b;


  --flag-filter:  none;

  --radius:       4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground:      #12161a;
    --panel:       #191e24;
    --panel-head:  #1d242a;
    --chrome:      #161b20;
    --rule:        #2a3138;
    --rule-soft:   #222930;
    --hover:       #1e252b;
    --active:      #212a31;

    --ink:         #dde3e7;
    --ink-muted:   #8d9aa2;
    --slate:       #9fbccb;
    --slate-dim:   #6d8794;
    --link:        #8fb8cb;
    --link-hover:  #bcd9e6;

    --code-bg:     #1f262c;
    --code-ink:    #a8c4d1;
    --input-bg:    #10151a;
    --input-edge:  #2a3138;

    --btn-bg:      #33424a;
    --btn-edge:    #38474f;
    --btn-ink:     #e6edf1;
    --btn-hover:   #415359;

    --bad:         #e0796d;
    --bad-bg:      #2a1512;
    --bad-ink:     #f3c5bd;
    --good:        #74c47c;
    --good-bg:     #13251a;
    --good-ink:    #b6ddb9;
    --warn:        #d8a83c;
    --warn-bg:     #2a2214;
    --warn-ink:    #e8d5a4;

    --tag-bg:      #232b32;
    --tag-ink:     #a8bcc6;

    --flag-filter: brightness(.9) contrast(.95);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ground:      #12161a;
  --panel:       #191e24;
  --panel-head:  #1d242a;
  --chrome:      #161b20;
  --rule:        #2a3138;
  --rule-soft:   #222930;
  --hover:       #1e252b;
  --active:      #212a31;

  --ink:         #dde3e7;
  --ink-muted:   #8d9aa2;
  --slate:       #9fbccb;
  --slate-dim:   #6d8794;
  --link:        #8fb8cb;
  --link-hover:  #bcd9e6;

  --code-bg:     #1f262c;
  --code-ink:    #a8c4d1;
  --input-bg:    #10151a;
  --input-edge:  #2a3138;

  --btn-bg:      #33424a;
  --btn-edge:    #38474f;
  --btn-ink:     #e6edf1;
  --btn-hover:   #415359;

  --bad:         #e0796d;
  --bad-bg:      #2a1512;
  --bad-ink:     #f3c5bd;
  --good:        #74c47c;
  --good-bg:     #13251a;
  --good-ink:    #b6ddb9;
  --warn:        #d8a83c;
  --warn-bg:     #2a2214;
  --warn-ink:    #e8d5a4;

  --tag-bg:      #232b32;
  --tag-ink:     #a8bcc6;

  --flag-filter: brightness(.9) contrast(.95);
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: optional;
}
@font-face {
  font-family: 'Arvo';
  src: url('/fonts/arvo-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: 'Arvo';
  src: url('/fonts/arvo-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: optional;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }

h1, h2, h3, h4 { font-family: Arvo, Georgia, serif; color: var(--slate); margin: 0 0 .5em; line-height: 1.25; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 22px; }
li { margin-bottom: 4px; }
hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 16px 0; }

code, pre { font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 90%; }
code { background: var(--code-bg); padding: .12em .4em; border-radius: var(--radius); color: var(--code-ink); }

.container { max-width: 1170px; margin: 0 auto; padding: 0 16px; }

.navbar {
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.navbar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; min-height: 52px; }
.navbar-brand {
  font-family: Arvo, Georgia, serif;
  font-size: 21px;
  color: var(--slate);
  margin-right: auto;
}
.navbar-brand:hover { color: var(--link-hover); text-decoration: none; }
.navbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.navbar nav a {
  display: block;
  padding: 9px 13px;
  color: var(--ink-muted);
  border-radius: var(--radius);
}
.navbar nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.navbar nav a[aria-current='page'] { background: var(--active); color: var(--slate); font-weight: 600; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  margin-left: 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--hover); color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; fill: currentColor; }

.theme-toggle .i-dark, .theme-toggle .i-auto { display: none; }
:root[data-theme="dark"] .theme-toggle .i-light { display: none; }
:root[data-theme="dark"] .theme-toggle .i-auto { display: inline; }
:root[data-theme="light"] .theme-toggle .i-light { display: none; }
:root[data-theme="light"] .theme-toggle .i-dark { display: inline; }
.theme-toggle .label::after { content: 'Dark'; }
:root[data-theme="light"] .theme-toggle .label::after { content: 'Dark'; }
:root[data-theme="dark"] .theme-toggle .label::after { content: 'Auto'; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .label::after { content: 'Light'; }
  :root:not([data-theme]) .theme-toggle .i-light { display: none; }
  :root:not([data-theme]) .theme-toggle .i-dark { display: inline; }
}

:root.no-js .theme-toggle { display: none; }

.page-header {
  padding-bottom: 10px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.page-header h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead { font-size: 16px; color: var(--ink-muted); margin: -8px 0 20px; }
.muted { color: var(--ink-muted); font-size: 92%; }

.flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  object-fit: contain;
  object-position: center;
  vertical-align: -2px;
  margin-right: 2px;
  filter: var(--flag-filter);
}
.page-header .flag { width: 32px; height: 22px; vertical-align: -3px; }

.row { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 4px; }
@media (min-width: 900px) {
  .row.halves { grid-template-columns: 1fr 1fr; }
  .row.thirds { grid-template-columns: 1fr 1fr 1fr; }
  .row.sidebar { grid-template-columns: 210px 1fr; align-items: start; }
}

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 20px;
}
.panel > .panel-heading {
  padding: 10px 15px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: Arvo, Georgia, serif;
  font-size: 14px;
  color: var(--slate);
}
.panel > .panel-body { padding: 15px; }
.panel > .panel-body > :first-child { margin-top: 0; }
.panel > .panel-body > :last-child { margin-bottom: 0; }
.panel > .table { margin-bottom: 0; }

.table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.table th, .table td {
  padding: 8px 10px;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.table > thead th { border-top: 0; border-bottom: 1px solid var(--rule); color: var(--ink-muted);
                    font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.table tbody tr:first-child td, .table tr:first-child th { border-top: 0; }
.table th { font-weight: 600; }
.table td.num, .table th.num { text-align: right; }
.panel > .table th:first-child, .panel > .table td:first-child { padding-left: 15px; }
.panel > .table th:last-child,  .panel > .table td:last-child  { padding-right: 15px; }

.table.kv th { width: 34%; color: var(--ink-muted); font-weight: 400; }
.table-scroll { overflow-x: auto; }

.verdict {
  padding: 13px 16px;
  margin: 0 0 20px;
  border: 1px solid var(--rule);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--panel);
}
.verdict.bad  { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad-ink); }
.verdict.good { background: var(--good-bg); border-color: var(--good); color: var(--good-ink); }
.verdict.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.verdict strong { color: inherit; }
.verdict a { color: inherit; text-decoration: underline; }

.yes { color: var(--bad);  font-weight: 600; }
.no  { color: var(--good); font-weight: 600; }

.tag {
  display: inline-block;
  padding: .15em .55em;
  border-radius: 10px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tag.bad  { background: var(--bad-bg);  color: var(--bad-ink); }
.tag.good { background: var(--good-bg); color: var(--good-ink); }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }

.btn {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--btn-edge);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: inherit;
  line-height: 1.45;
  cursor: pointer;
}
.btn:hover, .btn:focus { background: var(--btn-hover); color: var(--btn-ink); text-decoration: none; }
.btn.btn-xs { padding: 2px 9px; font-size: 12px; }

.btn.btn-danger { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-ink); }
.btn.btn-danger:hover, .btn.btn-danger:focus { background: var(--bad-ink); color: var(--bad-bg); }
.btn[disabled], .btn.disabled { background: var(--tag-bg); color: var(--ink-muted); border-color: var(--rule); cursor: not-allowed; }

.lookup-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.lookup-form input[type=search] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--input-edge);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  background: var(--input-bg);
}
.lookup-form input[type=search]::placeholder { color: var(--ink-muted); }
.lookup-form input[type=search]:focus { outline: 2px solid var(--slate-dim); outline-offset: -1px; }

textarea, input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 8px 12px; font: inherit; color: inherit;
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--radius);
}
label { display: block; margin-bottom: 4px; color: var(--ink-muted); }
.field { margin-bottom: 14px; }

.table form { margin: 0; }

.table td.action { width: 1%; white-space: nowrap; text-align: right; }

.table th.date, .table td.date { width: 1%; white-space: nowrap; }

.wrap-any { overflow-wrap: anywhere; }

.qr-box {
  display: inline-block; padding: 10px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
}
.qr-box svg { display: block; width: 190px; height: 190px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.sidenav { list-style: none; margin: 0; padding: 0; }
.sidenav li { margin: 0; }
.sidenav a { display: block; padding: 7px 12px; border-radius: var(--radius); color: var(--ink-muted); }
.sidenav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }

.site-footer {
  margin-top: 44px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--rule);
  background: var(--chrome);
}
.site-footer h4 { margin-bottom: 4px; }
.site-footer .hline { width: 42px; border-top: 2px solid var(--rule); margin-bottom: 12px; }
.site-footer .icons { display: flex; gap: 18px; }
.site-footer .icons a { color: var(--slate-dim); display: inline-flex; }
.site-footer .icons a:hover { color: var(--link-hover); }
.site-footer .icons svg { width: 26px; height: 26px; fill: currentColor; }
.site-footer .brandword { font-family: Arvo, Georgia, serif; color: var(--slate); }

.pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pager .muted { margin-left: auto; }

.chart { margin: 0 0 18px; }
.chart:last-child { margin-bottom: 0; }
.chart-title { font-size: 13px; color: var(--ink-muted); margin-bottom: 2px; display: flex;
               align-items: baseline; gap: 8px; justify-content: space-between; }
.chart-value { color: var(--ink); font-size: 17px; font-weight: 600; }
.chart-unit { color: var(--ink-muted); font-size: 12px; font-weight: 400; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--rule-soft); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--slate); stroke-width: 2;
              stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: color-mix(in srgb, var(--slate) 16%, transparent); stroke: none; }
.chart-last { fill: var(--slate); }
.chart-foot { font-size: 12px; margin-top: 3px; }

.ns-graph { display: block; max-width: 100%; height: auto; background: #fff;
            padding: 6px; border: 1px solid var(--rule); border-radius: 3px; }