/* Resets and element defaults, drawn the way WinForms controls draw on Windows 10. */

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: var(--t-base);
  color: var(--c-text);
  background: var(--c-workspace);
  line-height: 1.35;
  -webkit-font-smoothing: auto;
}

h1 { font-size: var(--t-base); font-weight: 400; margin: 0; }
h2 { font-size: var(--t-md); font-weight: 600; margin: 0 0 var(--s-2); }
h3 { font-size: var(--t-base); font-weight: 600; margin: 0 0 var(--s-1); }
h4 { font-size: var(--t-base); font-weight: 600; margin: 0 0 var(--s-1); }
p { margin: 0 0 var(--s-2); }
ul, ol { margin: 0 0 var(--s-2); padding-left: 20px; }
li { margin-bottom: 2px; }
small { font-size: var(--t-xs); color: var(--c-text-gray); }
code { font-family: var(--font-mono); font-size: 0.95em; }

a { color: var(--c-link); text-decoration: underline; }
a:hover { color: var(--c-error); }

table { border-collapse: collapse; width: 100%; background: var(--c-window); }
th, td { text-align: left; padding: 3px 6px; border: 1px solid var(--c-grid-line); vertical-align: middle; height: 22px; }
th { font-weight: 400; background: var(--c-control); border-bottom: 1px solid var(--c-button-border); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

input, select, textarea, button {
  font: inherit;
  color: var(--c-text);
}

input, select, textarea {
  border: 1px solid var(--c-input-border);
  border-radius: 0;
  padding: 2px 4px;
  background: var(--c-window);
  min-width: 0;
  min-height: var(--control-height);
}
select { padding: 1px 2px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-highlight); }
input:disabled, select:disabled, textarea:disabled { background: var(--c-control); color: var(--c-text-gray); }
input[type="checkbox"], input[type="radio"] { width: 13px; height: 13px; min-height: 0; padding: 0; margin: 0 5px 0 0; vertical-align: -2px; }
input[type="search"]::-webkit-search-decoration { display: none; }

button {
  cursor: default;
  border: 1px solid var(--c-button-border);
  border-radius: 0;
  padding: 2px 12px;
  min-height: var(--control-height);
  background: var(--c-button-face);
  font-weight: 400;
  line-height: 1.3;
}
button:hover { background: var(--c-button-hover); border-color: var(--c-button-hover-border); }
button:active { background: #cce4f7; border-color: #005499; }
button:focus-visible { outline: 1px dotted var(--c-text); outline-offset: -4px; }
button:disabled, button:disabled:hover { background: #cccccc; border-color: #bfbfbf; color: var(--c-text-gray); }
button.primary { border: 1px solid var(--c-highlight); box-shadow: inset 0 0 0 1px var(--c-highlight); }
button.primary:hover { background: var(--c-button-hover); }
button.danger { color: var(--c-error); }
button.link { border: none; background: none; color: var(--c-link); padding: 0; min-height: 0; text-decoration: underline; cursor: pointer; box-shadow: none; }
button.link:hover { color: var(--c-error); background: none; }

.error { color: var(--c-error); }
.empty, .loading { color: var(--c-text-gray); }
.muted { color: var(--c-text-gray); }
.faint { color: var(--c-text-disabled); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }