:root {
  --spacer: 1rem;
  --spacer-sm: .66rem;
  --spacer-xs: .33rem;

  --color-background: #111;
  --color-background-column: #202020;
  --color-accent: hsl(237deg 58% 68%);
  --color-accent-text: hsl(237deg 100% 84%);
  --color-accent-background: hsl(237deg 18% 28%);
  --color-text: #ddd;
  --color-text-highlight: #fff;
  --color-text-muted: #999;
  --color-text-hint: #555;

  --color-border: #282828;

  --border-width: 2px;
  --border-radius: 4px;

  --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro","Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --font-size-base: 14px;
  --font-size-sm: 12px;

  --table-color-background-row: #303030;
  --table-color-background-row-odd: #2b2b2b;

  --table-color-background-row-selected: var(--color-accent);
  --table-color-background-row-selected: var(--color-accent);
  --table-color-border: var(--color-border);

  --header-height: 25px;
  --footer-height: 25px;
  --grid-gap: 6px;

  --transition-speed: 240ms;
  --transition-speed-fast: 60ms;
}

html,
body {
  background-color: #111;
  color: var(--color-text);
  color-scheme: dark;
  font-size: var(--font-size-base);
  height: 100vh;
  margin: 0;
  padding: 0;
}

#app {
  display: grid;
  font-family: var(--font-family-body);
  grid-gap: var(--grid-gap);
  grid-template-areas:
    "header header header"
    "col-1 col-2 col-3"
    "footer footer footer";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
  padding: var(--grid-gap);
  height: calc(100% - calc(var(--grid-gap) * 2));
  width: calc(100% - calc(var(--grid-gap) * 2));
}

@media (max-width: 1280px) {
  #app {
    grid-template-areas:
    "header header"
    "col-1 col-2"
    "col-3 col-3"
    "footer footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--header-height) 1fr 1fr var(--footer-height);
  }
}

.col {
  background-color: var(--color-background-column);
  border-radius: var(--border-radius);
  padding: var(--spacer-sm);
}

.col-1 {
  grid-area: col-1;
}

.col-2 {
  grid-area: col-2;
}

.col-3 {
  grid-area: col-3;
}

.app-version {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

a {
  color: currentColor;
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

header {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  grid-area: header;
  padding: 0 var(--spacer-sm);
}

header nav {
  margin-right: auto;
}

nav > ul {
  align-items: center;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav > ul > li > a {
  display: block;
  padding: var(--spacer-xs) var(--spacer-sm);
}

h2.column-title {
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-hint);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacer-sm);
  margin-top: 0;
  padding-bottom: var(--spacer-xs);
}

h3.sub-title {
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-hint);
  font-size: var(--font-size-base);
  margin: var(--spacer) 0 var(--spacer-sm);
  padding: 0 0 var(--spacer-sm);
}

dl {
  display: grid;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  grid-template-columns: max-content auto;
}

dl dt {
  font-weight: bold;
  text-align: right;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

dl dd {
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: .133rem;
  margin-left: var(--spacer-sm);
  padding-bottom: .133rem;
}

dl dd:empty {
  border-color: transparent;
}

footer {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-sm);
  grid-area: footer;
  padding: var(--spacer-sm);
}

.btn-bar {
  align-items: center;
  display: flex;
  padding: var(--spacer-sm) 0;
}

.btn {
  align-items: center;
  background-color: var(--color-accent);
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-sm);
  justify-content: center;
  padding: var(--spacer-xs) var(--spacer-sm);
  touch-action: manipulation;
  transition-duration: var(--transition-speed);
  transition-property: color, background-color, border-color;
}

.btn-bar .btn+.btn {
  margin-left: var(--spacer-sm);
}

.btn-bar .btn[disabled] {
  background-color: transparent;
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  opacity: .5;
  pointer-events: none;
}

.btn-bar .btn:hover:not([disabled]) {
  transition: all 100ms;
  color: white;
}

.btn-bar .btn:focus {
  /* Make sure the outline is clearly visible inside the button. */
  outline-offset: -0.5em;
}

.btn-bar .btn.dangerous {
  background-color: #7c4d41;
  color: #e4c5c0;
  margin-left: 1rem;
}

.btn-bar .btn.dangerous[disabled] {
  background-color: #53413e;
}

.details-no-item-selected {
  align-items: center;
  color: var(--color-text-hint);
  display: flex;
  user-select: none;
  height: 100%;
  justify-content: center;
  margin: auto;
}